Object
{ strategy: 'split-by-experience' }
performance.chunkSplit
用于配置 Rsbuild 的拆包策略。配置项的类型 ChunkSplit
如下:
Rsbuild 支持设置以下几种拆包策略:
split-by-experience
: 根据经验制定的拆分策略,自动将一些常用的 npm 包拆分为体积适中的 chunk。split-by-module
: 按 NPM 包的粒度拆分,每个 NPM 包对应一个 chunk。split-by-size
:根据模块大小自动进行拆分。all-in-one
: 将所有代码全部打包到一个 chunk 中。single-vendor
: 将所有 NPM 包的代码打包到一个单独的 chunk 中。custom
: 自定义拆包配置。Rsbuild 默认采用 split-by-experience
策略,如果你想使用其他拆包策略,可以通过 strategy
选项来指定,比如:
请参考 拆包最佳实践 章节来了解不同策略之间的差异。
number
10000
当 performance.chunkSplit.strategy
为 split-by-size
时,可以通过 performance.chunkSplit.minSize
配置项来指定 chunk 的最小大小,单位为字节。默认值为 10000。比如:
number
Number.POSITIVE_INFINITY
当 performance.chunkSplit.strategy
为 split-by-size
时,可以通过 performance.chunkSplit.maxSize
配置项来指定 chunk 的最大大小,单位为字节。默认值为 Number.POSITIVE_INFINITY
。比如:
RegExp[] | Record<string, RegExp>
[]
通过 performance.chunkSplit.forceSplitting
配置项可以将指定的模块强制拆分为一个独立的 chunk。
比如将 node_modules 下的 axios
库拆分到 axios.js
中:
相比直接配置 Rspack 的 splitChunks,这是一个更加简便的方式。
注意,通过 forceSplitting
配置拆分的 chunk 会通过 <script>
标签插入到 HTML 文件中,作为首屏请求的资源。因此,请根据实际场景来进行适当地拆分,避免首屏资源体积过大。
当 performance.chunkSplit.strategy
为 custom
时,可以通过 performance.chunkSplit.splitChunks
配置项来指定自定义的 Rspack 拆包配置。此配置会和 Rspack 的 splitChunks 配置进行合并(cacheGroups 配置也会合并)。比如:
当 performance.chunkSplit.strategy
为 split-by-experience
、split-by-module
、split-by-size
或 single-vendor
时,可以通过 performance.chunkSplit.override
配置项来自定义 Rspack 拆包配置,此配置会和 Rspack 的 splitChunks 配置进行合并(cacheGroups 配置也会合并)。比如:
performance.chunkSplit
仅在 output.target 为 web
时生效。这意味着,当 output.target
为 node
或 web-worker
时,performance.chunkSplit
配置项不会生效。
通常 Node bundles 不需要通过 split chunks 来优化加载性能,如果你需要对 Node bundles 进行拆包,可以使用 tools.rspack 来配置 Rspack 的 optimization.splitChunks 选项: