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: about 1 month 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 2 years ago)
• Default Branch: master
• Last Pushed: 2024-03-21T11:22:36.000Z (2 months ago)
• Last Synced: 2024-04-07T22:04:08.363Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 102 KB
• Stars: 287
• Watchers: 4
• Forks: 21
• Open Issues: 23
• Metadata Files:
  • Readme: README-CN.md
  • License: LICENSE

Lists

• 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)
• awesome-vite - vite-plugin-chunk-split - Automatically code splitting, support unbundle in production. (Plugins / Framework-agnostic Plugins)
• awesome-viter - 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)
• 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)
• awesome-stars-Sunny-117 - sanyuan0704/vite-plugin-chunk-split - A vite plugin for better chunk splitting. 一个简单易用的 Vite 拆包插件 (TypeScript)
• fuck-awesome-stars - sanyuan0704/vite-plugin-chunk-split - A vite plugin for better chunk splitting. 一个简单易用的 Vite 拆包插件 (TypeScript)

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