【二月学习随笔】关于webpack.SplitChunk

• 默认配置

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

• 参数含义

chunks: 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为async;推荐使用all
minSize: 表示在压缩前的最小模块大小，默认为0；
minChunks: 表示被引用次数，默认为1；
maxAsyncRequests: 最大的按需(异步)加载次数，默认为1；
maxInitialRequests: 最大的初始化加载次数，默认为1；
name: 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
cacheGroups: 缓存组。

• cacheGroups

缓存组是一个对象，其中包含上述其他参数，如果不额外配置，默认继承上面的选项。缓存组还包含其他只能在缓存组设置的参数。

priority: 表示缓存的优先级；
test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；
reuseExistingChunk: 表示可以使用已经存在的块，即如果满足条件的块已经存在就使用已有的，不再创建一个新的块。

 

根据具体的需求，可以创建多个缓存组

• exp

new webpack.optimization.splitChunks = {
    minSize: 30000, 
    miniChunks: 1,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        priority: 1,
      },
    },
  }

上面的规则表示，引用模块大小最小为30kb，引用次数最少为1次，这样的模块如果还是node_modules中的模块，就将它拆分到一个叫vendors的代码块中