webpack打包优化

webpack相关知识参考：webpack整理

dll

参考：Vue利用DllPlugin打包优化

AutoDllPlugin

手动配置比较麻烦。有个插件autodll-webpack-plugin，可以直接使用

const path = require('path');
// 第 1 步：引入 DLL 自动链接库插件
const AutoDllPlugin = require('autodll-webpack-plugin');
// ...
module.exports = {
  // ...
  plugins: [
    // 第 2 步：配置要打包为 dll 的文件
    new AutoDllPlugin({
      // 设为 true 就把 DLL bundles 插到 index.html 里
      inject: true,
      filename: '[name].dll.js',
      // AutoDllPlugin 的 context 必须和 package.json 的同级目录，要不然会链接失败
      context: path.resolve(__dirname, '../'),
      entry: {
        react: [
          'react',
          'react-dom'
        ]
      }
    })
  ]
}

HardSourceWebpackPlugin

webpack4中，使用dll效果已经不是很明显了。
可以使用hard-source-webpack-plugin

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
// ...
module.exports = {
  // ...
  plugins: [
    // 直接加入这行代码就行
    new HardSourceWebpackPlugin()
  ]
}