#splitChunks

• Type:

type SplitChunksConfig =
  | (Rspack.OptimizationSplitChunksOptions & {
      preset?: SplitChunksPreset;
    })
  | false;

• Default: depends on output.target:
  • When output.target is 'web', the default is { preset: 'default', chunks: 'all' }
  • When output.target is 'node', the default is { preset: 'none', chunks: 'all' }
  • When output.target is 'web-worker', the default is false
• Version: >= 2.0.0

splitChunks is used to configure Rsbuild's chunk splitting strategy.

It is built on top of Rspack's optimization.splitChunks and extends it with an additional preset option, which provides several Rsbuild-specific presets for common use cases.

#Default behavior

When output.target is 'web' or 'node', Rsbuild enables chunk splitting by default and sets chunks to 'all'. This allows eligible modules in both initial and async chunks to be extracted into separate chunks, helping reduce duplicated code across output chunks.

Apart from chunks and the splitting rules provided by the selected preset or Rsbuild plugins, unspecified options such as minSize and minChunks use the defaults from Rspack's optimization.splitChunks.

Because Web Worker outputs do not support dynamic imports, Rsbuild disables chunk splitting by default when output.target is 'web-worker'.

#splitChunks.preset

• Type: 'default' | 'per-package' | 'single-vendor' | 'none' | undefined
• Default: 'default' when output.target is 'web', 'none' otherwise

preset is used to enable the built-in presets in Rsbuild to simplify common chunk splitting scenarios.

#default

The default splitting strategy in Rsbuild, with the following rules:

• When output.polyfill is enabled, polyfill code is automatically split into lib-polyfill.js
• When the React plugin is used, React-related packages are automatically split into separate chunks. See React plugin - splitChunks
• When the Vue plugin is used, Vue-related packages are automatically split into separate chunks. See Vue plugin - splitChunks

export default {
  splitChunks: {
    preset: 'default',
  },
};

#per-package

per-package splits dependencies in node_modules by npm package. Each package is bundled into its own chunk, with names like npm-react.js or npm-babel_runtime.js.

export default {
  splitChunks: {
    preset: 'per-package',
  },
};

#single-vendor

single-vendor merges all third-party dependencies in node_modules into a single vendor chunk.

export default {
  splitChunks: {
    preset: 'single-vendor',
  },
};

#none

none disables Rsbuild's built-in preset rules. This is useful when you want to rely on Rspack defaults or only use your custom options.

export default {
  splitChunks: {
    preset: 'none',
  },
};

#Other options

Apart from the preset option, all other options behave the same as in Rspack. For detailed usage, see the Rspack documentation.

export default {
  splitChunks: {
    // Rsbuild-specific option
    preset: 'default',
    // Rspack options
    chunks: 'all',
    minSize: 20 * 1024,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        priority: -10,
      },
    },
  },
};

#Disable chunk splitting

To disable chunk splitting, set splitChunks to false:

export default {
  splitChunks: false,
};

#Version history