webpack打包详细说明

webpack概念module、chunk和bundle

• module：js的模块化，简单说就是通过import引入的代码
• chunk：webpack根据功能拆分的代码块，包含三种情况
  • 项目入口entry
  • 通过import()动态引入的代码
  • 通过splitChunks拆分出来的代码
• bundle：webpack打包后的各个文件，对chunk编译压缩打包后的产物。

webpack默认配置

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.chunk

• async表示只从异步加载得模块（动态加载import()）里面进行拆分
• initial表示只从入口模块进行拆分
• all表示以上两者都包括

webpack.splitChunks.chunk.cacheGroups

cacheGroups会继承默认配置里面的chunks、minSize、minChunks等等，除了test, priority和reuseExistingChunk，这三个是只在cacheGroup这一层生效。

webpack.splitChunks.chunk.maxInitialRequests

限制入口的拆分数量

• 入口文件本身算一个请求
• 如果入口里面有动态加载得模块这个不算在内
• 通过runtimeChunk拆分出的runtime不算在内
• 只算js文件的请求，css不算在内
• 同时有两个模块满足cacheGroup的规则要进行拆分，但是maxInitialRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来

webpack.splitChunks.chunk.maxAsyncRequests

限制异步模块内部的并行最大请求数，可以理解为是每个import()它里面的最大并行请求数量。

• import()文件本身算一个请求
• 并不算js以外的公共资源请求比如css
• 同时有两个模块满足cacheGroup的规则要进行拆分，但是maxAsyncRequests的值只能允许再拆分一个模块，那尺寸更大的模块会被拆分出来

其它

• cacheGroup必须同时满足各个条件才能生效
• splitChunks的配置项都是作用于cacheGroup上的，如果将cacheGroup的默认两个分组vendor和default设置为false，则splitChunks就不会起作用
• minChunks、maxAsyncRequests、maxInitialRequests的值必须设置为大于等于1的数
• 当chunk没有名字时，通过splitChunks分出的模块的名字用id替代，当然也可以通过name属性自定义
• 当父chunk和子chunk同时引入相同的module时，并不会将其分割出来而是删除掉子chunk里面共同的module，保留父chunk的module，这个是因为 optimization.removeAvaliableModules 默认是true
• 当两个cacheGroup.priority相同时，先定义的会先命中
• 除了js，splitChunks也适用于css