@yicode-helper/yite-chunk NPM

vite-plugin-chunk-split

English | 中文

A vite plugin for better chunk splitting.

Usage

// 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:

// vite.config.ts
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';

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

Options

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/]
            }
        })
    ];
}