splitChunks怎么分割降低包大小

在现代前端开发中，随着项目规模的增大，JavaScript 文件的体积也随之增加。为了优化加载性能，减少首屏加载时间，Webpack 提供了 splitChunks 配置项，用于将代码分割成多个较小的文件。本文将详细介绍如何使用 splitChunks 来降低包大小，提升应用性能。

1. 什么是 splitChunks？

splitChunks 是 Webpack 4 引入的一个功能，用于将代码分割成多个 chunk（块）。通过合理的配置，可以将公共依赖、第三方库等代码提取到单独的 chunk 中，从而减少主包的体积，提升加载速度。

2. splitChunks 的基本配置

在 Webpack 配置文件中，splitChunks 通常位于 optimization 选项中。以下是一个基本的配置示例：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000, // 最小尺寸，小于该值的模块不会被分割
      maxSize: 0, // 最大尺寸，超过该值的模块会被进一步分割
      minChunks: 1, // 最小引用次数，超过该次数的模块才会被分割
      maxAsyncRequests: 5, // 异步加载时的最大并行请求数
      maxInitialRequests: 3, // 入口点的最大并行请求数
      automaticNameDelimiter: '~', // 生成的文件名中的分隔符
      name: true, // 自动生成 chunk 的名称
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中的模块
          priority: -10, // 优先级，数值越大优先级越高
          filename: 'vendors.js', // 生成的 chunk 文件名
        },
        default: {
          minChunks: 2, // 最小引用次数
          priority: -20, // 优先级
          reuseExistingChunk: true, // 是否重用已有的 chunk
          filename: 'common.js', // 生成的 chunk 文件名
        },
      },
    },
  },
};

3. splitChunks 的关键配置项

3.1 chunks

chunks 选项用于指定哪些模块会被分割。常见的取值有：

• 'async'：只分割异步加载的模块。
• 'initial'：只分割同步加载的模块。
• 'all'：分割所有模块，包括同步和异步加载的模块。

3.2 minSize 和 maxSize

• minSize：指定模块的最小体积，小于该值的模块不会被分割。
• maxSize：指定模块的最大体积，超过该值的模块会被进一步分割。

3.3 minChunks

minChunks 指定模块被引用的最小次数，超过该次数的模块才会被分割。

3.4 cacheGroups

cacheGroups 是 splitChunks 的核心配置项，用于定义如何将模块分组。每个缓存组可以定义自己的匹配规则、优先级、文件名等。

4. 如何通过 splitChunks 降低包大小

4.1 提取第三方库

第三方库通常体积较大且不常变化，可以将它们提取到单独的 chunk 中。例如：

cacheGroups: {
  vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10,
    filename: 'vendors.js',
  },
}

4.2 提取公共代码

如果多个模块引用了相同的代码，可以将这些公共代码提取到单独的 chunk 中。例如：

cacheGroups: {
  common: {
    minChunks: 2,
    priority: -20,
    reuseExistingChunk: true,
    filename: 'common.js',
  },
}

4.3 按需加载

通过配置 chunks: 'async'，可以将异步加载的模块分割成单独的 chunk，从而实现按需加载，减少首屏加载时间。

5. 总结

通过合理配置 splitChunks，可以有效地将代码分割成多个较小的 chunk，从而降低主包的体积，提升应用的加载性能。在实际项目中，可以根据具体需求调整 splitChunks 的配置，以达到最佳的优化效果。

通过以上步骤，你可以充分利用 Webpack 的 splitChunks 功能，有效地降低包大小，提升应用的性能。希望本文对你有所帮助！