> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# splitChunks

- **Type:**

```ts
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](https://rspack.rs/plugins/split-chunks-plugin) 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](/config/output/target.md).

### 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`](https://rspack.rs/plugins/split-chunks-plugin).

:::tip
When a project acts as a Module Federation provider and configures [`moduleFederation.options.exposes`](/config/module-federation/options.md), Rsbuild sets `chunks` to `'async'` to prevent chunk splitting from affecting the remote entry.
:::

### 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`

When [output.target](/config/output/target.md) is `'web-worker'`, chunk splitting is disabled by default. Modules referenced by `import()` are included in the bundle without generating separate async chunks.

You can manually extract shared chunks for workers using `splitChunks`.

## 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](/config/output/polyfill.md) 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](/plugins/list/plugin-react.md#splitchunks)
- When the Vue plugin is used, Vue-related packages are automatically split into separate chunks. See [Vue plugin - splitChunks](/plugins/list/plugin-vue.md#splitchunks)

```ts title="rsbuild.config.ts"
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`.

```ts title="rsbuild.config.ts"
export default {
  splitChunks: {
    preset: 'per-package',
  },
};
```

### single-vendor

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

```ts title="rsbuild.config.ts"
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.

```ts title="rsbuild.config.ts"
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](https://rspack.rs/plugins/split-chunks-plugin).

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

:::tip
Rsbuild first converts the preset rules into a configuration object, then merges it with the `splitChunks` options you provide. The user-defined `splitChunks` configuration takes higher priority.
:::

## Disable chunk splitting

To disable chunk splitting, set `splitChunks` to `false`:

```ts title="rsbuild.config.ts"
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](https://rspack.rs/config/output#outputasyncchunks) to `false`:

```ts title="rsbuild.config.ts"
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.

When `output.target` is `'web-worker'`, no async chunks are generated by default, so no additional configuration is needed.

## Version history

| Version | Changes                                                                         |
| ------- | ------------------------------------------------------------------------------- |
| v2.2.0  | Enabled chunk splitting by default for Node.js builds and set `minSize` to `0`. |