Vite 4.3 正式釋出-今日必看

Vite 4.3 正式釋出

來源：焦糖老乾媽釋出時間：2023-04-24 15:01

大家好，我是Echa。

好訊息，2023年4月20號Vite 官方團隊公佈 Vite 4.3 正式釋出。間隔上一次釋出 Vite 4.2 版本（2023年03月16號），相隔35天。可見 Vite 研發團隊成員多麼給力，小編也是一路看著Vite 小不點，一步一步茁壯成長的，發展到現在真心不輕易。 Vite 做到可以跟 react 老大哥扳手腕了。具體請見這篇：React團隊建議：Create React App 替換成 Vite。該文章當時在react 社群轟動圈內人士。Vite 現在的成就和地位，那當然也離不開 Vite 研發團隊每一位成員都付出，另外也離不開尤雨溪的全方位指導。

在這個Vite 4.3 版本中，Vite 團隊專注於改進 devServer 的機能。簡化了解析邏輯，優化了熱路徑，並對查詢 package.json、TS 配置檔案和一般解析 URL 實現了更智慧的快取。與 Vite 4.2 比擬，速度得到了全面晉升！

而且在當時 Best of JS正式宣佈前端構建工具中排名榜首。

全文大綱

Vite 先容Vite 4.3 機能測試概述Vite 4.3 測試結果Vite 4.3 機能晉升總結為什麼 Vite 4.3 這麼快？下一步計劃

Vite 先容

官網：https://vitejs.dev/

Github：https://github.com/vitejs/vite

借用官方的原話：vite是下一代前端開發與構建工具。是一種新型前端構建工具，能夠明顯晉升前端開發體驗。它主要由兩部門組成：

dev server：利用瀏覽器的ESM能力來提供原始檔，具有豐碩的內建功能並具有高效的HMR出產構建：出產環境利用Rollup來構建程式碼，提供指令用來最佳化構建過程

Vite作為一個基於瀏覽器原生ESM的構建工具，它省略了開發環境的打包過程，利用瀏覽器去解析imports，在服務端按需編譯返回。同時，在開發環境擁有速度快到驚人的模組熱更新，且熱更新的速度不會跟著模組增多而變慢。因此，使用Vite進行開發，至少會比Webpack快10倍左右。

Vite的主要特性

Instant Server Start —— 即時服務啟動Lightning Fast HMR —— 閃電般快速的熱更新Rich Features —— 豐碩的功能Optimized Build —— 經由最佳化的構建Universal Plugin Interface —— 通用的Plugin介面Fully Typed APIs —— 型別齊全的API

如下圖：

Vite 4.3 機能測試概述

最近，Vite 團隊核心成員“翠”在社交平臺表示，他在 Windows 機器上對 Vite 4.3 進行了基準測試，其初始載入速度有了大幅晉升！其中，Vite 4.3 的冷啟動時間快了 3 倍，熱啟動時間也快了 1.3 倍。另外，在使用 SWC 外掛時，Vite 4.3 的冷啟動時間比 turbopack 快 1.5 秒。

在開始之前，先來先容三個相關概念：

啟動時間：從“執行命令”到“在瀏覽器中觸發 load 事件”的時間。根 HMR 時間：從“根檔案被更改”到“該檔案在瀏覽器中執行”的時間。葉子 HMR 時間：從“葉子檔案被改變”到“該檔案在瀏覽器中執行”的時間。

接下來就看看 Vite 4.3 相較於上一個版本在速度上都有哪些晉升！

測試概述

終極得到的結論如下：

Vite(plugin-react) 的啟動時間只比 turbopack 慢 0.2s（冷啟動）Vite(plugin-react) 的啟動時間比 turbopack 快 0.2s（熱啟動）Vite(plugin-react-swc) 的啟動時間比 turbopack 快 1.5s（冷啟動）Vite(plugin-react-swc) 的啟動時間比 turbopack 快 1.8s（熱啟動）Vite 的葉 HMR 時間比 turbopack 快Vite 的根 HMR 時間比 turbopack 慢 5-10msrspack 的啟動時間是 Vite 的一半，但 HMR 的啟動時間是 Vite 的 10 倍

進行本測試的機器規格和其他資訊：

執行時：Node.js 18.15.0中央處理器：銳龍 9 5900X記憶體：DDR4-3600 32GB固態硬碟：WD Black SN750 NVME SSD

Vite 4.3 測試結果

對 Vite 4.3 和 Vite 4.2.1 的啟動時間分別進行測試：

Vite 4.2.1 + plugin-react 3.1.0 / plugin-react-swc 3.2.0