Webpack 中如何使用 cacheGroups？

推荐答案

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

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

-- -------------------- ---- -------
-------------- - -
  ------------- -
    ------------ -
      ------------ -
        ------- -
          ----- -------------------------
          ----- ----------
          ------- ------
        --
        ------- -
          ----- ---------
          ---------- --
          ------- ------
          --------- ---
          ------------------- -----
        --
      --
    --
  --
--

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

1. vendor：用于将所有来自 node_modules 的模块打包到一个名为 vendors 的 chunk 中。
2. 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，你可以显著提升应用的性能，减少加载时间，优化缓存策略。