vite 項目切換不同依賴項的分支，運作加載緩慢問題的解決方案（Pre-bundling dependencies）

前言

當我們在首次使用

yarn dev

指令啟動

vite

時，或者 切換分支，依賴項發生變化時 會發現項目啟動時相當的慢，大概要十幾分鐘，而且控制台終端列印了如下資訊：

Pre-bundling dependencies:

this will be run only when your dependencies or config have changed

遇到這種情況時，真的是相當惡心，有時候項目啟動完成要花費半小時的時間，着實是浪費時間。

其實原因控制台已經提示的很清楚了：

warning package.json: No license field
$ vite
Pre-bundling dependencies: (正在預建構依賴)
  react
  react-dom
  antd
  react-redux
  antd/lib/locale/zh_CN
  (...and 29 more)
(this will be run only when your dependencies or config have changed)(這将隻會在你的依賴或配置發生變化時執行)

           

論學好英語的重要性！！！

知道了問題出在哪裡，就能對症下藥，問題也會很快妥善解決。

1. 原因：預建構依賴

首先，我們先了解下

vite

執行時 為什麼要進行

預建構依賴

。

1. CommonJS 和 UMD 相容性： 開發階段中， Vite 的開發伺服器将所有代碼視為 ES原生子產品。是以，Vite 必須先将作為 CommonJS 或者 UMD 釋出的依賴項轉換為 ESM.

當轉換 CommonJS 依賴時，Vite 會執行智能導入分析，這樣即使導出是動态配置設定的（比如React），按名導入也會符合預期效果。比如：

// 符合預期
import React, { useState } from 'react' 
           

1. 性能： Vite 将有許多内部子產品的 ESM 依賴關系轉換為單個子產品，以提高後續頁面加載性能。

一些包将它們的 ES 子產品建構作為許多單獨的檔案互相導入。比如：

lodash-es

有超過600個内置子產品。當我們執行

import { debounce } from lodash-es

時，浏覽器同時發出 600 多個 HTTP 請求，盡管伺服器在處理這些請求時沒有問題，但大量的請求會在浏覽器端造成網絡擁塞，導緻頁面的加在速度相當緩慢。

通過 預建構

lodash-es

成為一個子產品，我們就隻需要一個 HTTP請求即可。

注意：

依賴預建構僅會在開發模式下應用，并會使用

esbuild

将依賴轉為 ESM 子產品，在生産建構中則會使用

@rollup/plugin-commonjs

在伺服器已經啟動之後，如果遇到一個新的依賴關系導入，而這個依賴還沒有在緩存中，Vite 将重新運作依賴建構程序并重新加載頁面。 這就是為什麼不同依賴下的分支切換後，項目運作也會變的非常緩慢的原因。

更多詳細資訊，可以參考 Vite 官網

2. 解決方案

所需依賴包：

• vite-plugin-optimize-persist
• vite-plugin-package-config

使用：

npm i -D vite-plugin-optimize-persist vite-plugin-package-config
           

vite.config.ts 中進行配置：

// vite.config.ts

import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

export default defineConfig({
	plugins: [
		PkgConfig(),
        OptimizationPersist(),
	]
})
           

package.json 檔案中會自動插入配置代碼：