https://github.com/sanyuan0704/vite-plugin-chunk-split
A vite plugin for better chunk splitting. 一个简单易用的 Vite 拆包插件
https://github.com/sanyuan0704/vite-plugin-chunk-split
Last synced: 12 days ago
JSON representation
A vite plugin for better chunk splitting. 一个简单易用的 Vite 拆包插件
- Host: GitHub
- URL: https://github.com/sanyuan0704/vite-plugin-chunk-split
- Owner: sanyuan0704
- License: mit
- Created: 2022-02-21T03:47:36.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-16T03:12:56.000Z (9 months ago)
- Last Synced: 2025-04-01T22:08:19.033Z (18 days ago)
- Language: TypeScript
- Homepage:
- Size: 102 KB
- Stars: 371
- Watchers: 4
- Forks: 22
- Open Issues: 27
-
Metadata Files:
- Readme: README-CN.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-chunk-split - Automatically code splitting, support unbundle in production. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-chunk-split - Automatically code splitting, support unbundle in production. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-chunk-split
[English](./README.md) | 中文
Vite 代码拆包插件。支持多种拆包策略，可避免手动操作 manualChunks 潜在的循环依赖问题。
## 基本使用
首先安装依赖:
```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
```
然后你可以在 Vite 配置文件中使用它:
```ts
// vite.config.ts
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
{
plugins: [
// ...
chunkSplitPlugin()
]
}
```
## 参数类型
```ts
type packageInfo = string | RegExp;
type Strategy =
// 默认拆包方式
| 'default'
// 所有文件打包到一起
| 'all-in-one'
// 实现不打包的效果，一个文件一个 chunk
| 'unbundle';
export type CustomSplitting = Record;
export interface ChunkSplitOptions {
strategy?: Strategy;
customSplitting?: CustomSplitting;
}
```
你也可以使用插件的配置来精细化地控制拆包策略:
```ts
// vite.config.ts
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
{
plugins: [
// ...
chunkSplitPlugin({
strategy: 'default',
customSplitting: {
// `react` and `react-dom` 会被打包到一个名为`render-vendor`的 chunk 里面(包括它们的一些依赖，如 object-assign)
'react-vendor': ['react', 'react-dom'],
// 源码中 utils 目录的代码都会打包进 `utils` 这个 chunk 中
'utils': [/src\/utils/]
}
})
]
}
```
另外，你也可以实现一键实现不打包（Bundleless），同时通过`customSplitting`参数来指定文件合并的策略:
```ts
// vite.config.ts
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
{
plugins: [
// ...
chunkSplitPlugin({
strategy: 'unbundle',
customSplitting: {
// src/container 下的所有文件会被合并成一个 chunk
'container': [/src\/container/]
}
})
]
}
```
## License
MIT