- 类型: 
ChunkSplit 
- 默认值: 
{ strategy: 'split-by-experience' } 
performance.chunkSplit 用于配置 Rsbuild 的拆包策略。
chunkSplit.strategy
Rsbuild 支持设置以下几种拆包策略:
类型定义
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 选项来指定,比如:
rsbuild.config.ts
export default {
  performance: {
    chunkSplit: {
      strategy: 'all-in-one',
    },
  },
};
 
chunkSplit.minSize
当 chunkSplit.strategy 为 split-by-size 时,可以通过 chunkSplit.minSize 配置项来指定 chunk 的最小大小,单位为字节。默认值为 10000。比如:
rsbuild.config.ts
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。比如:
rsbuild.config.ts
export default {
  performance: {
    chunkSplit: {
      strategy: 'split-by-size',
      maxSize: 50000,
    },
  },
};
 
chunkSplit.forceSplitting
- 类型: 
RegExp[] | Record<string, RegExp> 
- 默认值: 
[] 
通过 chunkSplit.forceSplitting 配置项可以将指定的模块强制拆分为一个独立的 chunk。
比如将 node_modules 下的 axios 库拆分到 axios.js 中:
rsbuild.config.ts
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 配置也会合并)。比如:
rsbuild.config.ts
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 配置也会合并)。比如:
rsbuild.config.ts
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 选项:
rsbuild.config.ts
export default {
  tools: {
    rspack: {
      optimization: {
        splitChunks: {
          // options
        },
      },
    },
  },
};