6.3 optimization.SplitChunks-Webpack实战：入门、进阶与调优(中)

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

### 6.3 `optimization.SplitChunks`：深度剖析与实战应用

在Webpack的构建过程中，代码分割是一项至关重要的技术，它能够帮助我们实现按需加载，减少初始加载时间，提升用户体验。Webpack通过其内置的`SplitChunksPlugin`（在配置中通常通过`optimization.splitChunks`属性进行配置）来支持这一特性。本章节将深入探讨`optimization.SplitChunks`的配置选项、工作原理、实战应用以及最佳实践，帮助读者更好地理解和利用这一功能来优化Webpack的打包结果。

#### 6.3.1 `optimization.SplitChunks`简介

`optimization.splitChunks`是Webpack 4及以上版本中用于配置代码分割的核心选项。它允许开发者定义如何将代码拆分成多个bundle，以便实现更高效的资源加载。默认情况下，Webpack会根据一些启发式规则（如代码体积、被共享的次数等）自动进行代码分割，但开发者也可以通过显式配置来覆盖这些默认行为，以满足特定的需求。

#### 6.3.2 配置选项详解

`optimization.splitChunks`配置对象提供了丰富的选项，以便精确控制代码分割的行为。以下是一些关键配置项的详细说明：

- **`chunks`**：指定哪些chunk应该被优化分割。默认值为`async`，表示仅对异步导入的chunk进行分割。可选值还包括`all`，表示对所有类型的chunk（包括入口chunk）进行分割。

- **`minSize`**：形成一个新代码块之前所需要的最小体积（以字节为单位）。默认为`20000`（20KB），小于此值的模块将不会被分割。

- **`maxSize`**：生成代码块时的最大体积（以字节为单位）。虽然不常见，但在某些情况下可以用来限制生成的bundle大小。

- **`minChunks`**：在分割之前，一个模块必须被至少多少个chunk共享。默认为`2`，意味着至少被两个chunk共享的代码才会被分割出来。

- **`maxInitialRequests`**：入口点处的并行请求的最大数量。这有助于控制入口点处加载的bundle数量，避免过多的并行加载。默认为`3`。

- **`automaticNameDelimiter`**：生成名称时使用的分隔符。默认为`~`。

- **`cacheGroups`**：最强大的配置项，允许你根据条件自定义代码块分组。你可以通过配置不同的`cacheGroups`来精细控制哪些模块应该被包含在同一个bundle中。

#### 6.3.3 `cacheGroups`实战应用

`cacheGroups`是`optimization.splitChunks`中最具灵活性和强大功能的部分。通过定义不同的`cacheGroup`，你可以根据模块类型、来源或其他条件来分割代码。以下是一些常见的`cacheGroup`配置示例：

- **默认vendors分割**：
  ```javascript
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      maxSize: 0,
      minChunks: 1,
      maxInitialRequests: Infinity,
      automaticNameDelimiter: '~',
      enforceSizeThreshold: 50000,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  ```
  这个配置将`node_modules`中的模块分割到一个或多个vendors bundle中，而其他共享模块则根据`minChunks`和`priority`属性进行分割。

- **按需加载的库分割**：
  有时，你可能希望将某些按需加载的第三方库也分割出来，以减少主bundle的大小。这可以通过在`cacheGroups`中定义额外的组来实现：
  ```javascript
  cacheGroups: {
    // ... 其他配置
    lazyVendors: {
      test: /[\\/]node_modules[\\/]/,
      chunks: 'async',
      minChunks: 2,
      priority: 20,
    },
    // ...
  },
  ```

- **分割CSS**：
  如果你的项目中使用了CSS模块化或全局CSS，并且希望将CSS从主bundle中分离出来，可以使用专门的插件（如`mini-css-extract-plugin`）结合`splitChunks`配置来实现：
  ```javascript
  optimization: {
    splitChunks: {
      // ... 其他配置
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  ```

#### 6.3.4 实战优化与最佳实践

- **分析你的构建**：使用Webpack的`--profile --json > stats.json`选项来生成构建分析文件，然后使用Webpack Bundle Analyzer等工具来可视化分析结果，找出潜在的优化点。

- **合理设置`minChunks`**：`minChunks`的值直接影响代码分割的粒度。设置得太高可能导致分割不够细致，而设置得太低则可能产生大量细碎的bundle，增加HTTP请求次数。

- **利用`enforce`属性**：在某些情况下，你可能需要确保某个`cacheGroup`的优先级高于其他所有默认或自定义的组。这时，可以使用`enforce: true`来强制Webpack优先考虑该组的配置。

- **注意`minSize`与`maxSize`的平衡**：太小的`minSize`可能导致大量细碎的bundle，而太大的`maxSize`则可能使得某些bundle过大，影响加载性能。

- **避免重复分割**：通过`reuseExistingChunk`选项确保模块不会被重复分割到多个bundle中。

- **持续监控与调优**：随着项目的发展，依赖的第三方库和内部模块会不断变化。因此，建议定期审查和调整`optimization.splitChunks`配置，以确保构建结果始终最优。

通过深入理解和灵活运用`optimization.SplitChunks`配置，你可以有效地优化Webpack的打包结果，提升应用的加载速度和用户体验。希望本章节的内容能够为你在这方面的工作提供有力的支持和指导。

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

全解webpack前端开发环境定制

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

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

Webpack零基础入门

webpack指南