00. 觀前須知

在 Web 開發(fā)領(lǐng)域，Vite 如今已如雷貫耳。

自 2020 年 4 月發(fā)布以來，Vite 的人氣蒸蒸日上。目前 Vite 在 GitHub 上的收藏?cái)?shù)量已超過 64k，每周下載量超過 1200 萬次，現(xiàn)在為 Nuxt、Remix、Astro 等大多數(shù)開源框架提供支持。

盡管眾口囂囂，我們意識到許多開發(fā)者可能仍然不熟悉 Vite 是什么鬼物，也不熟悉 Vite 在推動現(xiàn)代 Web 框架和工具的開發(fā)中扮演的重要角色。

在本文中，我們將科普 Vite 的知識儲備，以及 Vite 如何在短短幾年后發(fā)展成為現(xiàn)代 Web 的重量級角色。

01. Vite 是什么鬼物？

Vite 的發(fā)音為 /vit/，在法語中是“快速”或“迅捷”的意思，不得不說 Vite 名副其實(shí)。

簡而言之，Vite 是一種現(xiàn)代 JS 構(gòu)建工具，為常見 Web 模式提供開箱即用的支持和構(gòu)建優(yōu)化，兼具 rollup 的自由度和成熟度。

Vite 還與 esbuild 和原生 ES 模塊強(qiáng)強(qiáng)聯(lián)手，實(shí)現(xiàn)快速無打包開發(fā)服務(wù)器。

Vite 是由“Vue 之父”尤雨溪（Evan You）構(gòu)思出來的，旨在通過減少開發(fā)者在啟動開發(fā)服務(wù)器和處理文件編輯后重載時遭遇的性能瓶頸，簡化打包過程。

02. Vite 的核心特性

運(yùn)行 Vite 時，你會注意到的第一個區(qū)別在于，開發(fā)服務(wù)器會即時啟動。

這是因?yàn)椋琕ite 采用按需方法將你的應(yīng)用程序提供給瀏覽器。Vite 不會首先打包整個源碼，而是響應(yīng)瀏覽器請求，將你編寫的模塊即時轉(zhuǎn)換為瀏覽器可以理解的原生 ESM 模塊。

Vite 為 TS、PostCSS、CSS 預(yù)處理器等提供開箱即用的支持，且可以通過不斷增長的插件生態(tài)系統(tǒng)進(jìn)行擴(kuò)展，支持所有你喜歡的框架和工具。

每當(dāng)你在開發(fā)期間更改項(xiàng)目中的任意文件時，Vite 都會使用應(yīng)用程序的模塊圖，只熱重載受影響的模塊（HMR）。這允許開發(fā)者預(yù)覽他們的更改，及其對應(yīng)用程序的影響。

Vite 的 HMR 速度驚人，可以讓編輯器自動保存，并獲得類似于在瀏覽器開發(fā)工具中修改 CSS 時的反饋循環(huán)。

Vite 還執(zhí)行 依賴預(yù)構(gòu)建（dependency pre-bundling）。在開發(fā)過程中，Vite 使用 esbuild 來打包你的依賴并緩存，加快未來服務(wù)器的啟動速度。

此優(yōu)化步驟還有助于加快 lodash 等導(dǎo)出許多迷你模塊的依賴的加載時間，因?yàn)闉g覽器只加載每個依賴的代碼塊（chunk）。這還允許 Vite 在依賴中支持 CJS 和 UMD 代碼，因?yàn)樗鼈儽淮虬皆?ESM 模塊中。

當(dāng)你準(zhǔn)備好部署時，Vite 將使用優(yōu)化的 rollup 設(shè)置來構(gòu)建你的應(yīng)用程序。Vite 會執(zhí)行 CSS 代碼分割，添加預(yù)加載指令，并優(yōu)化異步塊的加載，無需任何配置。

Vite 提供了一個通用的 rollup 兼容插件 API，適用于開發(fā)和生產(chǎn)，使你可以更輕松地?cái)U(kuò)展和自定義構(gòu)建過程。

03. Vite 的優(yōu)勢

使用 Vite 有若干主要優(yōu)勢，包括但不限于：

03-1. 開源且獨(dú)立

Vite 由開源開發(fā)者社區(qū)“用愛發(fā)電”，由來自不同背景的開發(fā)者團(tuán)隊(duì)領(lǐng)導(dǎo)，Vite 核心倉庫最近貢獻(xiàn)者數(shù)量已突破 900 人。

Vite 得到積極的開發(fā)和維護(hù)，不斷實(shí)現(xiàn)新功能并解決錯誤。

03-2. 本地敏捷開發(fā)

開發(fā)體驗(yàn)是 Vite 的核心，每次點(diǎn)擊保存時，你都能感受到延遲。我們常常認(rèn)為重載速度是理所當(dāng)然的。

但隨著您的應(yīng)用程序增長，且重載速度逐漸停止，你將感恩 Vite 幾乎能夠保持瞬間重載，而無論應(yīng)用程序大小如何。

03-3. 廣泛的生態(tài)系統(tǒng)支持

Vite 的方案人氣爆棚，大多數(shù)框架和工具都默認(rèn)使用 Vite 或擁有一流的支持。通過選擇使用 Vite 作為構(gòu)建工具，這些項(xiàng)目維護(hù)者可以在它們之間共享一個統(tǒng)一基建，且隨著時間的推移共同改良 Vite。

因此，它們可以花更多的時間開發(fā)用戶需要的功能，而減少重新造輪子的時間。

03-4. 易于擴(kuò)展

Vite 對 rollup 插件 API 的押注得到了回報(bào)。插件允許下游項(xiàng)目共享 Vite 核心提供的功能。

我們有很多高質(zhì)量的插件可供使用，例如 vite-plugin-pwa 和 vite-imagetools。

03-5. 框架構(gòu)建難題中的重要角色

Vite 是現(xiàn)代元框架構(gòu)建的重要組成部分之一，這是一個更大的工具生態(tài)系統(tǒng)的一部分。

Volar 提供了在代碼編輯器中為 Vue、MDX 和 Astro 等自定義編程語言構(gòu)建可靠且高性能的編輯體驗(yàn)所需的工具。Volar 允許框架向用戶提供懸停信息、診斷和自動補(bǔ)全等功能，并共享 Volar 作為為它們提供支持的通用基建。

另一個很好的例子是 Nitro，它是一個服務(wù)器工具包，用于創(chuàng)建功能齊全的 Web 服務(wù)器，開箱即用地支持每個主要部署平臺。Nitro 是一個與框架無關(guān)的庫 UnJS 的奇妙集合的一部分。

04. Vite 的未來

在最近的 ViteConf 大會的演講中，尤雨溪表示，雖然 Vite 取得了巨大進(jìn)展，但仍面臨一些已知的問題和挑戰(zhàn)。

Vite 目前使用 rollup 進(jìn)行生產(chǎn)構(gòu)建，這比 esbuild 或 Bun 等原生打包器慢得多。

Vite 還盡可能減少開發(fā)和生產(chǎn)環(huán)境之間的不一致性，但考慮到 rollup 和 esbuild 之間的差異，某些不一致性無法避免。

尤雨溪現(xiàn)在領(lǐng)導(dǎo)一個新團(tuán)隊(duì)開發(fā) rolldown，這是一個基于 Rust 的 rollup 移植，在 “JS 氧化編譯器 OXC”之上構(gòu)建了最大的兼容性。

這個主意是用 rolldown 替代 Vite 中的 rollup 和 esbuild。Vite 將擁有一個單獨(dú)基建，兼具 rollup 的自由度和 esbuild 的速度，消除不一致性，使代碼庫更易于維護(hù)，并加快構(gòu)建時間。

rolldown 目前處于早期階段，但已經(jīng)顯示出有希望的結(jié)果。rolldown 現(xiàn)已開源，rolldown 團(tuán)隊(duì)正在尋找貢獻(xiàn)者來輔助實(shí)現(xiàn)這一愿景。

與此同時，Vite 團(tuán)隊(duì)在每個版本中不斷改良 Vite。這項(xiàng)工作從上游的為 Vitest 和 Nuxt Dev SSR 提供動力的引擎 vite-node 開始，現(xiàn)已發(fā)展成為框架作者對 Vite API 的完整修訂版。

新版 Environment API 預(yù)計(jì)在 Vite 6 中發(fā)布，這將是自 Vite 2 發(fā)布以來 Vite 最大的變化之一。這將允許在任意數(shù)量的環(huán)境中通過 Vite 插件管道運(yùn)行代碼，解鎖對 worker、RSC 等的一流支持。

Vite 正在開辟一條前進(jìn)的道路，并迅速成為 JS 生態(tài)系統(tǒng)事實(shí)上的構(gòu)建工具。

參考文獻(xiàn)

1. Vite：https://vitejs.dev
2. Blog：https://blog.stackblitz.com/posts/what-is-vite-introduction
3. Rolldown：https://rolldown.rs