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'策略，可以將每個模塊拆分成單獨的塊，方便調試和定位問題。
注意事項
- 不同的分塊策略和配置選項可能會對打包后的文件結構和加載性能產生不同的影響，需要根據項目的實際情況進行調整。
- 在使用自定義分塊規則時，要確保規則的準確性，避免出現意外的分塊結果。
