Webpack 中如何使用 SplitChunksPlugin 进行代码分割？

推荐答案

在 Webpack 中使用 SplitChunksPlugin 进行代码分割的步骤如下：

1. 配置 optimization.splitChunks：在 Webpack 配置文件中，通过 optimization.splitChunks 选项来配置代码分割的行为。

2. 默认配置：Webpack 提供了默认的 splitChunks 配置，适用于大多数场景。默认配置会将公共依赖提取到单独的 chunk 中。

3. 自定义配置：可以通过自定义 splitChunks 配置来满足特定的需求。常见的配置项包括 chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、name、cacheGroups 等。

4. 示例配置：

// www.javascriptcn.com code example
module.exports = {
  // 其他配置...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

本题详细解读

1. chunks 选项

• chunks: 'all'：表示对所有类型的 chunks 进行分割，包括同步和异步加载的 chunks。
• chunks: 'async'：仅对异步加载的 chunks 进行分割。
• chunks: 'initial'：仅对初始加载的 chunks 进行分割。

2. minSize 选项

• minSize: 30000：表示生成的 chunk 的最小大小（以字节为单位）。小于此大小的模块不会被分割。

3. minChunks 选项

• minChunks: 1：表示模块被至少多少个 chunks 引用时才会被分割。

4. maxAsyncRequests 选项

• maxAsyncRequests: 5：表示按需加载时，最大并行请求的 chunks 数量。

5. maxInitialRequests 选项

• maxInitialRequests: 3：表示初始加载时，最大并行请求的 chunks 数量。

6. automaticNameDelimiter 选项

• automaticNameDelimiter: '~'：表示生成的 chunk 名称的分隔符。

7. name 选项

• name: true：表示自动生成 chunk 的名称。

8. cacheGroups 选项

• cacheGroups：用于定义缓存组，可以将符合特定条件的模块打包到同一个 chunk 中。
  • vendors：用于将 node_modules 中的模块打包到一个单独的 chunk 中。
  • default：用于将其他模块打包到默认的 chunk 中。

9. priority 选项

• priority: -10：表示缓存组的优先级，数值越大优先级越高。

10. reuseExistingChunk 选项

• reuseExistingChunk: true：表示如果当前 chunk 包含的模块已经被其他 chunk 包含，则直接复用该 chunk，而不是生成新的 chunk。

通过合理配置 SplitChunksPlugin，可以有效地优化代码的加载性能，减少重复代码，提升应用的加载速度。