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实际应用之一

vue项目可以使用cacheGroups抽离一些公共模块，比如layouts（项目页面框架），elementUI或者其他ui组件库，vue，以及都会分离的libs（node_modules目录模块），这里我举例说明的是对 libs 的配置项。

 libs: {
          name: "chunk-libs",//指定了该cacheGroup输出的chunk的名称
          test: /[\\/]node_modules[\\/]/,//表示只有当模块来自于node_modules目录时，才会被打包到该chunk中
          priority: 10, // 权重最低，优先考虑前面内容
          chunks: "initial",//"initial"表示只将初始的chunk（即入口chunk）打包到该cacheGroup中
        },

在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中的规则。