Webpack 中如何使用 cacheGroups？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Webpack 中，cacheGroups 是 SplitChunksPlugin 的一个配置项，用于将模块分组并打包成独立的 chunk。通过 cacheGroups，你可以更精细地控制代码分割的行为，将特定的模块打包到指定的 chunk 中。

以下是一个使用 cacheGroups 的示例配置：

// www.javascriptcn.com code example
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          priority: 10,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

在这个配置中，我们定义了两个 cacheGroups：

vendor：用于将所有来自 node_modules 的模块打包到一个名为 vendors 的 chunk 中。
common：用于将至少被两个 chunk 共享的模块打包到一个名为 common 的 chunk 中。

本题详细解读

1. `cacheGroups` 的作用

cacheGroups 是 SplitChunksPlugin 的核心配置之一，它允许你将模块分组并打包成独立的 chunk。通过 cacheGroups，你可以根据模块的来源、使用频率等条件，将模块分配到不同的 chunk 中，从而实现更精细的代码分割。

2. `cacheGroups` 的配置项

每个 cacheGroup 可以配置以下选项：

test：用于匹配模块的路径或名称。只有符合 test 条件的模块才会被分配到该 cacheGroup 中。
name：生成的 chunk 的名称。如果未指定，Webpack 会自动生成一个名称。
chunks：指定哪些类型的 chunk 会被优化。可选值有 initial、async 和 all。
priority：优先级。当模块符合多个 cacheGroup 的条件时，优先级高的 cacheGroup 会优先处理。
minChunks：模块被至少多少个 chunk 共享时才会被打包到该 cacheGroup 中。
reuseExistingChunk：如果当前 chunk 包含的模块已经存在于其他 chunk 中，是否复用这些模块。

3. 示例配置解析

在示例配置中，我们定义了两个 cacheGroups：

vendor：将所有来自 node_modules 的模块打包到一个名为 vendors 的 chunk 中。test 选项通过正则表达式匹配模块路径，chunks: 'all' 表示所有类型的 chunk 都会被优化。
common：将至少被两个 chunk 共享的模块打包到一个名为 common 的 chunk 中。minChunks: 2 表示模块至少被两个 chunk 共享时才会被打包到该 cacheGroup 中，priority: 10 表示该 cacheGroup 的优先级较高。

4. 使用场景

cacheGroups 特别适用于以下场景：

第三方库打包：将 node_modules 中的第三方库打包到一个单独的 chunk 中，便于缓存和更新。
公共模块提取：将多个页面或组件共享的公共模块提取到一个单独的 chunk 中，减少重复代码。
按需加载：通过 cacheGroups 将某些模块按需加载，优化首屏加载速度。

通过合理配置 cacheGroups，你可以显著提升应用的性能，减少加载时间，优化缓存策略。

Webpack 中如何使用 cacheGroups？