Webpack 4 SplitChunksPlugin术语含义及配置疑问咨询

嘿，我完全懂你的感受——Webpack 4重写的代码拆分插件确实带来了巨大的提升，但初期文档不完善确实容易让人摸不着头脑，我来给你把这两个困惑点拆解清楚：

1. chunks配置的三个可选值详解 #

chunks参数用来指定SplitChunksPlugin要处理哪些类型的chunk，三个值的具体含义和差异如下：

• initial：只针对入口chunk（也就是你在entry配置里定义的那些入口文件对应的chunk）进行代码拆分。动态导入（比如import()语法）生成的chunk不会被这个规则覆盖。
• async：只处理动态导入生成的chunk，入口chunk里的依赖不会被拆分。这也是Webpack 4的默认值。
• all：同时覆盖入口chunk和动态导入的chunk，相当于把前两者的规则合并。

针对你举的例子：main.tsx动态导入about.tsx，about.tsx常规导入lodash。如果chunks设为initial，那么lodash不会被提取到commons bundle里——因为about.tsx是动态导入的，属于async chunk，不在initial的处理范围内。只有当chunks设为all或async时，这个lodash才会被检测到，如果满足minChunks:2的条件（比如还有其他chunk也引用了lodash），就会被提取到公共bundle中。

2. enforce:true的作用 #

SplitChunksPlugin有一些内置的默认限制条件，比如minSize（默认30KB，只有当拆分出的chunk大小超过这个值才会生效）、minRemainingSize等。而enforce:true的作用就是忽略这些默认的限制条件，强制按照当前缓存组的规则进行代码拆分。

举个例子：如果你的公共模块总大小只有20KB，没达到默认的30KB阈值，默认情况下Webpack不会拆分这个chunk。但如果你的缓存组设置了enforce:true，不管大小如何，只要满足minChunks:2等你定义的条件，就会强制把这些模块提取到指定的commons bundle里。

结合你的配置示例理解 #

你给出的这段配置：

optimization: {
  splitChunks: {
    cacheGroups: {
      'commons': {
        minChunks: 2,
        chunks: 'all',
        name: 'commons',
        priority: 10,
        enforce: true,
      },
    },
  },
},

• minChunks:2：只要某个模块被至少2个chunk（不管是入口还是动态导入的）引用，就会被纳入这个缓存组
• chunks:'all'：同时处理入口和动态导入的chunk
• priority:10：设置缓存组的优先级（Webpack会优先匹配优先级高的缓存组，避免同一个模块被多个缓存组匹配）
• enforce:true：强制拆分，忽略Webpack默认的minSize等限制，哪怕拆分出的commons bundle很小也会生成

内容的提问来源于stack exchange，提问作者user3299310