webpack代码分割： optimization.splitChunks 的使用

在现代的 Web 开发中，前端构建工具如 Webpack 扮演着重要角色。Webpack 通过将应用程序的代码分割成多个小文件，提升了网页的加载性能。而 optimization.splitChunks 作为 Webpack 的一项功能，能够自动将代码按需拆分，减少冗余，提升页面的加载速度。

本文将深入探讨 optimization.splitChunks 的使用，帮助你更好地理解如何通过它优化 Web 应用的构建。

---

1. 什么是 optimization.splitChunks？

optimization.splitChunks 是 Webpack 中的一个配置选项，允许你将共享代码从多个模块中提取出来并分割成独立的文件。这样不仅可以避免重复的代码，还能加速浏览器缓存的利用，提高页面加载速度。

在 Webpack 中，splitChunks 的核心作用是 代码分割，它使得 Webpack 可以将应用程序的依赖和代码分割成较小的、更容易缓存的块。

2. 为什么使用 splitChunks？

随着 Web 应用变得越来越复杂，构建的 JavaScript 文件也变得越来越大。一个单独的文件包含了应用程序的所有代码，用户在加载页面时会浪费时间下载这些不必要的代码。

splitChunks 可以解决这个问题，它的主要好处有：

• 减少首屏加载时间：通过分割代码，可以将初始加载的代码减小，只加载页面需要的代码。
• 提升缓存利用率：如果某个代码块未发生改变，可以直接使用浏览器缓存而不需要重新加载。
• 避免冗余代码：提取出多个地方重复使用的代码，避免重复加载相同的代码。

3. optimization.splitChunks 配置

optimization.splitChunks 配置项允许开发者在 Webpack 配置中指定如何拆分代码。它的基本配置如下：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 可以设置为 'all', 'async', 'initial'
      minSize: 20000, // 文件最小大小，低于此大小的文件不拆分
      maxSize: 0, // 最大文件大小，超过此大小的文件会被拆分
      minChunks: 1, // 一个模块至少被引用的次数，才会拆分
      automaticNameDelimiter: '~', // 文件名分隔符
      name: true, // 是否使用自动生成的文件名
    },
  },
};

关键配置项解释

• chunks：指定分割的类型，可以是：

  • 'all'：对所有的模块（同步和异步）进行分割。
  • 'async'：仅对异步加载的模块进行分割。
  • 'initial'：仅对初始化时加载的模块进行分割。

• minSize：指定拆分的最小文件大小，单位是字节。如果拆分出来的文件小于该值，则不会被拆分。

• maxSize：指定拆分的最大文件大小，单位是字节。如果文件超过该大小，将会拆分成多个小块。

• minChunks：一个模块至少被引用的次数，才会被拆分。默认值为 1，表示只要模块被引用一次就拆分。

• name：指定输出的文件名。可以是 true，表示使用自动生成的文件名；也可以是一个函数或字符串，来自定义文件名。

• automaticNameDelimiter：指定分割文件名时使用的分隔符。默认是 ~。

---

4. splitChunks 的常见使用场景

1) 默认配置：分割公共依赖

Web 应用中，很多库（如 React, Vue, Lodash 等）是多个模块共享的。splitChunks 默认会将这些共享依赖提取成单独的文件，避免每个页面都重复引入。

例如，下面的配置可以将第三方库（如 react, lodash 等）提取为单独的 vendors~main.js 文件：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

在这种配置下，react, lodash 等库就会被提取出来，并单独打包成一个 vendors~main.js 文件，避免了重复的下载和加载。

2) 拆分大型文件

如果你发现某个文件过大，导致页面加载缓慢，maxSize 可以帮助你自动拆分该文件。

module.exports = {
  optimization: {
    splitChunks: {
      maxSize: 50000, // 文件大小超过 50KB 会被拆分
    },
  },
};

3) 提取公共代码

当多个页面共享相同的模块时，你可以使用 splitChunks 将公共代码提取成一个单独的 chunk，以提高缓存效率。

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'all',
          minChunks: 2, // 至少有两个模块使用相同的代码，才会提取
        },
      },
    },
  },
};

这会将被两个或更多模块共享的代码提取为一个 commons.js 文件。

4) 提取异步代码

当你使用动态 import() 语法来实现按需加载时，Webpack 会自动将这些异步加载的代码拆分到单独的文件中。如果你想进一步优化，减少异步文件的大小，可以使用 splitChunks 配置来控制拆分逻辑。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async', // 只拆分异步加载的模块
    },
  },
};

5. splitChunks 配置的性能优化

正确使用 splitChunks 可以极大地提升 Web 应用的加载性能，但也需要根据项目的具体需求进行配置。以下是几个常见的性能优化建议：

• 避免过多拆分：如果拆分过于细致，可能会导致请求过多的小文件，增加了网络请求开销。可以通过调整 minSize 和 maxSize 参数来控制拆分的粒度。
• 合理设置缓存：通过将公共代码拆分为独立的文件，可以提高浏览器的缓存命中率，减少不必要的下载。
• 结合懒加载：与 dynamic import 配合使用，按需加载特定模块，减少首屏加载时间。

6. 小结

optimization.splitChunks 是 Webpack 中非常强大的功能，它帮助我们通过代码分割来提升应用的加载性能。理解如何配置它，尤其是如何配置 chunks, minSize, maxSize 等选项，可以帮助开发者根据项目需求合理拆分代码，减少页面加载时间，提升用户体验。