SplitChunks快速使用手册

splitChunks: {
      // chunks能够为三种值：async,initial,all；决定代码知足条件后是否进行拆分。
      // initial表示只考虑非import()异步导入代码进行拆分，async表示只拆分异步代码块，而all表示同异步都加入拆分范畴。
      chunks: 'async',
      
      // 知足尺寸才发生拆分
      // 例如导入10kb的依赖包小于30kb便不会拆分代码块
      minSize: 30000,
      
      // 当bundle达到maxSize，必须进行拆分
      // 例如jquery与lodash合并成了140kb，maxSize定位80kb，便会拆分两个依赖
      maxSize: 0,
      
      // 最少被引用的chunk个数
      // 例如一个入口块和一个异步块都引用了lodash，minChunks大于2时就不会添加新chunk来装lodash
      minChunks: 1,
      
      // 异步代码块最多可拆分次数
      // 假设某个import()模块有2MB，maxSize设定为500kb，若是此属性为1，模块最多就只能拆分一个bundle出去。
      maxAsyncRequests: 5,
      
      // 这属性和maxAsyncRequests道理一致，不过是做用与initial模块的
      maxInitialRequests: 3,
      
      // bundle自动命名使用的链接字符
      automaticNameDelimiter: '~',
      
      // bundle自动命名时名称长度限制
      automaticNameMaxLength: 30,
      
      // 可为bool、string类型，true是会使用默认命名，不然使用序号命名；string指定文件名称
      name: true,
      
      // 自定义拆分组
      cacheGroups: {
      
        // 每一个属性就是一个分组
        vendors: {
        
          // 导入路径的正则匹配，这为全部node_modules引用的模块代码
          test: /[\\/]node_modules[\\/]/,
          
          // 优先级默认为0，若是两个组引用了同一个模块，优先级高的组能够得到此模块
          priority: -10
          
        },
        default: {
          minChunks: 2,
          priority: -20,
          
          // 是否复用其余chunk内已拥有的模块
          // 默认为false，关闭表示拆分出复用部分的模块，给双方引用
          reuseExistingChunk: true
        }
      }
    }
复制代码

一些提示

• 默认配置在大多数场景下都有不错的表现
• webpack的externals更适合把第三方库移到CDN上
• test匹配规则也能够是一个方法，分组更灵活

更多相关的资料

• webpack 4: 代码拆分、代码块关系图及优化插件splitChunks
• 为 splitChunks 添加 maxSize 选择
• 不清楚 splitChunks.maxAsyncRequest 有什么用
• reuseExistingChunk 的使用例子