vite-plugin-chunk-split

English | 中文

A vite plugin for better chunk splitting.

Usage

``js
// use npm
npm i vite-plugin-chunk-split -D
// use yarn
yarn add vite-plugin-chunk-split -D
// use pnpm
pnpm i vite-plugin-chunk-split -D
`

Then you can use it in vite.config.ts:
`ts
// vite.config.ts
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';

{
plugins: [
// ...
chunkSplitPlugin()
]
}
`

Options


`ts
type packageInfo = string | RegExp;
type Strategy =
// split by default
| 'default'
// all files will be together
| 'all-in-one'
// unbundle for your source files，vite will generate one chunk for every file
| 'unbundle';

export type CustomSplitting = Record;

export interface ChunkSplitOptions {
strategy?: Strategy;
customSplitting?: CustomSplitting;
}
`
You can use the options to customize your splitting strategy, for example：
`ts
// vite.config.ts
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';

{
plugins: [
// ...
chunkSplitPlugin({
strategy: 'single-vendor',
customChunk: (args)=>{
// files into pages directory is export in single files
let { file, id, moduleId, root } = args;
if(file.startsWith('src/pages/')){
file = file.substring(4);
file = file.replace(/\.[^.$]+$/, '');
return file;
}
return null;
}
customSplitting: {
// react and react-dom will be bundled together in the react-vendor chunk (with their dependencies, such as object-assign)
'react-vendor': ['react', 'react-dom'],
// Any file that includes utils in src dir will be bundled in the utils chunk
'utils': [/src\/utils/]
}
})
]
}
`

By the way, you can achieve bundleless by the unbundle strategy:
`ts
// vite.config.ts
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';

{
plugins: [
// ...
chunkSplitPlugin({
strategy: 'unbundle',
customSplitting: {
// All files in src/container will be merged together in container chunk
'container': [/src\/container/]
}
})
]
}
``

License

MIT