6.2 CommonsChunkPlugin-Webpack实战：入门、进阶与调优(中)

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

### 6.2 CommonsChunkPlugin：优化你的Webpack打包策略

在Webpack的构建流程中，代码分割（Code Splitting）和公共代码抽离（Commons Chunk Extraction）是优化应用加载时间和减少最终包大小的关键技术。`CommonsChunkPlugin`，作为Webpack早期版本中用于实现公共代码抽离的重要插件，虽然在Webpack 4及以后版本中已被废弃并由更强大的`optimization.splitChunks`配置所取代，但了解其原理和使用方法对于理解Webpack的打包优化策略仍具有重要意义。本章节将深入解析`CommonsChunkPlugin`的工作原理、配置方法及其在Webpack项目中的应用场景。

#### 6.2.1 引言：为何需要CommonsChunkPlugin

在Web开发中，随着项目规模的扩大，依赖的库和模块数量也会急剧增加。如果这些库和模块被直接打包进主文件中，会导致最终生成的bundle文件体积庞大，进而影响应用的加载速度和用户体验。此外，如果多个页面或组件共享了某些公共依赖（如React、Vue框架本身或某些第三方库），这些公共代码在每次请求时都被重复加载也是不必要的。

`CommonsChunkPlugin`正是为了解决上述问题而设计的。它能够识别出多个入口（entry）或多个chunk之间的公共依赖，并将这些公共依赖抽离到一个单独的chunk中，实现代码的复用，减少重复加载，从而优化应用的加载性能。

#### 6.2.2 CommonsChunkPlugin的工作原理

`CommonsChunkPlugin`通过分析Webpack的模块图（module graph），找出所有入口依赖的公共模块，并基于一定的策略（如模块被多少入口共享、模块大小等）来决定是否将其抽离为公共chunk。在Webpack构建过程中，插件会介入打包流程，修改最终生成的bundle配置，实现公共代码的抽离。

#### 6.2.3 配置CommonsChunkPlugin

在Webpack 4之前，`CommonsChunkPlugin`的配置主要通过Webpack配置文件中的`plugins`数组进行。以下是一个基本的配置示例：

```javascript
const webpack = require('webpack');

module.exports = {
  // 其他配置...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'commons', // 公共chunk的名称
      chunks: ['entry1', 'entry2'], // 指定哪些入口的公共模块需要被抽离
      minChunks: 2, // 最小共享次数，默认为2
      // 其他配置...
    }),
    // 可以配置多个CommonsChunkPlugin实例以抽离不同类型的公共代码
  ],
  // 确保entry配置正确，以匹配上述chunks
  entry: {
    entry1: './src/entry1.js',
    entry2: './src/entry2.js',
    // 其他入口...
  },
  // 其他配置...
};
```

在上面的配置中，`name`指定了公共chunk的名称，`chunks`指定了哪些入口的公共模块应该被抽离到这个公共chunk中，`minChunks`则用于定义一个模块至少需要被多少个不同的入口chunk共享，才能被抽离到公共chunk中。

#### 6.2.4 进阶配置与最佳实践

1. **异步代码分割与CommonsChunkPlugin**：
   当使用Webpack的代码分割功能（如通过`require.ensure`或动态`import()`）时，`CommonsChunkPlugin`同样可以工作，但需要注意配置以确保异步加载的模块也能正确地共享公共代码。

2. **多入口点的公共代码抽离**：
   对于具有多个入口点的应用，合理配置`CommonsChunkPlugin`可以显著减少重复代码，提高加载效率。通常，可以为所有入口点设置一个全局的公共chunk，然后再针对特定入口点配置额外的公共chunk。

3. **性能优化**：
   - **懒加载**：结合`CommonsChunkPlugin`，通过懒加载（Lazy Loading）非首屏必要的模块，可以进一步减少初始加载时间。
   - **压缩与缓存**：对公共chunk进行压缩（如使用`UglifyJsPlugin`或`TerserPlugin`），并利用浏览器缓存策略，可以减少重复下载，提升用户体验。

4. **Webpack 4及以后版本的替代方案**：
   在Webpack 4及更高版本中，`optimization.splitChunks`配置取代了`CommonsChunkPlugin`，提供了更为强大和灵活的代码分割和公共代码抽离能力。开发者应优先考虑使用`splitChunks`配置来优化他们的Webpack构建。

#### 6.2.5 小结

尽管`CommonsChunkPlugin`在Webpack 4及以后版本中已被废弃，但理解其工作原理和配置方法对于深入掌握Webpack的打包优化策略具有重要意义。在实际项目中，根据项目需求和Webpack版本选择合适的公共代码抽离方案，是提升应用加载性能、优化用户体验的关键步骤。对于Webpack 4及更高版本的项目，推荐使用`optimization.splitChunks`配置来实现更为精细和高效的代码分割和公共代码抽离。

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

全解webpack前端开发环境定制

Webpack零基础入门

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

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

webpack指南