阅读 205

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匹配规则也可以是一个方法,分组更灵活

更多相关的资料

关注下面的标签,发现更多相似文章
评论