#Interface: ChunkSplit

Performance.chunkSplit is used to configure the chunk splitting strategy.

#Deprecated

Use the top-level Config.splitChunks option instead.

#Properties

#override?

optional override?: false | OptimizationSplitChunksOptions

Custom Rspack chunk splitting config can be specified.

#Default Value

undefined

#Example

• Split @lynx-js/react and react-router into chunk lib-react.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: 'split-by-experience',
      override: {
        cacheGroups: {
          react: {
            test: /node_modules[\\/](@lynx-js[\\/]react|react-router)[\\/]/,
            name: 'lib-react',
          },
        },
      },
    },
  },
})

#strategy?

optional strategy?: "all-in-one" | "split-by-module" | "split-by-experience" | "single-vendor"

The ChunkSplitting strategy.

#Default Value

Unset, which bundles everything into one chunk (same as 'all-in-one').

#Remarks

• split-by-experience(Rsbuild default): an empirical splitting strategy, automatically splits some commonly used npm packages into chunks of moderate size.

• split-by-module: split by NPM package granularity, each NPM package corresponds to a chunk.

• split-by-size: automatically split according to module size.

• all-in-one: bundle all codes into one chunk.

• single-vendor: bundle all NPM packages into a single chunk.

• custom: custom chunk splitting strategy.

#Examples

• Use all-in-one to put all modules in one chunk.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: 'all-in-one',
    },
  },
})

• Use single-vendor to put all third-party dependencies in one chunk. And source code in another chunk.

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: 'single-vendor',
    },
  },
})