webpack性能优化代码分割、公共代码提起篇

一 、SplitChunks插件配置选项

• chunks选项，决定要提取那些模块。
  • 默认是async：只提取异步加载的模块出来打包到一个文件中。
    • 异步加载的模块：通过import('xxx')或require(['xxx'],() =>{})加载的模块。
• initial：提取同步加载和异步加载模块，如果xxx在项目中异步加载了，也同步加载了，那么xxx这个模块会被提取两次，分别打包到不同的文件中。
  • 同步加载的模块：通过 import xxx或require('xxx')加载的模块。
• all：不管异步加载还是同步加载的模块都提取出来，打包到一个文件中。
• minSize选项：规定被提取的模块在压缩前的大小最小值，单位为字节，默认为30000，只有超过了30000字节才会被提取。
• maxSize选项：把提取出来的模块打包生成的文件大小不能超过maxSize值，如果超过了，要对其进行分割并打包生成新的文件。单位为字节，默认为0，表示不限制大小。
• minChunks选项：表示要被提取的模块最小被引用次数，引用次数超过或等于minChunks值，才能被提取。
• maxAsyncRequests选项：最大的按需(异步)加载次数，默认为 6。
• maxInitialRequests选项：打包后的入口文件加载时，还能同时加载js文件的数量（包括入口文件），默认为4。
• 先说一下优先级 maxInitialRequests / maxAsyncRequests <maxSize<minSize。
• automaticNameDelimiter选项：打包生成的js文件名的分割符，默认为~。
• name选项：打包生成js文件的名称。
• cacheGroups选项，核心重点，配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups每项中特有的选项，其余选项和外面一致，若cacheGroups每项中有，就按配置的，没有就使用外面配置的。
  • test选项：用来匹配要提取的模块的资源路径或名称。值是正则或函数。
  • priority选项：方案的优先级，值越大表示提取模块时优先采用此方案。默认值为0。
  • reuseExistingChunk选项：true/false。为true时，如果当前要提取的模块，在已经在打包生成的js文件中存在，则将重用该模块，而不是把当前要提取的模块打包生成新的js文件。
  • enforce选项：true/false。为true时，忽略minSize，minChunks，maxAsyncRequests和maxInitialRequests外面选项

也就是说，在不影响代码正确执行的前提下，最优化的代码压缩配置为如下：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      //在cacheGroups外层的属性设定适用于所有缓存组，不过每个缓存组内部可以重设这些属性
      chunks: "async", //将什么类型的代码块用于分割，三选一： "initial"：入口代码块 | "all"：全部 | "async"：按需加载的代码块
      minSize: 30000, //大小超过30kb的模块才会被提取
      maxSize: 0, //只是提示，可以被违反，会尽量将chunk分的比maxSize小，当设为0代表能分则分，分不了不会强制
      minChunks: 1, //某个模块至少被多少代码块引用，才会被提取成新的chunk
      maxAsyncRequests: 5, //分割后，按需加载的代码块最多允许的并行请求数，在webpack5里默认值变为6
      maxInitialRequests: 3, //分割后，入口代码块最多允许的并行请求数，在webpack5里默认值变为4
      automaticNameDelimiter: "~", //代码块命名分割符
      name: true, //每个缓存组打包得到的代码块的名称
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, //匹配node_modules中的模块
          priority: -10, //优先级，当模块同时命中多个缓存组的规则时，分配到优先级高的缓存组
        },
        default: {
          minChunks: 2, //覆盖外层的全局属性
          priority: -20,
          reuseExistingChunk: true, //是否复用已经从原代码块中分割出来的模块
        },
        styles: {
          name: 'styles',
          test: /\.(s?css|vue|less)$/,
          chunks:"all",
          enforce: true
        },
        common: {
          name: "common",
          chunks: "all",
          minChunks: 2,
          priority: 10,
        }
      },
    },
  },
};