尤雨溪：Vite 和 JavaScript 工具的未來！

作者：前端充電寶 2024-10-09 14:07:05

全捆綁模式仍處于早期原型階段，但其性能表現(xiàn)非常值得期待。與多個(gè)未捆綁模塊的基準(zhǔn)測試相比，全捆綁模式下的頁面加載速度提高了5倍以上，熱模塊替換（HMR）也幾乎達(dá)到了即時(shí)響應(yīng)。

在 10 月 3 日舉行的 ViteConf 大會上，Vue、Vite 的作者尤雨溪發(fā)表了題為《Vite與JavaScript工具的未來》的演講。本文將對此次演講進(jìn)行簡要總結(jié)，帶您一窺 Vite 及 JavaScript 工具的未來趨勢！

Vite 和 Vitest 當(dāng)前狀態(tài)

npm 下載量

Vite：周下載量超過 1500 萬次，相比去年同期已經(jīng)翻倍了。
Vitest：周下載量超過 600 萬次，正在迅速取代 Jest 成為首選的JavaScript 測試運(yùn)行器。

State of JS 調(diào)查結(jié)果

Vite 和 Vitest 在幾乎所有適用類別中都名列前茅：

相關(guān)閱讀：State of JS 調(diào)查結(jié)果簡析

生態(tài)系統(tǒng)

Vite 擁有一個(gè)廣泛而強(qiáng)大的生態(tài)系統(tǒng)，現(xiàn)已成為構(gòu)建單頁應(yīng)用時(shí)眾多框架的首選默認(rèn)工具，它幾乎支持所有主流的 JavaScript 元框架，除了 Next.js 。

Vite 并不完美

Vite 的問題

Vite 極大地簡化了網(wǎng)頁開發(fā)過程，通過屏蔽底層復(fù)雜性，為用戶提供了一個(gè)直觀易用的開發(fā)環(huán)境。這一體驗(yàn)主要?dú)w功于其強(qiáng)大的底層技術(shù)支持，但這些工具也都不完美：

esbuild：快速進(jìn)行依賴預(yù)打包、轉(zhuǎn)換和壓縮，但tree shaking和代碼分割功能不如Rollup 完整和靈活，插件系統(tǒng)也相對僵化。
Rollup：適合生產(chǎn)構(gòu)建，兼容豐富插件，打包應(yīng)用效果更好。但由于是 JavaScript編寫，速度上不及原生語言編寫的 esbuild。
SWC：默認(rèn)不需要，在構(gòu)建React應(yīng)用時(shí)，能提供更高的性能和轉(zhuǎn)換效率，但體積龐大，是Vite及其所有依賴的兩倍多。

這種架構(gòu)就帶來了一些問題：

行為差異：esbuild和Rollup處理混合esm/cjs模塊圖時(shí)可能行為不一致，導(dǎo)致難以預(yù)見的錯(cuò)誤。
低效重復(fù)：工具反復(fù)解析、轉(zhuǎn)換源代碼為AST，并序列化回字符串，啟用 source map 時(shí)效率更低。
性能瓶頸：對于大規(guī)模項(xiàng)目，原生ESM開發(fā)服務(wù)器可能遭遇性能問題，影響開發(fā)體驗(yàn)。

為了上述問題，尤大決定開發(fā)自己的打包器（Rolldown），以統(tǒng)一并優(yōu)化 Vite 的打包流程。

工具鏈的問題

Vite面臨的挑戰(zhàn)反映了JavaScript生態(tài)系統(tǒng)的發(fā)展歷程。JavaScript從腳本語言成長為全球熱門語言，社區(qū)為此創(chuàng)造了眾多工具，應(yīng)對用例增長和復(fù)雜性。這既是機(jī)會也是難題，帶來了工具豐富性，但也存在碎片化、不兼容和低效等問題。

要解決這些問題，就需要為 JavaScript 建立一個(gè)統(tǒng)一的工具鏈。未來的工具鏈應(yīng)該是這樣的：

統(tǒng)一：整合工具鏈，使用統(tǒng)一工具、AST、配置等，減少碎片化。
高性能：優(yōu)先使用 Go、Rust 等語言開發(fā)的工具，提升效率。
模塊化：工具鏈的組件可單獨(dú)使用，支持跨語言互操作性。
運(yùn)行時(shí)無關(guān)：獨(dú)立于JavaScript運(yùn)行時(shí)，提高靈活性和兼容性。

創(chuàng)立 VoidZero

為了解決這些問題，尤大因此決定創(chuàng)立 VoidZero，一家致力于打造下一代 JavaScript 工具的公司。目前，公司已經(jīng)籌集了由 Accel 領(lǐng)投的 460 萬美元資金，并組建了一個(gè)全職團(tuán)隊(duì)來努力實(shí)現(xiàn)這一愿景。

團(tuán)隊(duì)目前正在做的事：

Oxc：將成為基礎(chǔ)的語言工具鏈，包括解析器、語義分析、轉(zhuǎn)換器、壓縮器、解析器、檢查器和格式化工具；
Rolldown：基于 Oxc 構(gòu)建的打包器，將成為Vite未來版本的統(tǒng)一打包解決方案。

Oxc 當(dāng)前進(jìn)展

進(jìn)展：

已完成：解析器、代碼檢查器、路徑解析器。
轉(zhuǎn)換器部分完成：支持TypeScript、JSX、React Refresh轉(zhuǎn)換及isolatedDeclarations DTS 輸出。
當(dāng)前重點(diǎn)：完善具備語法降級功能的Transformer。
后續(xù)計(jì)劃：壓縮器與格式化工具處于原型階段，待Transformer完成后推進(jìn)。

優(yōu)勢：
速度領(lǐng)先：在解析、檢查、轉(zhuǎn)換等關(guān)鍵領(lǐng)域，Oxc 均擁有最快性能。
內(nèi)存與體積優(yōu)化：相較于SWC，Oxc使用內(nèi)存更少，且二進(jìn)制文件體積更小。
Rust crate編譯效率：作為Rust crate使用時(shí)，Oxc在編譯速度上優(yōu)于依賴大量宏的項(xiàng)目。

Rolldown 當(dāng)前進(jìn)展

進(jìn)展：

已實(shí)現(xiàn)功能：支持CJS/ESM互操作性、Oxc 驅(qū)動(dòng)的內(nèi)置轉(zhuǎn)換、tree sharking 優(yōu)化、高級分塊，以及90%的Rollup插件接口兼容性。
當(dāng)前重點(diǎn)：提升對CSS/HTML和資產(chǎn)的支持，以及測試集成到Vite中，替換esbuild和Rollup，并移植部分Vite內(nèi)部插件到Rust以減少開銷。
進(jìn)展?fàn)顟B(tài)：Rolldown驅(qū)動(dòng)的Vite已通過大部分開發(fā)與構(gòu)建測試，即將進(jìn)行更多調(diào)整與打磨，隨后發(fā)布1.0 beta版本。

優(yōu)勢：
性能：在特定基準(zhǔn)測試中，Rolldown速度幾乎是esbuild的兩倍，遠(yuǎn)超其他Rust打包器。
內(nèi)存管理優(yōu)化：相較于基于Rollup的Vite，Rolldown在處理大規(guī)模應(yīng)用時(shí)不會耗盡內(nèi)存。

未來

即將推出的 Vite 6.0 的架構(gòu)如下，其仍然依賴于 esbuild、Rollup、SWC。

Vite 的下一次迭代的架構(gòu)如下，其將由 Rolldown 和 Oxc 驅(qū)動(dòng)，提高開發(fā)/生產(chǎn)一致性，減少內(nèi)部開銷，并提高生產(chǎn)構(gòu)建性能。

在更遠(yuǎn)的將來，將發(fā)布一個(gè)更依賴 Rolldown 的 Vite 版本，利用其強(qiáng)大的打包能力統(tǒng)一開發(fā)、模塊運(yùn)行和生產(chǎn)環(huán)境。這將消除網(wǎng)絡(luò)瓶頸，確保環(huán)境間的高度一致性，并在各種場景下實(shí)現(xiàn)最佳性能。