ViteConf 2023：Vite即將Rust化挑戰(zhàn)

ViteConf 干貨滿(mǎn)滿(mǎn)，尤大的分享中最值得關(guān)注的就要數(shù) Rolldown 了，它為 Vite 現(xiàn)有痛點(diǎn)提供了新的解決方案。

Vite

Vite[2] 是支撐著全球增長(zhǎng)最快的前端生態(tài)系統(tǒng)的下一代構(gòu)建工具。

npm 每周下載量：7,200,000+

GitHub Stars：60,000+

Vite 生態(tài)

Vite 正在迅速崛起為一個(gè)共享的基礎(chǔ)平臺(tái)，吸引著越來(lái)越多的項(xiàng)目在其基礎(chǔ)上構(gòu)建和發(fā)展。令人興奮的是，這些項(xiàng)目不僅僅滿(mǎn)足于基礎(chǔ)應(yīng)用，而是在各自的領(lǐng)域中進(jìn)行著前所未有的創(chuàng)新。

Vite 妥善平衡了低級(jí)別復(fù)雜性的抽象和高級(jí)用戶(hù)及框架的靈活性。這不僅降低了入門(mén)門(mén)檻，提供了友好的開(kāi)發(fā)體驗(yàn)，同時(shí)也確保了對(duì)于高級(jí)應(yīng)用和多變需求的充分支持。

Storybook v7 提供一流的 Vite 支持：預(yù)先捆綁以提高速度、零配置設(shè)置、無(wú)需 Webpack 以及更小的安裝大?。‵irst-class Vite support in Storybook[3]）

Angular v16 使用 Vite 作為開(kāi)發(fā)服務(wù)器（Angular v16 is here![4]）

Preact[5] 在 6 月份將默認(rèn)工具切換為 Vite，推薦使用 create-vite 來(lái)快速開(kāi)始一個(gè)項(xiàng)目

Redwood v6 完全構(gòu)建在 Vite 之上（RedwoodJS Vite Configuration[6]）

Bun v0.7 開(kāi)始支持 Vite（bun vite support[7]）

VitePress[8] 靜態(tài)網(wǎng)站生成器

與 Remix[9] 合作，探索向 Vite 遷移，已取得重大進(jìn)展

...

Vite 痛點(diǎn) & 挑戰(zhàn)

痛點(diǎn)

相對(duì)緩慢的生產(chǎn)構(gòu)建速度：目前仍使用 rollup 作為生產(chǎn)構(gòu)建，本地開(kāi)發(fā)使用 esbuild 或 Bun

開(kāi)發(fā)與生產(chǎn)環(huán)境之間的不一致：Vite 使用混合策略。開(kāi)發(fā)使用 esbuild 預(yù)構(gòu)建，使用 Native ES 模塊提供源代碼；生產(chǎn)使用 Rollup 來(lái)捆綁所有資產(chǎn)，CommonJS 在處理和轉(zhuǎn)換時(shí)有時(shí)會(huì)出現(xiàn)輕微的不一致，最終導(dǎo)致難以調(diào)試。

開(kāi)發(fā)過(guò)程中存在未捆綁 ESM 的網(wǎng)絡(luò)開(kāi)銷(xiāo)：如果開(kāi)發(fā)者項(xiàng)目中包含大量未捆綁 ESM 時(shí)，網(wǎng)絡(luò)開(kāi)銷(xiāo)會(huì)大幅影響初始頁(yè)面加載速度。

混亂的 SSR 外部問(wèn)題

對(duì)代碼塊分割的有限控制：與 ES 構(gòu)建相比，雖然 Rollup 已經(jīng)提供了很大靈活性，但與 Webpack 的完全支持自定義相比，還是有些差距

缺乏首方模塊聯(lián)合（First-party Module Federation）支持：了解更多 Module Federation[10]

挑戰(zhàn)

大多數(shù)問(wèn)題需要在打包工具（bundler）層面解決（Vite 內(nèi)部有兩個(gè)捆綁器：esbuild 和 Rollup）

esbuild（或 Bun）速度極快，但：

對(duì)構(gòu)建資源優(yōu)化的控制非常有限：比如控制塊的分割方式

插件 API 不夠靈活：比如當(dāng)嘗試將多個(gè)插件連接在一起以處理同一文件類(lèi)型時(shí)

Rollup 成熟且靈活，但：

與原生打包工具相比仍然較慢

ESM/CJS 交互操作的處理可以改進(jìn)

兩個(gè)打包工具都無(wú)法完全替代對(duì)方，并且存在微妙的行為不一致性

Rolldown

尤大透露團(tuán)隊(duì)正在開(kāi)發(fā) Rolldown，它是 Rollup 的 Rust 移植版。目的并不是為了取代現(xiàn)有的工具 esbuild 或 Rollup，只是為了更好地滿(mǎn)足一些特定需求，使 Vite 用戶(hù)受益。

專(zhuān)注點(diǎn)：在盡可能與 Rollup 兼容的前提下，重點(diǎn)關(guān)注性能

目標(biāo)：在對(duì)終端用戶(hù)影響最小的前提下，在 Vite 中替換 esbuild 和 Rollup

它將為 Vite 提供：

顯著更快的生產(chǎn)構(gòu)建速度

更強(qiáng)的開(kāi)發(fā)/生產(chǎn)一致性

更穩(wěn)健的 SSR 依賴(lài)處理

更多關(guān)于代碼塊分割的控制

當(dāng)然，這將是一項(xiàng)龐大的工作！

目前狀態(tài)：初步的工作進(jìn)行中?。ㄓ?jì)劃在年底前開(kāi)源）

核心貢獻(xiàn)者是前 rspack[11] 團(tuán)隊(duì)成員（rspack 是字節(jié)開(kāi)源的一個(gè)基于 rust 實(shí)現(xiàn)的前端打包工具，對(duì)標(biāo) Webpack）

與 rspack 團(tuán)隊(duì)合作，在 OXC[12] 基礎(chǔ)上進(jìn)行建設(shè)（Oxc 是一套為 JavaScript 和 TypeScript 創(chuàng)建的高性能工具，基于 Rust 實(shí)現(xiàn)。它正在構(gòu)建一個(gè)解析器、linter、格式化程序、轉(zhuǎn)譯器、壓縮器、解析器……）

與 @lukastaegert[13]（rollup 核心維護(hù)者） 合作以確保與 Rollup 的一致性

如果 Vite 對(duì)你的使用場(chǎng)景來(lái)說(shuō)過(guò)于龐大，Rolldown 當(dāng)然也可以作為一個(gè)獨(dú)立的依賴(lài)項(xiàng)使用。它還可以提高 Vitest[14] 和 Nitro[15] 的性能。

Vite Roadmap

計(jì)劃將通過(guò)四個(gè)階段逐步完善和升級(jí)打包和構(gòu)建過(guò)程，最后將 Vite 的一部分功能通過(guò) Rust 和 Rolldown 進(jìn)行重寫(xiě)或優(yōu)化，以提高整體性能和提供更多的構(gòu)建模式。

階段 1：基礎(chǔ)打包

替換 esbuild 用于依賴(lài)預(yù)打包：CommonJS & 仿 ESM（faux-ESM）兼容性

階段 2：高級(jí)打包

與 Rollup 功能對(duì)齊：插件兼容性、Tree-shaking、高級(jí)代碼塊分割控制等

階段 3：內(nèi)置轉(zhuǎn)換

TypeScript

JSX

代碼壓縮（minification）

語(yǔ)法降級(jí)（syntax lowering）

階段 4：使用 Rust 重構(gòu) Vite

Rolldown 暴露插件容器作為 API

Vite 引入一個(gè)以 Rolldown 為依賴(lài)的 Rust 核心

使用 Rust 重構(gòu) Vite 內(nèi)部關(guān)鍵插件和 ssrLoadModule 轉(zhuǎn)換

提供與未捆綁 ESM（unbundled ESM）相對(duì)的全包模式（full-bundle mode）

Vite 版本日志

Vite 4.0 (2022.12)

升級(jí)到 Rollup 3（3.0.0 changelog[16]）

最低 Node.js 要求：Rollup 現(xiàn)在至少需要 Node 14.18.0 來(lái)運(yùn)行。

插件和 API 更改：許多插件上下文函數(shù)和插件鉤子已被移除或修改。

新特性：包括按塊調(diào)用 output.banner/footer/intro/outro 的函數(shù)，插件可以訪(fǎng)問(wèn)完整的塊圖表等。

構(gòu)建輸出：增加了關(guān)于動(dòng)態(tài)導(dǎo)入在 CommonJS 輸出中的處理，允許控制動(dòng)態(tài)導(dǎo)入在生成 CommonJS 輸出時(shí)是以 import(...) 還是包裝過(guò)的 require(...) 形式被輸出。

警告和棄用：一些之前被棄用的特性已被移除，而其他一些特性開(kāi)始顯示棄用警告。

錯(cuò)誤處理：改進(jìn)了Rollup 拋出的錯(cuò)誤信息的清晰度和一致性。

性能優(yōu)化：避免在發(fā)出數(shù)千個(gè)資產(chǎn)時(shí)的性能問(wèn)題。

就重大變更而言，這是一個(gè)小得多的主版本。目標(biāo)是為了最大化利用生態(tài)，而推出的一個(gè)穩(wěn)定版。CI 確保與下游項(xiàng)目的兼容性，以便更改對(duì)最終用戶(hù)的影響盡可能小。

使用 SWC 支持的 React 插件 @vitejs/plugin-react-swc[17]

快速刷新（比 Babel 快約 20 倍）

啟用自動(dòng) JSX 運(yùn)行時(shí)（Babel 在 v7.9.0 版本中引入此特性，相關(guān)閱讀：Introducing the New JSX Transform[18] 和 A new JSX transform[19]

Vite 4.1 (2023.02)

同步 Rollup 和 esbuild 版本

react 插件變化顯著

plugin-react 修復(fù)了很多 HMR bug

支持 SWC 的 Vite 版本，添加了對(duì) SWC 插件的支持。

Vite 4.2 (2023.03)

改進(jìn)源代碼調(diào)試體驗(yàn)

修復(fù) Chrome 開(kāi)發(fā)工具在顯示相對(duì)路徑時(shí)的異常

通過(guò) x_google_ignoreList 從堆棧跟蹤中排除某些文件的源映射，做到錯(cuò)誤堆棧追蹤僅關(guān)注你在意的部分（相關(guān)閱讀：vite server.sourcemapIgnoreList[20] 和 The x_google_ignoreList source map extension[21]）

Vite 4.3 (2023.04)

與 Vite 4.2 相比，4.3 帶來(lái)了全面的速度提升（Vite 4.3 is out![22]）。

Vite 4.4 (2023.07)

實(shí)驗(yàn)性支持 Lightning CSS[23]（基于 Rust 實(shí)現(xiàn)的 CSS 編譯工具鏈），注意：它目前與其他 CSS 處理器互斥。

create-vite[24] 添加 solid 和 qwik 模板。

Vite 5.0 (當(dāng)前處于 beta 版)

最低 Node.js 版本要求 18+

CommonJS API 已棄用。注意：并未對(duì)其進(jìn)行刪除，如果你仍在使用 Vite 中的通用 API，也不會(huì)有任何問(wèn)題。但會(huì)收到警告，督促你轉(zhuǎn)向 ESM API。

審核編輯：劉清