SplitChunk 与DLL 、CommonsChunk

关于SplitChunksPlugin与CommonsChunkPlugin

在Webpack4后，官方就不再推荐使用了CommonsChunkPlugin，该为推荐使用SplitChunksPlugin。

在CommonsChunkPlugin中是通过文件中父子关系来进行关联的，这会造成一个问题：
存在当前文件中部分模块不是必须的而提前加载了。

CommonsChunkPlugin 存在以下问题：

需要下载当前还不需要使用的代码文件。
异步加载使用文件效率低下。
高优的 chunk 产出需要的 minchunks 配置比较复杂。

而在SplitChunksPlugin中，引入了ChunkGroup 概念，文件分组，在配置中属性为cacheGroups 。

SplitChunksPlugin 也提供了更多特性

不会加载非必须文件（除非进行了强制合并）
异步文件处理更有效率。
默认异步处理文件。
它将引用模块分散到多个库文件中。
更容易使用。
不依赖文件引用关系图。
更加的自动化。

SplitChunksPlugin 默认配置

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',  //默认作用于异步chunk 
      minSize: 20000,  //默认值是20kb
      minRemainingSize: 0, //通过确保拆分后剩余的最小 chunk 体积超过限制来避免大小为零的模块。
      minChunks: 1,  //被多少模块共享
      maxAsyncRequests: 30,  //所有异步请求不得超过30个
      maxInitialRequests: 30, //初始话并行请求不得超过30个
      enforceSizeThreshold: 50000,  //强制执行拆分的体积阈值和其他限制 
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,  //抽取的正则表达式
          priority: -10,  //优先级
          reuseExistingChunk: true,    //   如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
        },
        default: { 
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};
}
}

其中cacheGroups中可以定义多个，进行更多细则的打包优化。

DLL

DLLPlugin这个插件是在一个额外独立的 webpack 设置中创建一个只有 dll 的 bundle——即在将所有第三方依赖包打包到 bundle的dll文件中，会生成 manifest.json 文件，
manifest.json 的作用是用来让 DllReferencePlugin 映射到相关的依赖上去。

DLLPlugin 它则是提前将公共的包构建出来，使得在 build 时过滤掉这些构建过的包，使得在正是构建时的速度缩短。所以其相对来说打包速度会更快。
在Webpack4中有hardsourcewebpackplugin,配置更简单，效率比dll效率更高。

参考

webpack 插件文档
 webpack 文件分离思想
 webpack 4: Code Splitting, chunk graph and the splitChunks optimization
译文：webpack 4: Code Splitting, chunk graph and the splitChunks optimization