# vite-plugin-chunk-split

> A vite plugin for better chunk split

Latest version **0.5.0** (published 2023-11-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-chunk-split
pnpm add vite-plugin-chunk-split
yarn add vite-plugin-chunk-split
bun add vite-plugin-chunk-split
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2023-11-16 |
| First published | 2022-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 19.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sanyuan0704 |
| Maintainers | sanyuan0704 |
| Keywords | vite, code-splitting |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-chunk-split
- Repository: https://github.com/sanyuan0704/vite-plugin-chunk-split
- Homepage: https://github.com/sanyuan0704/vite-plugin-chunk-split#readme
- Issues: https://github.com/sanyuan0704/vite-plugin-chunk-split/issues
- npm.io page: https://npm.io/package/vite-plugin-chunk-split

## Dependencies (3)

- [magic-string](https://npm.io/package/magic-string.md) ^0.30.5
- [es-module-lexer](https://npm.io/package/es-module-lexer.md) ^1.4.1
- [import-meta-resolve](https://npm.io/package/import-meta-resolve.md) ^4.0.0

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 0.5.0 (latest) — 2023-11-16
- 0.4.7 — 2022-12-12
- 0.4.6 — 2022-12-07
- 0.4.5 — 2022-12-07
- 0.4.4 — 2022-11-21
- 0.4.3 — 2022-10-28
- 0.4.2 — 2022-10-28
- 0.4.1 — 2022-10-08
- 0.4.0 — 2022-09-15
- 0.3.0 — 2022-09-06
- 0.2.7 — 2022-08-04
- 0.2.6 — 2022-08-04
- 0.2.5 — 2022-07-25
- 0.2.4 — 2022-06-18
- 0.2.3 — 2022-06-18
- … 5 more at https://npm.io/package/vite-plugin-chunk-split/versions

## README

# vite-plugin-chunk-split

English | [中文](./README-CN.md)

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<string, packageInfo[]>;

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

---
_Source: https://npm.io/package/vite-plugin-chunk-split · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._