#splitChunks

• Type:

type SplitChunksConfig =
  | (Rspack.OptimizationSplitChunksOptions & {
      preset?: SplitChunksPreset;
    })
  | 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

The default value of splitChunks depends on output.target.

#Web

• Default: { preset: 'default', chunks: 'all' }

For web builds, Rsbuild sets chunks to 'all'. Unspecified options such as minSize and minChunks use the defaults from Rspack's optimization.splitChunks.

#Node.js

• Default:
  • With one entry: { preset: 'none', chunks: 'async', minSize: 0 }
  • With multiple entries: { preset: 'none', chunks: 'all', minSize: 0 }

For Node.js builds with one entry, Rsbuild sets chunks to 'async', allowing shared modules in async chunks to be extracted without splitting the initial entry chunk. With multiple entries, Rsbuild sets chunks to 'all', allowing shared modules used by different entry chunks to be extracted.

Rsbuild also sets minSize to 0 so that small shared modules can be extracted instead of being duplicated across chunks.

#Web worker

• Default: false

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,
};

With splitChunks: false, modules loaded with dynamic import() are still emitted as separate async chunks. To bundle these modules into existing chunks as well, also set Rspack's output.asyncChunks to false:

export default {
  splitChunks: false,
  tools: {
    rspack: {
      output: {
        asyncChunks: false,
      },
    },
  },
};

For single-entry applications, this bundles application code and dynamically imported modules into the same JavaScript chunk. Multi-entry applications still produce a separate chunk for each entry.

#Version history