vite-plugin-chunk-split 是一个 Vite 插件，用于对打包后的代码进行更细粒度的分块控制，有助于优化项目的加载性能。以下为你详细介绍它的用法：

安装

首先，你需要在项目中安装该插件。可以使用 npm 或者 yarn 进行安装：

# 使用 npm 安装
npm install vite-plugin-chunk-split --save-dev

# 使用 yarn 安装
yarn add vite-plugin-chunk-split --dev

基本配置

在 Vite 项目的 vite.config.js 或 vite.config.ts 文件中引入并使用该插件。以下是一个基本的配置示例：

vite.config.ts 示例

import { defineConfig } from 'vite';
import chunkSplitPlugin from 'vite-plugin-chunk-split';

export default defineConfig({
  plugins: [
    chunkSplitPlugin({
      // 配置项
    })
  ]
});

配置选项

1. strategy（分块策略）

strategy 选项用于指定代码分块的策略，支持以下几种策略：

• 'default'：Vite 的默认分块策略。
• 'unbundle'：将每个导入的模块都拆分成单独的块，适合开发环境下的调试。
• 'single-vendor'：将所有第三方库合并到一个单独的 vendor 块中。
• 'multi-vendor'：将第三方库按照包名进行拆分，每个包生成一个单独的块。

示例

import { defineConfig } from 'vite';
import chunkSplitPlugin from 'vite-plugin-chunk-split';

export default defineConfig({
  plugins: [
    chunkSplitPlugin({
      strategy: 'multi-vendor'
    })
  ]
});

2. customSplitting（自定义分块规则）

customSplitting 选项允许你定义自定义的分块规则，通过一个对象来指定哪些模块应该被分到哪些块中。

示例

import { defineConfig } from 'vite';
import chunkSplitPlugin from 'vite-plugin-chunk-split';

export default defineConfig({
  plugins: [
    chunkSplitPlugin({
      customSplitting: {
        // 将所有以 '@utils' 开头的模块分到 'utils' 块中
        'utils': [/^@utils/],
        // 将 'lodash' 和 'axios' 分到 'vendor-libraries' 块中
        'vendor-libraries': ['lodash', 'axios']
      }
    })
  ]
});

3. maxSize（最大块大小）

maxSize 选项用于限制每个块的最大大小（单位为字节），当块的大小超过该值时，插件会尝试进一步拆分该块。

示例

import { defineConfig } from 'vite';
import chunkSplitPlugin from 'vite-plugin-chunk-split';

export default defineConfig({
  plugins: [
    chunkSplitPlugin({
      maxSize: 200000 // 限制每个块的最大大小为 200KB
    })
  ]
});

使用场景

• 优化加载性能：通过合理的分块策略和自定义分块规则，可以将不经常变化的第三方库和业务代码分离，利用浏览器的缓存机制，减少用户后续访问时的加载时间。
• 调试开发：在开发环境中使用 'unbundle' 策略，可以将每个模块拆分成单独的块，方便调试和定位问题。

注意事项

• 不同的分块策略和配置选项可能会对打包后的文件结构和加载性能产生不同的影响，需要根据项目的实际情况进行调整。
• 在使用自定义分块规则时，要确保规则的准确性，避免出现意外的分块结果。