close
指南
配置
插件
API
社区

performance.chunkSplit

  • 类型： ChunkSplit
  • 默认值： { strategy: 'split-by-experience' }

performance.chunkSplit 用于配置 Rsbuild 的拆包策略。

TIP

请参考 代码拆分 来了解完整的用法。

chunkSplit.strategy

Rsbuild 支持设置以下几种拆包策略：

  • split-by-experience: 根据经验制定的拆分策略，自动将一些常用的 npm 包拆分为体积适中的 chunk。
  • split-by-module: 按 NPM 包的粒度拆分，每个 NPM 包对应一个 chunk。
  • split-by-size：根据模块大小自动进行拆分。
  • all-in-one: 将所有代码全部打包到一个 chunk 中。
  • single-vendor: 将所有 NPM 包的代码打包到一个单独的 chunk 中。
  • custom: 自定义拆包配置。

类型定义

performance.chunkSplit 的类型定义如下:

type ForceSplitting = RegExp[] | Record<string, RegExp>;  interface BaseChunkSplit {  strategy?:  | 'split-by-module'  | 'split-by-experience'  | 'all-in-one'  | 'single-vendor';  override?: Rspack.OptimizationSplitChunksOptions;  forceSplitting?: ForceSplitting; }  interface SplitBySize extends BaseSplitRules {  strategy: 'split-by-size';  minSize?: number;  maxSize?: number; }  interface SplitCustom extends BaseSplitRules {  strategy: 'custom';  splitChunks?: SplitChunks; }  type ChunkSplit = BaseChunkSplit | SplitBySize | SplitCustom;

默认策略

Rsbuild 默认采用 split-by-experience 策略，如果你想使用其他拆包策略，可以通过 strategy 选项来指定，比如：

export default {  performance: {  chunkSplit: {  strategy: 'all-in-one',  },  }, };

chunkSplit.minSize

  • 类型： number
  • 默认值： 10000

当 chunkSplit.strategy 为 split-by-size 时，可以通过 chunkSplit.minSize 配置项来指定 chunk 的最小大小，单位为字节。默认值为 10000。比如:

export default {  performance: {  chunkSplit: {  strategy: 'split-by-size',  minSize: 20000,  },  }, };

chunkSplit.maxSize

  • 类型： number
  • 默认值： Number.POSITIVE_INFINITY

当 chunkSplit.strategy 为 split-by-size 时，可以通过 chunkSplit.maxSize 配置项来指定 chunk 的最大大小，单位为字节。默认值为 Number.POSITIVE_INFINITY。比如:

export default {  performance: {  chunkSplit: {  strategy: 'split-by-size',  maxSize: 50000,  },  }, };

chunkSplit.forceSplitting

  • 类型： RegExp[] | Record<string, RegExp>
  • 默认值： []

通过 chunkSplit.forceSplitting 配置项可以将指定的模块强制拆分为一个独立的 chunk。

比如将 node_modules 下的 axios 库拆分到 axios.js 中：

export default {  performance: {  chunkSplit: {  forceSplitting: {  axios: /node_modules[\\/]axios/,  },  },  }, };

相比直接配置 Rspack 的 splitChunks，这是一个更加简便的方式。

TIP

注意，通过 forceSplitting 配置拆分的 chunk 会通过 <script> 标签插入到 HTML 文件中，作为首屏请求的资源。因此，请根据实际场景来进行适当地拆分，避免首屏资源体积过大。

chunkSplit.splitChunks

当 chunkSplit.strategy 为 custom 时，可以通过 chunkSplit.splitChunks 配置项来指定自定义的 Rspack 拆包配置。此配置会和 Rspack 的 splitChunks 配置进行合并（cacheGroups 配置也会合并）。比如:

export default {  performance: {  chunkSplit: {  strategy: 'custom',  splitChunks: {  cacheGroups: {  react: {  test: /node_modules[\\/](react|react-dom)[\\/]/,  name: 'react',  chunks: 'all',  },  },  },  },  }, };

chunkSplit.override

当 chunkSplit.strategy 为 split-by-experience、split-by-module、split-by-size 或 single-vendor 时，可以通过 chunkSplit.override 配置项来自定义 Rspack 拆包配置，此配置会和 Rspack 的 splitChunks 配置进行合并（cacheGroups 配置也会合并）。比如:

export default {  performance: {  chunkSplit: {  override: {  cacheGroups: {  react: {  test: /node_modules[\\/](react|react-dom)[\\/]/,  name: 'react',  chunks: 'all',  },  },  },  },  }, };

产物类型

performance.chunkSplit 仅在 output.target 为 web 时生效。这意味着，当 output.target 为 node 或 web-worker 时，performance.chunkSplit 配置项不会生效。

通常 Node bundles 不需要通过 split chunks 来优化加载性能，如果你需要对 Node bundles 进行拆包，可以使用 tools.rspack 来配置 Rspack 的 optimization.splitChunks 选项：

export default {  tools: {  rspack: {  optimization: {  splitChunks: {  // options  },  },  },  }, };