解剖 SplitChunksPlugin：剖析 Webpack 性能利器

2023-10-08 10:57:00

前言

在现代前端开发中，代码分离是一种常用的优化技术，它可以将应用程序的代码拆分成多个更小的块，从而提高应用程序的加载速度和性能。Webpack 是一个流行的前端构建工具，它提供了 SplitChunksPlugin 插件，可以帮助你轻松实现代码分离。

SplitChunksPlugin 工作原理

SplitChunksPlugin 插件通过分析应用程序的依赖关系图，将应用程序的代码拆分成多个更小的块。这些块可以是同步加载的块，也可以是异步加载的块。同步加载的块会在应用程序启动时加载，而异步加载的块会在需要的时候才加载。

SplitChunksPlugin 插件会根据以下规则将应用程序的代码拆分成多个块：

最小块大小： SplitChunksPlugin 插件会将应用程序的代码拆分成多个块，每个块的大小至少要达到最小块大小。
最大块数： SplitChunksPlugin 插件会将应用程序的代码拆分成多个块，每个块的最大数量不超过最大块数。
缓存组： SplitChunksPlugin 插件会将应用程序的代码拆分成多个块，每个块属于一个缓存组。缓存组可以是内置的缓存组，也可以是自定义的缓存组。
按需加载： SplitChunksPlugin 插件可以将应用程序的代码拆分成多个异步加载的块。异步加载的块会在需要的时候才加载。

如何使用 SplitChunksPlugin

要在你的 Webpack 项目中使用 SplitChunksPlugin 插件，你需要在你的 webpack.config.js 文件中添加以下代码：

const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin');

module.exports = {
  plugins: [
    new SplitChunksPlugin({
      chunks: 'all',
      minSize: 30000,
      maxSize: 50000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '-',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        async: {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          priority: -20,
        }
      }
    })
  ]
};

在上面的代码中，我们创建了一个新的 SplitChunksPlugin 实例，并将其添加到 webpack.config.js 文件中的 plugins 数组中。SplitChunksPlugin 实例的构造函数接受一个对象作为参数，该对象可以配置 SplitChunksPlugin 插件的行为。

chunks: 指定要拆分的块类型。可以是 'all'、'async'、'initial' 或 'main'。
minSize: 指定最小块大小。单位是字节。
maxSize: 指定最大块大小。单位是字节。
minChunks: 指定一个块至少要被引用多少次才能被拆分。
maxAsyncRequests: 指定异步加载的块的最大数量。
maxInitialRequests: 指定同步加载的块的最大数量。
automaticNameDelimiter: 指定块名称的分隔符。
name: 指定是否为块生成名称。
cacheGroups: 指定缓存组。

如何分离第三方依赖包

要分离第三方依赖包，你需要在 SplitChunksPlugin 插件的 cacheGroups 对象中添加一个名为 vendors 的缓存组。vendors 缓存组的 test 属性可以匹配到第三方依赖包的路径。vendors 缓存组的 priority 属性可以指定 vendors 缓存组的优先级。priority 属性的值越小，优先级越高。

const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin');

module.exports = {
  plugins: [
    new SplitChunksPlugin({
      chunks: 'all',
      minSize: 30000,
      maxSize: 50000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '-',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        async: {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          priority: -20,
        }
      }
    })
  ]
};

在 cacheGroups 对象中，我们添加了一个名为 vendors 的缓存组。vendors 缓存组的 test 属性可以匹配到第三方依赖包的路径。vendors 缓存组的 priority 属性设置为 -10，这表示 vendors 缓存组的优先级很高。

如何分离异步包

要分离异步包，你需要在 SplitChunksPlugin 插件的 cacheGroups 对象中添加一个名为 async 的缓存组。async 缓存组的 test 属性可以匹配到异步加载的代码。async 缓存组的 priority 属性可以指定 async 缓存组的优先级。priority 属性的值越小，优先级越高。

const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin');

module.exports = {
  plugins: [
    new SplitChunksPlugin({
      chunks: 'all',
      minSize: 30000,
      maxSize: 50000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '-',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        async: {
          test: /[\\/]node_modules[\\/]/,
          minChunks: 2,
          chunks: 'async',
          priority: -20,
        }
      }
    })
  ]
};