Webpack 通过SplitChunksPlugin实现包拆分

1. Entry Points：你可以通过配置多个入口来实现，Webpack 会根据依赖关系自动拆分成多个 chunk。这是一个相对简单的方式，但是可能会导致一些重复代码。

2. SplitChunksPlugin：这是一个更加强大的拆包工具，它会分析模块间的依赖关系，将多个模块公共的部分提取到单独的 chunk 中。
   SplitChunksPlugin 的配置选项用于优化代码拆分，允许更细粒度的控制代码拆分的行为。以下是一些主要的配置选项：

   (1) cacheGroups: 这是 SplitChunksPlugin 最重要的配置选项之一，可以用来定义如何将模块分配到 cache group 中（缓存组）。你可以为每个 cache group 指定一个特定的测试函数、优先级、重用已有的 chunk 等等。

   (2) chunks: 用于控制本插件影响哪些 chunk，可选值为 “initial”（只影响初始 chunk），“async”（只影响异步 chunk），“all”（同时影响上述两者）。

   (3)minSize: 用于控制拆分出的新 chunk 的最小大小，单位为字节。默认值为 30000。

   (4) minChunks: 用于控制一个模块被多少个 chunk 共享才会被拆分出来，默认值为 1。

   (5) maxAsyncRequests: 控制同时加载的异步请求数量的最大值，默认值为 6。

   (6) maxInitialRequests: 控制初始页面加载时的最大请求数量，默认值为 4。

   (7) automaticNameDelimiter: 用于生成 chunk 名称时的分隔符，默认值为 ‘~’。

   (8) name: 可以是一个返回 chunk 名称的函数，或者是一个固定的 chunk 名称。如果不提供，则会根据 chunk 的包和选项自动生成一个。

每个选项都可以在你的 webpack 配置文件的 optimization.splitChunks 属性下设置。这样你就可以根据你自己的需求微调代码拆分的行为，以优化你的代码包的大小和加载性能。
要配置 SplitChunksPlugin，你需要在你的 webpack 配置中添加 optimization.splitChunks 配置。下面是一个简单的示例：

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

在这个配置文件中，splitChunks.chunks 选项被设置为 ‘all’, 表示所有的 chunks，包括同步和异步导入的都会被分包。

要通过SplitChunksPlugin将从node_modules目录导入的模块合并到一个名为’Vendors’的chunk中，你可以通过修改webpack的配置文件中的分包策略来实现。以下是一个例子：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

在这个配置中，我们创建了一个名为’vendor’的缓存组，它会匹配所有从node_modules目录导入的模块（由test: /[\\/]node_modules[\\/]/这行定义）。然后，为这些模块创建一个名为’vendors’的新chunk（由name: 'vendors'这行定义）。

此外，chunks: 'all'告诉webpack，无论模块是同步加载还是异步加载，都应该选择并放入’vendors’这个chunk中。分包策略可以在这里自行定义，chunks可以设置为all, async, initial其中的一个，分别对应全部模块，异步模块，初始加载模块。

这样，在打包的时候，Webpack就会将所有从node_modules目录导入的模块打包到一个单独的’vendors’chunk中。

3.如果你想要对一个或多个特定的包（例如前端依赖的 abc 几个体积较大的包）进行更进一步的控制，你可以使用 cacheGroups 选项来创建一个特定的规则：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/](a|b|c)[\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

在这个配置中，所有从 node_modules 目录下的 a, b, c 三个包导入的模块会被合并到一个单独的 vendors chunk 中。

以上就是文章全部内容了，如果喜欢这篇文章的话，还希望三连支持一下，感谢！