6.2.2 设置提取范围-Webpack实战：入门、进阶与调优(中)

当前位置:　首页>> 技术小册>> Webpack实战：入门、进阶与调优(中)

### 6.2.2 设置提取范围

在Webpack的构建过程中，代码分割（Code Splitting）与资源优化是提升应用加载速度和性能的关键技术之一。其中，提取公共代码（如库文件、框架代码或应用中的通用模块）到单独的bundle中，可以显著减少重复加载，提高缓存效率。Webpack通过插件如`SplitChunksPlugin`（在Webpack 4+中自动集成）来支持这一功能。然而，仅仅启用代码分割并不足以满足所有优化需求，合理设置提取范围（Extraction Scope）是确保优化效果的关键步骤。

#### 6.2.2.1 理解提取范围

在Webpack中，设置提取范围主要是指定义哪些模块或代码块应该被识别为“公共”并因此被提取到单独的chunk中。这涉及到对模块间依赖关系的细致分析，以及对应用架构的深入理解。提取范围可以基于多种因素进行设置，包括但不限于：

- **模块大小**：只有达到一定大小的模块才值得被提取，以避免因提取过小的模块而引入额外的开销。
- **请求次数**：如果一个模块被多个入口点（entry point）请求，那么它很可能是公共的，应该被提取。
- **异步/同步加载**：异步加载的模块与同步加载的模块在提取时可能需要不同的策略。
- **第三方库**：通常，第三方库（如React、Vue等）会被视为公共代码并提取到单独的bundle中。

#### 6.2.2.2 配置SplitChunksPlugin

Webpack的`SplitChunksPlugin`允许我们通过`optimization.splitChunks`配置项来精细控制代码分割的行为，包括设置提取范围。以下是一个基本的配置示例，展示了如何设置提取范围：

```javascript
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all', // 作用于异步和同步chunk
      minSize: 20000, // 形成一个新代码块之前所需要的大小（以字节为单位）
      maxSize: 0, // 形成的代码块最大体积（以字节为单位），默认为0表示无限制
      minChunks: 2, // 被至少2个chunk共享的模块才会被分离
      maxInitialRequests: 30, // 入口点处的并行请求数不能超过这个值
      automaticNameDelimiter: '~', // 生成名称时使用的分隔符
      enforceSizeThreshold: 50000, // 强制分割前的大小阈值
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配node_modules中的模块
          priority: -10, // 优先级
          reuseExistingChunk: true, // 如果当前代码块已经包含了这个模块，则复用
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  // ...
};
```

在上述配置中，`cacheGroups`是设置提取范围的核心部分。通过定义不同的`cacheGroup`，我们可以为不同类型的模块指定不同的提取策略。例如，`vendors`组专门用于提取`node_modules`中的模块，而`default`组则用于处理其他满足`minChunks`条件的模块。

#### 6.2.2.3 深入配置cacheGroups

`cacheGroups`提供了极高的灵活性来定制提取策略。每个`cacheGroup`都可以包含以下属性：

- **test**：一个正则表达式或函数，用于匹配模块路径，以确定哪些模块应该被包含在这个组中。
- **priority**：用于确定处理顺序的优先级。数字越大，优先级越低。
- **reuseExistingChunk**：如果当前代码块已经包含了这个模块，是否应该复用而不是创建一个新的chunk。
- **name**（可选）：生成的chunk的名称模板。
- **enforce**（可选）：设置为`true`时，即使不满足`minSize`、`minChunks`等条件，也会强制生成一个chunk。

通过精细配置`cacheGroups`，我们可以实现复杂的提取逻辑，比如：

- **分离特定库**：为特定的第三方库（如jQuery、Lodash）设置单独的`cacheGroup`，以确保它们被单独提取。
- **按目录分离**：根据模块所在的目录来分离代码，比如将所有UI组件相关的模块提取到一个单独的bundle中。
- **动态导入优化**：针对动态导入（`import()`）的模块，设置特定的提取策略，以优化按需加载的性能。

#### 6.2.2.4 实战案例分析

假设我们有一个大型的单页应用（SPA），它使用了React作为前端框架，并集成了多个第三方库（如Redux、React Router等）。为了优化加载性能，我们可以按照以下步骤设置提取范围：

1. **基础配置**：首先，启用Webpack的默认`SplitChunksPlugin`配置，确保基本的代码分割功能生效。

2. **优化第三方库**：通过`cacheGroups`中的`vendors`组，将`node_modules`中的所有模块提取到单独的bundle中。这有助于浏览器缓存这些库，减少重复加载。

3. **分离UI组件**：如果应用中有大量可复用的UI组件，并且这些组件被多个页面或功能所共享，可以考虑将它们提取到一个单独的bundle中。这可以通过为这些组件所在的目录设置特定的`cacheGroup`来实现。

4. **动态导入优化**：对于按需加载的模块（如路由组件），确保它们被正确地分割到不同的chunk中，并通过适当的加载策略（如懒加载）来优化用户体验。

5. **性能评估**：使用Webpack Bundle Analyzer等工具来评估代码分割的效果，检查是否有不必要的重复代码或过大的chunk，并根据评估结果调整提取策略。

#### 6.2.2.5 结论

设置提取范围是Webpack代码分割优化中的关键步骤。通过合理配置`SplitChunksPlugin`的`cacheGroups`，我们可以实现精细的代码分割策略，从而优化应用的加载速度和性能。然而，需要注意的是，优化并非一蹴而就的过程，它需要根据应用的实际情况和性能评估结果来不断调整和完善。因此，在实践中，我们应该保持对Webpack配置和性能优化的持续关注和学习。

该分类下的相关小册推荐：

Webpack实战：入门、进阶与调优(上)

webpack指南

Webpack零基础入门

全解webpack前端开发环境定制

Webpack实战：入门、进阶与调优(下)