---
url: /reference/OutputOptions.codeSplitting.md
---
# codeSplitting

* **Type**: `boolean` | object with the properties below
* **Optional**

Controls how code splitting is performed.

* `true`: Default behavior, automatic code splitting. **(default)**
* `false`: Inline all dynamic imports into a single bundle (equivalent to deprecated `inlineDynamicImports: true`).
* `object`: Advanced manual code splitting configuration.

For deeper understanding, please refer to the in-depth [documentation](/in-depth/manual-code-splitting).

:::warning

Be aware that manual code splitting can change the behavior of the application if side effects are triggered before the corresponding modules are actually used. You can change the chunking configuration to keep order-sensitive modules together, or you can use the [`output.strictExecutionOrder`](/reference/OutputOptions.strictExecutionOrder) option to preserve source execution order. The option wraps modules so their bodies run in source order, at a bundle-size cost; `experimental.onDemandWrapping` replaces wrap-all with a conservative plan derived from predicted chunk execution hazards.

:::

## Example

**Basic vendor chunk**

```js
export default defineConfig({
  output: {
    codeSplitting: {
      minSize: 20000,
      groups: [
        {
          name: 'vendor',
          test: /node_modules/,
        },
      ],
    },
  },
});
```

**Multiple chunk groups with priorities**

```js
export default defineConfig({
  output: {
    codeSplitting: {
      groups: [
        {
          name: 'react-vendor',
          test: /node_modules[\\/]react/,
          priority: 20,
        },
        {
          name: 'ui-vendor',
          test: /node_modules[\\/]antd/,
          priority: 15,
        },
        {
          name: 'vendor',
          test: /node_modules/,
          priority: 10,
        },
        {
          name: 'common',
          minShareCount: 2,
          minSize: 10000,
          priority: 5,
        },
      ],
    },
  },
});
```

**Size-based splitting**

```js
export default defineConfig({
  output: {
    codeSplitting: {
      groups: [
        {
          name: 'large-libs',
          test: /node_modules/,
          minSize: 100000, // 100KB
          maxSize: 250000, // 250KB
          priority: 10,
        },
      ],
    },
  },
});
```

## Default

```ts
true
```

## groups?

* **Type**: [`CodeSplittingGroup`](TypeAlias.CodeSplittingGroup.md)\[]
* **Optional**

Groups to be used for code splitting.

## includeDependenciesRecursively?

* **Type**: `boolean`
* **Optional**

Global fallback of [`group.includeDependenciesRecursively`](TypeAlias.CodeSplittingGroup.md#includedependenciesrecursively), if it's not specified in the group.

## maxModuleSize?

* **Type**: `number`
* **Optional**

Global fallback of [`group.maxModuleSize`](TypeAlias.CodeSplittingGroup.md#maxmodulesize), if it's not specified in the group.

## maxSize?

* **Type**: `number`
* **Optional**

Global fallback of [`group.maxSize`](TypeAlias.CodeSplittingGroup.md#maxsize), if it's not specified in the group.

## minModuleSize?

* **Type**: `number`
* **Optional**

Global fallback of [`group.minModuleSize`](TypeAlias.CodeSplittingGroup.md#minmodulesize), if it's not specified in the group.

## minShareCount?

* **Type**: `number`
* **Optional**

Global fallback of [`group.minShareCount`](TypeAlias.CodeSplittingGroup.md#minsharecount), if it's not specified in the group.

## minSize?

* **Type**: `number`
* **Optional**

Global fallback of [`group.minSize`](TypeAlias.CodeSplittingGroup.md#minsize), if it's not specified in the group.