一、打包时间优化

1. 设置 babel 的 cacheDirectory 为true

babel-loader处理需要较多时间，可以充分利用缓存，进一步提升性能。 babel-loader 提供了 cacheDirectory特定选项（默认 false），设置时，给定的目录将用于缓存加载器的结果。

{
    test: /\.js?$/,
    exclude: /node_modules/,
    use: ['babel-loader?cacheDirectory'],
    include: utils.pathResolve('src')
}

2. 引入 DllPlugin 和 DllReferencePlugin

参考Demo：dllplugin-demo

其原理是将一些不常更新的第三方NPM包，如 react，lodash等提前构建，然后通过页面引入。这不仅能够使得打包文件大幅度减小，同时也极大的提高了打包速度。

DllPlugin执行后生成manifest.json索引文件和指定的第三方库构建bundle；

new webpack.DllPlugin({
  context: __dirname,
  path: utils.pathResolve('dist/manifest.json'),
  name: '[name]_[chunkhash]',
}),

DllReferencePlugin 插件则把只有dll的bundle引用到需要的预编译的依赖。

new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require(path.join(config.build.assetsRoot, 'manifest.json')),
}),

3. 增强代码压缩工具

Webpack默认提供的UglifyJS 插件采用单线程压缩，速度比较慢；而webpack-parallel-uglify-plugin 插件可以并行运行UglifyJS 插件，对CPU 资源更加充分使用，大大减少了构建时间

var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
  cacheDir: '.cache/',
  uglifyJS:{
    output: {
      comments: false
    },
    compress: {
      warnings: false
    }
  }
})

二、打包体积优化

利用webpack-bundle-analyzer等插件可以清楚的看到打包后模块的组成和占比，从而有针对性的优化较大的模块。

1. 尽可能引入更合适的包

尽量不要引入jquery，moment等体积较大的第三方库，如果非引入不可，可以采用体积相对小的替代包。如和monent相似的有date-fns和DAY.JS等。

2. 代码分割-动态导入(dynamic imports)

对于不常用的资源包或组件，可以动态拆分代码，需要用到时再加载相应的js文件。对此有两种方案：第一种是使用import() 语法。第二种则是使用 webpack 特定的 require.ensure。以第一种方式为例：

webpack.config.js：

output: {
  ...
  chunkFilename: '[name].bundle.js',
}

src/index.js

loadModulesAsync = () => {
    const promiseA = import(/* webpackChunkName: "packageA" */'packageA')
    const promiseB = import(/* webpackChunkName: "packageB" */'packageB')
    const promiseC = import(/* webpackChunkName: "packageC" */'packageC')

    Promise.all(promiseA, promiseB, promiseC)
    .then(([packageA, packageB, packageC]) => {
      ...
    })
}

Lao's Blog

webpack优化方案