Webpack5 cacheGroups

---

一、 cacheGroups是什么？

在Webpack 5中，cacheGroups是用于配置代码拆分的规则，它可以帮助你更细粒度地控制生成的代码块。

作用：

1. 将依赖项（第三方库）从应用代码中抽离出来，提高构建速度。
2. 将应用代码按照自定义的规则拆分成不同的代码块，实现按需加载，减小初始加载的文件大小。

二、怎么使用cacheGroups？

具体用法：
在webpack.config.js中的optimization.splitChunks.cacheGroups对象中配置：

module.exports = {// ...其他配置optimization: {splitChunks: {cacheGroups: {group1: {test: /pattern/,name: 'group1',chunks: 'initial',enforce: true},group2: {test: /pattern/,name: 'group2',chunks: 'all',enforce: true}}}}
}

具体参数解释：

• test: 用于匹配模块的正则表达式。
• name: 指定生成的代码块的名称。
• chunks: 指定应该包含哪些类型的代码块。可选值有initial（初始代码块）、async（按需加载的代码块）和all（所有代码块）。
• enforce: 设置为true时，强制生成该代码块，即使它可能已经满足了其他的缓存组规则。

通过合理配置cacheGroups，可以根据项目需求将代码拆分成不同的块，提高构建速度和应用的加载性能。

三、cacheGroups实际应用之一？

 libs: {name: "chunk-libs",test: /[\\/]node_modules[\\/]/,priority: 10, // 权重最低，优先考虑前面内容chunks: "initial",},

在Webpack 5中，cacheGroups是用于配置优化代码分割的选项之一。这段代码定义了一个名为"libs"的cacheGroup。

• name: "chunk-libs"指定了该cacheGroup输出的chunk的名称。
• test: /[\/]node_modules[\/]/表示只有当模块来自于node_modules目录时，才会被打包到该chunk中。
• priority: 10指定了该cacheGroup的优先级，值越大，优先级越高。这意味着其他cacheGroup中定义的规则优先级低于该规则，所以在判断模块属于哪个cacheGroup时，会先考虑该规则。
• chunks: "initial"表示只将初始的chunk（即入口chunk）打包到该cacheGroup中。

综上所述，这段代码的作用是将来自于node_modules目录且属于初始chunk的模块打包到一个名为"chunk-libs"的chunk中，并且该cacheGroup具有最低的优先级（权重最低），优先考虑其他cacheGroup中的规则。