参考：
High-performance webpack config for front-end delivery
webpack3 指南

高性能 Webpack 配置

Scope Hoisting （作用域提升）

过去 webpack 打包时的一个取舍是将 bundle 中各个模块单独打包成闭包。这些打包函数使你的 JavaScript 在浏览器中处理的更慢。相比之下，一些工具像 Closure Compiler 和 RollupJS 可以提升(hoist)或者预编译所有模块到一个闭包中，提升你的代码在浏览器中的执行速度。

在生产环境中配置：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
  ],
};

下面放一张用户使用之后包体的对比，大概减少了50%，对于模块数量很多的项目来说提升较大。

Minification and Uglification （压缩和丑化）

代码压缩和“丑化”是生产环境中必不可少的，然而偶尔的会遗忘，所以在部署到生产环境之前，首先要做的就是检查代码是否经过压缩和“丑化”

错误的方式

直接运行 webpack 命令进行打包，查看包体积

正确的方式

只需要在 webpack 命令后面加上 -p 参数！

通过对比可以发现，减少了整整 60% 的体积！没有压缩前，充斥着空格、换行、注释！

📌 -p 参数不会设置 node 环境变量为生产环境 production，当你需要在生产环境中执行时，可使用该命令行：NODE_ENV=production PLATFORM=web webpack -p

📌 为了快速打包，可以将参数添加到 package.json 中：

1
2
3

"scripts": {
  "build": "webpack -p"
},

高级压缩方式

使用 UglifyjsWebpackPlugin 插件
安装

1	npm i -D uglifyjs-webpack-plugin

用法

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}

默认的配置已经很好的满足大部分的项目需求，但如何你想更进一步压缩，减少一部分不必要的代码，可以使用 Webpack 版本 > 3.0：

1
2
3

plugins:[
  new webpack.optimize.UglifyJsPlugin({/* options here */}),
],

Dynamic Imports for Lazy-loaded Modules （动态引入和懒加载）

生产环境下的使用

使用动态引入的项目，编译时：

可以看到之前整个的 bundle.js 文件被拆分了多个，在 index.html 中只引入了 index.bundle.js 作为入口，按需加载其他被拆分的js文件

安装配置

安装 Babel：

1	yarn add babel-loader babel-core babel-preset-env

配置 webpack.config.js，允许 Babel 处理你的 js 文件

module: {
  rules: [
    {
      test: /\.js$/,
      use: 'babel-loader',
      exclude: /node_modules/,
    },
  ],
},

完成以上设置后，可以安装处理动态引入的插件了

1	yarn add babel-plugin-syntax-dynamic-import

创建或修改 .babelrc 在项目的根目录

{
  "presets": ["env"],
  "plugins": ["syntax-dynamic-import", "transform-react-jsx"]
}

改造代码

将需要被改造成懒加载的模块做简单的代替：

1	import Home from './components/Home';

with

1	const Home = import('./components/Home');

最终我们的 index.js 入口文件被改造成了这样，这种 import 的方式只是一种语法糖，在一些框架中如 vue 已经得到支持

import React from 'react';
import Async from 'react-code-splitting';

const Nav = () => (<Async load={import('./components/Nav')} />);
const Home = () => (<Async load={import('./views/home')} />);
const Countdown = () => (<Async load={import('./views/countdown')} />);

webpack.config.js

配置文件的出口和出口

entry: {
  index: './index.js',
},

  output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].bundle.js',
  publicPath: '/',
},

Deterministic Hashes for Caching（对缓存使用确定的Hash值）

webpack 在默认的情况下不会自动添加 hash，例如 app.8087f8d9fed812132141.js，这意味着，数据保存在缓存个中，当用户刷新时不会得到更新。

在 webpack 快速添加 hashes：

1
2
3

output: {
  filename: '[name].[hash].js',
},

⚠️ 注意这里有一个陷阱，每一次的构建，不管文件有没有更改都会重新声场新的 hash 值，例如在使用 webpack -p 时，即使用户已经已经下载相关文件，那么讲不得不刷新！

⚠️ 使用哈希值构建，将会降低编译的速度，请在生产环境中使用！

Deterministic Hashes 配置

📌这里我们需要解决的一个问题是，当内容改变到时候用户才会刷新缓存，如果没有改变，则不会去刷新缓存。

插件安装：

1	yarn add chunk-manifest-webpack-plugin webpack-chunk-hash

chunk-manifest-webpack-plugin: 允许导出一个json文件，将id映射到其中，webpack 会读取该json，以确定需要刷新缓存的模块
webpack-chunk-hash: 使用自定义的（md5）代替标准的webpack 生成的 hash

修改 webpack.config.js ，用于生产环境 :

const webpack = require('webpack');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/* Shared Dev & Production */

const config = {
  /* … our webpack config up until now */

  plugins: [
    // /* other plugins here */
    // 
    // /* Uncomment to enable automatic HTML generation */
    // new HtmlWebpackPlugin({
    //   inlineManifestWebpackName: 'webpackManifest',
    //   template: require('html-webpack-template'),
    // }),
  ],
};

/* Production 指定了生产环境中使用 */
if (process.env.NODE_ENV === 'production') {
  config.output.filename = '[name].[chunkhash].js';
  config.plugins = [
    ...config.plugins, // ES6 array destructuring, available in Node 5+
    new webpack.HashedModuleIdsPlugin(),
    new WebpackChunkHash(),
    new ChunkManifestPlugin({
      filename: 'chunk-manifest.json',
      manifestVariable: 'webpackManifest',
      inlineManifest: true,
    }),
  ];
}

module.exports = config;

🌚 Tip
对于上面的例子，当你使用 yarn add html-webpack-plugin html-webpack-template 模板时，会自动的添加注释，如果没有使用 webpack 的 HTML 模板，则需要手动的引入，引入方式为：

<head>
  <script>
    //<![CDATA[
    window.webpackManifest = { /* contents of chunk-manifest.json */ };
    //]]>
  </script>
</head>

同样的 manifest.js 也需要引入，当你设置好了这两个文件，那么一切准备就绪。

CommonsChunkPlugin for Vendor Caching

CommonsChunkPlugin ： CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加载一个更大的文件。

一行代码的简单配置：

module.exports = {
  entry: {
    app: './app.js',
    vendor: ['react', 'react-dom', 'react-router'],
  },
};

然后运行 webpack -p

但是这种配置有个问题，这里的 'react', 'react-dom', 'react-router'，会同时打包到 index.bundle.js 和 vendor.bundle.js 中

要解决上述问题，我们需要使用 CommonsChunkPlugin 插件，将文件分离出来，在 webpack.config.js 中的配置

const webpack = require('webpack');

plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
  }),
],

⚠️ 需要注意的是，插件中的name 要是入口的名字匹配

配置完成之后，重新打包，发现包体被拆分了！

Offline Plugin for webpack（PWA）

使用offline-plugin搭配webpack轻松实现PWA

此插件用于实现PWA，新技术，是否需要使用和探索，这里记录配置的方法，这并不复杂

安装：

1	yarn add offline-plugin

添加到r= webpack config:

const OfflinePlugin = require('offline-plugin');

module.exports = {
  entry: {
    // Adding to vendor recommended, but optional
    vendor: ['offline-plugin/runtime', /* … */],
  },
  plugins: [
    new OfflinePlugin({
      AppCache: false,
      ServiceWorker: { events: true },
    }),
  ],
};

然后，在 app 中的入口文件，在开始渲染之前使用：

/* index.js */
if (process.env.NODE_ENV === 'production') {
  const runtime = require('offline-plugin/runtime');

  runtime.install({
    onUpdateReady() {
      runtime.applyUpdate();
    },
    onUpdated() {
      window.location.reload();
    },
  });
}

webpack Bundle Analyzer（包分析工具）

1	yarn add --dev webpack-bundle-analyzer

添加到开发环境

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

config = { /* shared webpack config */ };

if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
  config.plugins = [
    ...config.plugins,
    new BundleAnalyzerPlugin(),
  ];
}

运行并监听 8888 端口

1	node_module/.bin/webpack --profile --json > stats.json

Multi-entry Automatic CommonsChunk Plugin（多页面应用程序）

应用场景不多，只记录下来。

webpack.config.js

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

这是什么？我们告诉 webpack 需要 3 个独立分离的依赖图。

为什么？在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事：

使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

We can update CommonsChunk to just figure things out automatically:

/* Dev & Production */
new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  minChunks: 2,
}),
/* Production */
new webpack.optimize.CommonsChunkPlugin({
  name: 'manifest',
  minChunks: Infinity,
}),