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

Vite

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

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

GitHub Stars：60,000+

Vite 生態(tài)

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

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

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

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

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

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

Bun v0.7 開始支持 Vite（bun vite support[7]）

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

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

...

Vite 痛點 & 挑戰(zhàn)

痛點

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

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

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

混亂的 SSR 外部問題

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

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

挑戰(zhàn)

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

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

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

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

Rollup 成熟且靈活，但：

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

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

兩個打包工具都無法完全替代對方，并且存在微妙的行為不一致性

Rolldown

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

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

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

它將為 Vite 提供：

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

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

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

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

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

目前狀態(tài)：初步的工作進(jìn)行中?。ㄓ媱澰谀甑浊伴_源）

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

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

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

如果 Vite 對你的使用場景來說過于龐大，Rolldown 當(dāng)然也可以作為一個獨立的依賴項使用。它還可以提高 Vitest[14] 和 Nitro[15] 的性能。

Vite Roadmap

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

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

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

階段 2：高級打包

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

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

TypeScript

JSX

代碼壓縮（minification）

語法降級（syntax lowering）

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

Rolldown 暴露插件容器作為 API

Vite 引入一個以 Rolldown 為依賴的 Rust 核心

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

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

Vite 版本日志

Vite 4.0 (2022.12)

升級到 Rollup 3（3.0.0 changelog[16]）

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

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

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

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

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

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

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

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

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

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

啟用自動 JSX 運行時（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 版本，添加了對 SWC 插件的支持。

Vite 4.2 (2023.03)

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

修復(fù) Chrome 開發(fā)工具在顯示相對路徑時的異常

通過 x_google_ignoreList 從堆棧跟蹤中排除某些文件的源映射，做到錯誤堆棧追蹤僅關(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 帶來了全面的速度提升（Vite 4.3 is out![22]）。

Vite 4.4 (2023.07)

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

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

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

最低 Node.js 版本要求 18+

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

審核編輯：劉清