深入浅出 webpack5 中的 SplitChunksPlugin，打造更优化的前端应用

2023-12-05 21:20:06

深入剖析 webpack 5 的 SplitChunksPlugin：优化前端应用性能

随着现代前端开发的蓬勃发展，构建工具已成为不可或缺的助手，大幅提升了开发效率和项目质量。其中，webpack 作为最受欢迎的前端构建工具之一，在代码编译、打包和压缩方面表现出色。在 webpack 5 中，新推出的 SplitChunksPlugin 插件为代码拆分带来了革命性的优化，让我们深入探索其原理、使用方法和优化技巧。

SplitChunksPlugin 原理：化整为零，性能飞升

SplitChunksPlugin 作为一款代码拆分利器，其工作原理可以用一个比喻形象地概括：把一个庞大的代码库拆分成多个精巧的模块，就像把一个又大又笨重的包裹拆分成多个小而轻便的包裹。

在 webpack 的构建流程中，SplitChunksPlugin 担任拆分大神的角色。它首先对代码库进行全盘扫描，找出可以拆分出来的代码块，接着按照既定规则将这些代码块拆分成一个个独立的小模块。最后，它将这些小模块分别打包成独立的文件，让浏览器在加载页面时仅需调用真正需要的部分，大大减少了加载时间，提升了应用性能。

SplitChunksPlugin 使用指南：轻松上手，享受极速

启用 SplitChunksPlugin 十分简单，只需在 webpack 的配置文件中配置该插件即可。以下是示例配置：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 50000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '-',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        common: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

配置详解：

chunks: 指定要拆分的代码块类型，默认值为 'async'，只拆分异步加载的代码块；'all' 表示拆分所有代码块。
minSize: 规定拆分代码块的最小体积，单位为字节。
maxSize: 设定拆分代码块的最大体积，超过此体积的代码块将被拆分。
minChunks: 规定代码块被拆分的最小次数，次数不够的代码块将不被拆分。
maxAsyncRequests: 设置异步加载的代码块的最大请求数。
maxInitialRequests: 设置初始加载的代码块的最大请求数。
automaticNameDelimiter: 指定拆分后代码块文件名的分隔符。
cacheGroups: 指定代码块的缓存组，可用于控制不同代码块的拆分方式和打包到哪个文件中。

SplitChunksPlugin 优化技巧：锦上添花，极致提速

为充分发挥 SplitChunksPlugin 的优化潜力，以下技巧值得一试：

合理设置 minSize 和 maxSize: minSize 过小会导致代码块过于细碎，增加 HTTP 请求数量；maxSize 过大则会导致代码块过于庞大，延长加载时间。
调整 minChunks: minChunks 过小会导致代码块过于细碎，增加 HTTP 请求数量；minChunks 过大则会导致代码块过于庞大，延长加载时间。
控制 maxAsyncRequests 和 maxInitialRequests: 过小的值会导致 HTTP 请求数量增加，过大的值会导致代码块过于庞大，延长加载时间。
合理利用 cacheGroups: cacheGroups 可帮助控制代码块的拆分方式，将相关代码块打包到同一文件中，减少 HTTP 请求数量。