English | 中文
A vite plugin for better chunk splitting.
// 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 -DThen you can use it in vite.config.ts:
// vite.config.ts
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
{
plugins: [
// ...
chunkSplitPlugin()
]
}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<string, packageInfo[]>;
export interface ChunkSplitOptions {
strategy?: Strategy;
customSplitting?: CustomSplitting;
}You can use the options to customize your splitting strategy, for example：
// 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:
// 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/]
}
})
]
}MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent