webpack的分包split-chunks 配置及策略

splitChunks 是 webpack 中用于分包的配置选项之一，它主要用于控制如何拆分代码块，以优化资源加载和减小文件体积。splitChunks 配置可以在 webpack 4.x 版本及更高版本中使用。

以下是一些常见的 splitChunks 配置示例和说明：

 

上述配置中的参数及其含义如下：

• chunks: 'all': 指定哪些块应该被优化，默认为 async，可以设置为 'all' 表示包括 initial 和 async 类型的块。

• minSize: 0: 指定拆分出的块的最小大小，如果拆分出的块小于这个值，将不会被拆分。

• minChunks: 1: 块的最小被引用次数，达到这个次数才会被拆分。

• maxAsyncRequests: 5: 按需加载时的最大并行请求数。

• maxInitialRequests: 3: 入口点处的最大并行请求数。

• automaticNameDelimiter: '~': 自动生成名称的分隔符。

• name: true: 根据拆分出的块生成的名称，如果设置为 true，将自动生成。

• cacheGroups: 配置缓存组，可以将多个模块合并到一个文件中，避免重复加载。示例中包含 vendors 缓存组，用于将第三方模块提取到一个单独的文件中。

• test: /[\\/]node_modules[\\/]/: 缓存组的规则，这里使用正则表达式匹配第三方模块。

• priority: -10: 缓存组的优先级，数字越大，优先级越高。vendors 的优先级设置为 -10，确保它优先匹配。

• reuseExistingChunk: true: 如果当前块包含已经被拆分出的模块，则将复用该模块而不是创建新的块。

• default: 默认的缓存组，用于处理非第三方模块。

上述配置是一个比较通用的设置，实际的配置可能会因项目结构和需求而有所不同。splitChunks 的目标是根据实际情况拆分代码块，以提高应用的加载性能。

实际应用中，splitChunks 的策略会根据具体的项目结构和需求而有所不同。以下是一些实际应用中常见的分包策略：

1.提取第三方库（Vendor）:

1. 将第三方库（例如React、Vue、lodash等）从应用代码中分离出来，以便充分利用浏览器的缓存机制，减小应用代码的体积。
2. 通过配置 test: /[\\/]node_modules[\\/]/ 可以将 node_modules 中的模块提取到单独的文件中。

 

 2.提取公共模块（Common）:

• 将应用中多个模块之间共享的代码提取到一个独立的文件中。
• 可以通过配置 cacheGroups 中的 default 缓存组来实现。

  3.按需加载（Async）:

  • 对于按需加载的模块，可以配置 chunks: 'async'，确保只有异步加载的模块才会被拆分出来，而不影响入口点的加载性能。

    

     4.调整最小大小（minSize）和最小引用次数（minChunks）:

    • 通过调整 minSize 和 minChunks 来控制拆分的块的大小和引用次数，以适应项目的特定情况。

      5.自定义名称（name）:

      • 配置 name 属性，可以为拆分出的块指定自定义的名称。