8.3.1 vendor配置-Webpack实战：入门、进阶与调优(中)

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

### 8.3.1 Vendor配置

在Webpack的构建流程中，`vendor`配置是一个重要的环节，它直接关系到项目加载性能的优化。`vendor`通常指的是项目中使用的第三方库（如React、Vue、Lodash等），这些库由于体积较大且更新频率低于项目自身代码，因此适合被单独打包处理，以提高缓存效率和加载速度。本章将深入探讨Webpack中如何配置`vendor`，包括基本概念、配置方法、优化策略及实际案例。

#### 8.3.1.1 理解Vendor配置

**基本概念**

在Webpack中，`vendor`配置主要指的是将项目中的第三方库（依赖）从主应用代码中分离出来，单独打包成一个或多个文件（通常是`vendor.js`）。这样做的好处在于：

1. **缓存优化**：由于第三方库更新频率较低，将其单独打包后，用户访问不同页面或功能时，可以重用缓存中的`vendor.js`，减少不必要的重复下载。
2. **并行加载**：浏览器可以同时加载多个资源，将`vendor`与主应用代码分离，可以实现并行加载，加快页面渲染速度。
3. **代码分割**：清晰的代码结构有助于维护和管理，特别是在大型项目中，`vendor`配置是代码分割的重要一环。

**Webpack中的实现**

Webpack通过`entry`、`plugins`、`output`等配置项来支持`vendor`配置。其中，`entry`用于定义入口文件，可以指定多个入口点，包括`vendor`；`plugins`中的`SplitChunksPlugin`（或旧版中的`CommonsChunkPlugin`）用于实现代码分割，将公共依赖提取到单独的chunk中；`output`则定义了打包文件的输出路径和文件名。

#### 8.3.1.2 配置方法

**基本配置示例**

假设你的项目使用了React和Lodash作为第三方库，你可以这样配置Webpack：

```javascript
// webpack.config.js
module.exports = {
  // 其他配置...
  entry: {
    app: './src/index.js', // 主应用入口
    vendor: ['react', 'react-dom', 'lodash'] // 第三方库入口
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js', // 根据入口名称生成文件名
    chunkFilename: '[name].bundle.js' // 非入口chunk的文件名
  },
  optimization: {
    splitChunks: {
      chunks: 'all', // 作用于哪些chunk
      minSize: 20000, // 最小体积，单位字节
      maxSize: 0, // 最大体积，设置为0表示不限制
      minChunks: 1, // 被至少几个chunk共享时才会被分离
      maxAsyncRequests: 30, // 按需加载时的最大并行请求数
      maxInitialRequests: 30, // 入口点处的最大并行请求数
      automaticNameDelimiter: '~', // 生成名称时使用的分隔符
      cacheGroups: {
        // 自定义缓存组
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 正则表达式匹配node_modules下的模块
          priority: -10, // 优先级，数字越大优先级越高
          reuseExistingChunk: true // 如果当前chunk已经包含所需模块，则复用现有chunk
        },
        // 可以添加更多自定义缓存组
      }
    }
  },
  // 其他配置...
};
```

**注意**：从Webpack 4开始，`CommonsChunkPlugin`被废弃，取而代之的是`optimization.splitChunks`配置。

#### 8.3.1.3 优化策略

**1. 精确控制分割**

通过`cacheGroups`可以非常灵活地控制哪些模块被分割到哪个chunk中。你可以根据实际需要，为不同类型的库设置不同的缓存组，比如将CSS库、字体文件等分别处理。

**2. 控制文件大小**

`minSize`和`maxSize`参数可以帮助你控制分割出的chunk的大小，避免生成过多的小文件或过大的文件，影响加载性能。

**3. 异步加载**

对于非首次加载就需要的资源，可以考虑使用Webpack的动态导入（`import()`）功能，结合`SplitChunksPlugin`的异步请求控制（`maxAsyncRequests`），实现按需加载，进一步减少初始加载时间。

**4. 利用CDN**

对于广泛使用的第三方库，如React、Vue等，可以考虑通过CDN引入，而不是全部打包进项目中。这样不仅可以减小本地打包文件的体积，还能利用CDN的缓存机制提高加载速度。

**5. 定期分析**

使用Webpack Bundle Analyzer等工具，定期分析打包结果，了解各模块的体积分布，及时发现并处理过大的模块或不必要的依赖。

#### 8.3.1.4 实际案例

假设你正在开发一个基于React和Redux的SPA应用，同时使用了Lodash和Moment.js作为辅助库。你可以按照以下步骤配置Webpack以实现`vendor`分割：

1. **定义入口**：在`webpack.config.js`中定义`app`和`vendor`两个入口，其中`vendor`包含React、Redux、Lodash和Moment.js。
2. **配置SplitChunks**：使用`optimization.splitChunks`中的`cacheGroups`，为`node_modules`下的模块设置一个名为`vendors`的缓存组，确保它们被分离到`vendor.js`中。
3. **测试与验证**：运行Webpack打包，检查输出文件，确保`vendor.js`包含了所有预期的第三方库，且主应用代码被分离到了另一个文件。
4. **性能优化**：根据打包结果，调整`minSize`、`maxSize`等参数，优化分割效果。同时，考虑使用CDN引入React等常用库，进一步减小本地包体积。
5. **持续监控**：使用Webpack Bundle Analyzer等工具定期监控打包结果，及时发现并解决潜在的性能问题。

通过上述步骤，你可以有效地在Webpack项目中实现`vendor`配置，提升项目的加载性能和可维护性。

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

全解webpack前端开发环境定制

webpack指南

Webpack零基础入门

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

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