记录一下webpack的chunks

[dravenww]

webpack的chunks是通过webpack内部的一个插件来实现的，在3版本及以前使用的是CommonsChunkPlugin;在4版本后开始使用SplitChunksPlugin，我们对于3版本及以前的不做解释，着眼未来，我们来看SplitChunksPlugin；我们根据配置来看：

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
        }
      }
    }
  }
};

上面是webpack的默认配置，splitChunks就算你什么配置都不做它也是生效的，源于webpack有一个默认配置，这也符合webpack4的开箱即用的特性。

chunks意思为拆分模块的范围，有三个值：async、all和initial；三个值的区别如下：

• async表示只从异步加载得模块里面进行拆分，也就是动态加载import()；
• initial表示只从入口模块进行拆分；
• all的话，就是包含上面两者，都会去拆分；
  上面还有几个参数：
• minChunks，代表拆分之前，当前模块被共享的次数，上面是1，也就是一次及以上次引用，就会拆分；改为2的话，就是两次及以上的引用会被拆分；
• minSize：生成模块的最小大小，单位是字节；也就是拆分出来的模块不能太小，太小的话进行拆分，多了一次网络请求，因小失大；
• maxAsyncRequests：用来限制异步模块内部的并行最大请求数的，也就是是每个动态import()它里面的最大并行请求数量，需要注意的是：
• • import()本身算一个；
• • 只算js的，不算其他资源，例如css等；
• • 如果同时又两个模块满足cacheGroup的规则要进行拆分，但是maxInitialRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来；
• maxInitialRequests：表示允许入口并行加载的最大请求数，之所以有这个配置也是为了对拆分数量进行限制，不至于拆分出太多模块导致请求数量过多而得不偿失，需要注意的是
• • 入口本身算一个请求，
• • 如果入口里面有动态加载的不算在内；通过runtimeChunk拆分出的runtime不算在内；只算js的，不算css的；
• • 如果同时又两个模块满足cacheGroup的规则要进行拆分，但是maxInitialRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来；
• automaticNameDelimiter：这是个连接符，不用关注这个；
• name：该属性主要是为了打包后文件的命名，使用原名字命名为true，按照默认配置，就会是文件名~文件名.**.js
• cacheGroup：cacheGroups其实是splitChunks里面最核心的配置，splitChunks就是根据cacheGroups的配置去拆分模块的，
• • test：正则匹配路径，表示只筛选从node_modules文件夹下引入的模块，所以所有第三方模块才会被拆分出来。
• • priority：优先级，上面的default的优先级低于vendor；
• • minChunks：这个其实也是个例子，和父层的含义是一样的，不过会覆盖父层定义的值，拆分之前，模块被共享使用的次数；
• • reuseExistingChunk：是否使用以及存在的chunk，字面意思；
    注意：
• cacheGroups之外设置的约束条件比如说默认配置里面的chunks、minSize、minChunks等等都会作用于cacheGroups，cacheGroups里面的值覆盖外层的配置；
• test、priority、reuseExistingChunk，这三个是只能定义在cacheGroup这一层的；
• 如果cacheGroups下面的多个对象的priority相同时，先定义的会先命中；