Vite 為何短短幾年內(nèi)變成這樣？
共 3393字，需瀏覽 7分鐘
·
2024-05-15 08:00
本文適合對Vite感興趣的小伙伴閱讀。
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進階～
前言
在 Web 開發(fā)領(lǐng)域，Vite 如今已如雷貫耳。
自 2020 年 4 月發(fā)布以來，Vite 的人氣蒸蒸日上。目前 Vite 在 GitHub 上的收藏數(shù)量已超過 64k，每周下載量超過 1200 萬次，現(xiàn)在為 Nuxt、Remix、Astro 等大多數(shù)開源框架提供支持。
盡管眾口囂囂，我們意識到許多開發(fā)者可能仍然不熟悉 Vite 是什么鬼物，也不熟悉 Vite 在推動現(xiàn)代 Web 框架和工具的開發(fā)中扮演的重要角色。
在本文中，我們將科普 Vite 的知識儲備，以及 Vite 如何在短短幾年后發(fā)展成為現(xiàn)代 Web 的重量級角色。
Vite 是什么鬼物
Vite 的發(fā)音為 /vit/，在法語中是“快速”或“迅捷”的意思，不得不說 Vite 名副其實。
簡而言之，Vite 是一種現(xiàn)代 JS 構(gòu)建工具，為常見 Web 模式提供開箱即用的支持和構(gòu)建優(yōu)化，兼具 rollup 的自由度和成熟度。
Vite 還與 esbuild 和原生 ES 模塊強強聯(lián)手，實現(xiàn)快速無打包開發(fā)服務(wù)器。
Vite 是由“Vue 之父”尤雨溪（Evan You）構(gòu)思出來的，旨在通過減少開發(fā)者在啟動開發(fā)服務(wù)器和處理文件編輯后重載時遭遇的性能瓶頸，簡化打包過程。
Vite 的核心特性
esbuild 來打包你的依賴并緩存，加快未來服務(wù)器的啟動速度。
lodash 等導(dǎo)出許多迷你模塊的依賴的加載時間，因為瀏覽器只加載每個依賴的代碼塊（chunk）。這還允許 Vite 在依賴中支持 CJS 和 UMD 代碼，因為它們被打包到原生 ESM 模塊中。
rollup 設(shè)置來構(gòu)建你的應(yīng)用程序。Vite 會執(zhí)行 CSS 代碼分割，添加預(yù)加載指令，并優(yōu)化異步塊的加載，無需任何配置。
rollup 兼容插件 API，適用于開發(fā)和生產(chǎn)，使你可以更輕松地擴展和自定義構(gòu)建過程。
Vite 的優(yōu)勢
開源且獨立
Vite 由開源開發(fā)者社區(qū)“用愛發(fā)電”，由來自不同背景的開發(fā)者團隊領(lǐng)導(dǎo)，Vite 核心倉庫最近貢獻者數(shù)量已突破 900 人。
Vite 得到積極的開發(fā)和維護，不斷實現(xiàn)新功能并解決錯誤。
本地敏捷開發(fā)
開發(fā)體驗是 Vite 的核心，每次點擊保存時，你都能感受到延遲。我們常常認(rèn)為重載速度是理所當(dāng)然的。
但隨著您的應(yīng)用程序增長，且重載速度逐漸停止，你將感恩 Vite 幾乎能夠保持瞬間重載，而無論應(yīng)用程序大小如何。
廣泛的生態(tài)系統(tǒng)支持
Vite 的方案人氣爆棚，大多數(shù)框架和工具都默認(rèn)使用 Vite 或擁有一流的支持。通過選擇使用 Vite 作為構(gòu)建工具，這些項目維護者可以在它們之間共享一個統(tǒng)一基建，且隨著時間的推移共同改良 Vite。
因此，它們可以花更多的時間開發(fā)用戶需要的功能，而減少重新造輪子的時間。
易于擴展
Vite 對 rollup 插件 API 的押注得到了回報。插件允許下游項目共享 Vite 核心提供的功能。
我們有很多高質(zhì)量的插件可供使用，例如 vite-plugin-pwa 和 vite-imagetools。
框架構(gòu)建難題中的重要角色
Vite 是現(xiàn)代元框架構(gòu)建的重要組成部分之一，這是一個更大的工具生態(tài)系統(tǒng)的一部分。
Volar 提供了在代碼編輯器中為 Vue、MDX 和 Astro 等自定義編程語言構(gòu)建可靠且高性能的編輯體驗所需的工具。Volar 允許框架向用戶提供懸停信息、診斷和自動補全等功能，并共享 Volar 作為為它們提供支持的通用基建。
另一個很好的例子是 Nitro，它是一個服務(wù)器工具包，用于創(chuàng)建功能齊全的 Web 服務(wù)器，開箱即用地支持每個主要部署平臺。Nitro 是一個與框架無關(guān)的庫 UnJS 的奇妙集合的一部分。
Vite 的未來
在最近的 ViteConf 大會的演講中，尤雨溪表示，雖然 Vite 取得了巨大進展，但仍面臨一些已知的問題和挑戰(zhàn)。
Vite 目前使用 rollup 進行生產(chǎn)構(gòu)建，這比 esbuild 或 Bun 等原生打包器慢得多。
Vite 還盡可能減少開發(fā)和生產(chǎn)環(huán)境之間的不一致性，但考慮到 rollup 和 esbuild 之間的差異，某些不一致性無法避免。
尤雨溪現(xiàn)在領(lǐng)導(dǎo)一個新團隊開發(fā) rolldown，這是一個基于 Rust 的 rollup 移植，在 “JS 氧化編譯器 OXC”之上構(gòu)建了最大的兼容性。
這個主意是用 rolldown 替代 Vite 中的 rollup 和 esbuild。Vite 將擁有一個單獨基建，兼具 rollup 的自由度和 esbuild 的速度，消除不一致性，使代碼庫更易于維護，并加快構(gòu)建時間。
rolldown 目前處于早期階段，但已經(jīng)顯示出有希望的結(jié)果。rolldown 現(xiàn)已開源，rolldown 團隊正在尋找貢獻者來輔助實現(xiàn)這一愿景。
與此同時，Vite 團隊在每個版本中不斷改良 Vite。這項工作從上游的為 Vitest 和 Nuxt Dev SSR 提供動力的引擎 vite-node 開始，現(xiàn)已發(fā)展成為框架作者對 Vite API 的完整修訂版。
新版 Environment API 預(yù)計在 Vite 6 中發(fā)布，這將是自 Vite 2 發(fā)布以來 Vite 最大的變化之一。這將允許在任意數(shù)量的環(huán)境中通過 Vite 插件管道運行代碼，解鎖對 worker、RSC 等的一流支持。
Vite 正在開辟一條前進的道路，并迅速成為 JS 生態(tài)系統(tǒng)事實上的構(gòu)建工具。
參考文獻
最后
關(guān)注我，一起攜手進階
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進階～