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数组进行。以下是一个基本的配置示例：

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配置来实现更为精细和高效的代码分割和公共代码抽离。