如何使用splitChunks创建多个供应商模块

splitChunks是webpack中的一个功能，用于将代码拆分成多个供应商模块，以便更好地利用浏览器的缓存机制，提高应用程序的加载速度和性能。

具体使用splitChunks创建多个供应商模块的步骤如下：

在webpack配置文件中，找到optimization属性，如果没有则需要手动添加。
在optimization中添加一个splitChunks属性，用于配置splitChunks的相关选项。
在splitChunks中可以配置一些参数，例如：
- chunks: 指定需要拆分的代码块类型，默认为async，即异步加载的模块。还可以设置为initial（同步加载的模块）或all（所有模块）。
- minSize: 指定拆分出的模块的最小大小，默认为30000字节。如果模块的大小小于该值，则不会被拆分。
- minChunks: 指定一个模块被引用的最小次数，默认为1。如果一个模块被引用的次数小于该值，则不会被拆分。
- maxAsyncRequests: 指定异步加载的模块的并行请求数量，默认为5。如果超过该数量，则不会继续拆分模块。
- maxInitialRequests: 指定同步加载的模块的并行请求数量，默认为3。如果超过该数量，则不会继续拆分模块。
- automaticNameDelimiter: 指定拆分出的模块的文件名的连接符，默认为~。
- name: 指定拆分出的模块的文件名，默认为true，即根据模块的名称和缓存组的名称生成文件名。
- cacheGroups: 配置缓存组，用于指定拆分的规则。可以配置多个缓存组，每个缓存组可以有自己的拆分规则。

在cacheGroups中配置具体的拆分规则，例如：
- vendors: 用于拆分第三方库的模块。可以通过test属性指定需要拆分的模块的路径或名称，通过priority属性指定优先级，通过enforce属性指定是否强制拆分。
- default: 用于拆分其他模块的模块。可以通过minChunks属性指定模块被引用的最小次数，通过priority属性指定优先级，通过reuseExistingChunk属性指定是否重用已经拆分出的模块。

以下是一个示例的webpack配置文件中的splitChunks配置：

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

在上述示例中，配置了两个缓存组，vendors用于拆分第三方库的模块，default用于拆分其他模块的模块。其中vendors的拆分规则是将node_modules目录下的模块拆分为一个供应商模块，而default的拆分规则是将被至少两个模块引用的模块拆分为一个供应商模块。

使用splitChunks创建多个供应商模块可以提高应用程序的加载速度和性能，因为浏览器可以缓存这些供应商模块，避免重复加载。同时，拆分成多个供应商模块还可以实现按需加载，减少初始加载的文件大小，提高用户体验。

腾讯云相关产品和产品介绍链接地址：