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分割：

  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中定义额外的组来实现：

  cacheGroups: {
    // ... 其他配置
    lazyVendors: {
      test: /[\\/]node_modules[\\/]/,
      chunks: 'async',
      minChunks: 2,
      priority: 20,
    },
    // ...
  },

• 分割CSS：
  如果你的项目中使用了CSS模块化或全局CSS，并且希望将CSS从主bundle中分离出来，可以使用专门的插件（如mini-css-extract-plugin）结合splitChunks配置来实现：

  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的打包结果，提升应用的加载速度和用户体验。希望本章节的内容能够为你在这方面的工作提供有力的支持和指导。