6.2.1 提取vendor-Webpack实战：入门、进阶与调优(中)

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

### 6.2.1 提取vendor

在Webpack的构建过程中，优化打包结果以提高加载速度和应用性能是一个持续追求的目标。其中，提取vendor（第三方库）到单独的bundle中是一项重要的优化策略。这不仅可以减少代码重复，还可以利用浏览器缓存机制来加速页面加载。本章将深入探讨如何在Webpack项目中实现vendor的提取，包括其原理、配置步骤以及最佳实践。

#### 6.2.1.1 理解Vendor提取的必要性

在现代Web开发中，项目往往依赖于大量的第三方库（如React、Vue、jQuery等）和工具（如lodash、moment.js等）。这些库和工具构成了项目的vendor部分。如果不加以区分，所有的代码（包括应用代码和vendor代码）都会被打包成一个或多个bundle文件。这样做的缺点显而易见：

1. **代码冗余**：当多个页面或组件共享相同的vendor库时，每个bundle都可能包含重复的vendor代码。
2. **缓存效率低下**：如果vendor代码和应用代码混合打包，任何应用代码的修改都会导致整个bundle的更新，进而影响到浏览器缓存。

因此，将vendor代码从应用代码中分离出来，并单独打包成一个或多个bundle，可以显著减少代码冗余，提高缓存效率，进而提升应用加载速度。

#### 6.2.1.2 Webpack中的Vendor提取方法

Webpack提供了多种方法来提取vendor，其中最常用的是通过`SplitChunksPlugin`（在Webpack 4+中自动集成）和`CommonsChunkPlugin`（在Webpack 4之前版本中使用）。由于`CommonsChunkPlugin`在Webpack 4及更高版本中已被废弃，我们将主要讨论使用`SplitChunksPlugin`进行vendor提取的方法。

##### 使用SplitChunksPlugin

`SplitChunksPlugin`是Webpack内置的代码分割插件，它基于一定的规则自动将代码分割成多个bundle。对于vendor提取，我们可以通过配置`optimization.splitChunks`选项来实现。

**基本配置示例**：

```javascript
module.exports = {
  // 其他配置...
  optimization: {
    splitChunks: {
      chunks: 'all', // 表示作用于异步和同步代码块
      minSize: 20000, // 生成代码块之前所需达到的体积（以字节为单位）
      maxSize: 0, // 生成的代码块的最大体积（以字节为单位），默认为0，表示不限制
      minChunks: 1, // 分割前必须共享模块的最小块数
      maxInitialRequests: 30, // 一个入口点所需的并行请求的最大数目
      automaticNameDelimiter: '~', // 生成名称时使用的分隔符
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配node_modules中的模块
          priority: -10, // 优先级，数字越大优先级越高
          reuseExistingChunk: true, // 如果当前代码块已经包含需要的模块，则复用现有的代码块
        },
        default: {
          minChunks: 2, // 至少需要被2个chunk共享才能提取
          priority: -20, // 优先级低于vendors
          reuseExistingChunk: true,
        },
      },
    },
  },
};
```

在上述配置中，`cacheGroups`是`SplitChunksPlugin`的核心配置部分，它允许我们定义不同的代码块组（cache group）。每个组都有自己的规则，用于决定哪些模块应该被包含在该组中。在上面的例子中，我们定义了两个组：`vendors`和`default`。`vendors`组专门用于匹配`node_modules`中的模块，并将它们提取到单独的bundle中；而`default`组则用于处理其他共享模块，这些模块的提取条件更为严格（至少需要被两个chunk共享）。

#### 6.2.1.3 注意事项与最佳实践

虽然提取vendor可以带来诸多好处，但在实际应用中仍需注意以下几点：

1. **合理设置体积阈值**：`minSize`和`maxSize`的设置需要根据项目实际情况来调整，以避免生成过多过小的bundle或单个bundle过大。

2. **评估缓存策略**：虽然提取vendor可以提高缓存效率，但也需要考虑旧版本浏览器对新生成的vendor bundle的缓存行为。可能需要配置适当的缓存策略或使用哈希值来确保更新的代码能够被正确加载。

3. **动态导入与代码分割**：对于大型应用，除了提取vendor外，还可以考虑使用动态导入（`import()`）和代码分割来进一步减小初始加载的bundle体积。

4. **监控与优化**：在实施vendor提取后，应使用Webpack Bundle Analyzer等工具来监控打包结果，并根据实际情况调整配置以达到最佳性能。

5. **兼容性考虑**：虽然`SplitChunksPlugin`在Webpack 4及更高版本中表现良好，但在旧版本Webpack中可能需要使用`CommonsChunkPlugin`或手动配置来实现类似的功能。

6. **持续维护与更新**：随着项目依赖的更新和变化，vendor bundle的内容也会发生变化。因此，需要定期检查和更新vendor的提取配置，以确保其始终有效。

#### 6.2.1.4 结论

提取vendor是Webpack项目中一个非常重要的优化手段。通过合理的配置`SplitChunksPlugin`或其他相关插件/策略，我们可以将第三方库和应用代码有效分离，从而提高应用的加载速度和性能。然而，需要注意的是，任何优化手段都应在充分理解其原理和适用场景的基础上进行实施和调整。只有这样，我们才能确保项目在保持高效的同时，也能保持其可维护性和可扩展性。

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

全解webpack前端开发环境定制

webpack指南

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

Webpack零基础入门

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