SplitChunksPlugin插件学习

SplitChunksPlugin开箱即用，适用于大多数用户，无需过多配置即可使用

默认情况下，它仅影响按需块，因为更改初始块会影响 HTML 文件应包含以运行项目的脚本标记。

webpack会根据以下条件默认进行自动拆分：

• 新的chunk被多处引用或者来自node_modules文件夹下。
• 新的chunk大于30kb(最小化压缩前)。
• 按需并行加载请求不超过 5
• 页面初始化加载请求不超过 3

配置

optimization.splitChunks ，此配置对象代表SplitChunksPlugin.

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,//要生成的块的最小大小（以字节为单位）。形成一个新代码块最小的体积,只有 >= minSize 的bundle会被拆分出来
      maxSize: 0,//拆分之前最大的数值，默认为0，即不做限制
      minChunks: 1,//拆分前必须共享模块的最小块数。
      maxAsyncRequests: 5,//按需加载时的最大并行请求数。
      maxInitialRequests: 3,//页面初始化最大并行请求数
      automaticNameDelimiter: '~',//用于分割原始名称和块名
      automaticNameMaxLength: 30,//名称长度
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

splitChunks.automaticNameDelimiter：默认情况下，webpack 将使用块的来源和名称（例如vendors~main.js）生成名称。此选项允许您指定用于生成名称的分隔符。

splitChunks.chunks

• async 异步引⼊的库进⾏分离(默认)
• initial 同步引⼊的库进⾏分离
• all 所有引⼊的库进⾏分离(推荐)

splitChunks.maxAsyncRequests：按需加载时的最大并行请求数。

splitChunks.maxInitialRequests：页面初始化最大并行请求数。

splitChunks.minChunks：拆分前必须共享模块的最小块数。

splitChunks.minSize：要生成的块的最小大小（以字节为单位）。形成一个新代码块最小的体积,只有 >= minSize 的bundle会被拆分出来

splitChunks.maxSize：告诉 webpack 尝试将大于maxSize字节的块拆分为更小的部分。需要比minSize大，默认为0，即不做限制，当块已经有了名字时，每个部分都会得到一个从这个名字派生的新名字。根据它的值，optimization.splitChunks.hidePathInfo将添加从第一个模块名称或它的哈希派生的密钥
splitChunks.name：拆分块的名称。提供true将根据块和缓存组键自动生成名称。

splitChunks.cacheGroups:我们要切割成的每一个新chunk就是一个cache group,cacheGroups可以继承和/或覆盖任何选项splitChunks.*；但是test，priority并且reuseExistingChunk只能在cacheGroups级别配置。要禁用任何默认cacheGroups，请将它们设置为false.

splitChunks.cacheGroups.{cacheGroup}.test：和CommonsChunkPlugin里的minChunks非常像，用来决定提取哪些module，可以接受字符串，正则表达式，或者函数，函数的一个参数为module，第二个参数为引用这个module的chunk(数组).
splitChunks.cacheGroups.{cacheGroup}.priority：优先级高的chunk为被优先选择,优先级一样的话，size大的优先被选择
splitChunks.cacheGroups.{cacheGroup}.reuseExistingChunk: 当module未变时，是否可以使用之前的chunk.
splitChunks.cacheGroups.{cacheGroup}.name：拆分出来的chunk命名，如果配置了这一项，splitChunks.automaticNameDelimiter配置将无效。