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

Vite

Vite[2] 是支撐著全球增長最快的前端生態系統的下一代構建工具。

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

GitHub Stars：60,000+

Vite 生態

Vite 正在迅速崛起為一個共享的基礎平臺，吸引著越來越多的項目在其基礎上構建和發展。令人興奮的是，這些項目不僅僅滿足于基礎應用，而是在各自的領域中進行著前所未有的創新。

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

Storybook v7 提供一流的 Vite 支持：預先捆綁以提高速度、零配置設置、無需 Webpack 以及更小的安裝大小（First-class Vite support in Storybook[3]）

Angular v16 使用 Vite 作為開發服務器（Angular v16 is here![4]）

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

Redwood v6 完全構建在 Vite 之上（RedwoodJS Vite Configuration[6]）

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

VitePress[8] 靜態網站生成器

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

...

Vite 痛點 & 挑戰

痛點

相對緩慢的生產構建速度：目前仍使用 rollup 作為生產構建，本地開發使用 esbuild 或 Bun

開發與生產環境之間的不一致：Vite 使用混合策略。開發使用 esbuild 預構建，使用 Native ES 模塊提供源代碼；生產使用 Rollup 來捆綁所有資產，CommonJS 在處理和轉換時有時會出現輕微的不一致，最終導致難以調試。

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

混亂的 SSR 外部問題

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

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

挑戰

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

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

對構建資源優化的控制非常有限：比如控制塊的分割方式

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

Rollup 成熟且靈活，但：

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

ESM/CJS 交互操作的處理可以改進

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

Rolldown

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

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

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

它將為 Vite 提供：

顯著更快的生產構建速度

更強的開發/生產一致性

更穩健的 SSR 依賴處理

更多關于代碼塊分割的控制

當然，這將是一項龐大的工作！

目前狀態：初步的工作進行中！（計劃在年底前開源）

核心貢獻者是前 rspack[11] 團隊成員（rspack 是字節開源的一個基于 rust 實現的前端打包工具，對標 Webpack）

與 rspack 團隊合作，在 OXC[12] 基礎上進行建設（Oxc 是一套為 JavaScript 和 TypeScript 創建的高性能工具，基于 Rust 實現。它正在構建一個解析器、linter、格式化程序、轉譯器、壓縮器、解析器……）

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

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

Vite Roadmap

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

階段 1：基礎打包

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

階段 2：高級打包

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

階段 3：內置轉換

TypeScript

JSX

代碼壓縮（minification）

語法降級（syntax lowering）

階段 4：使用 Rust 重構 Vite

Rolldown 暴露插件容器作為 API

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

使用 Rust 重構 Vite 內部關鍵插件和 ssrLoadModule 轉換

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

Vite 版本日志

Vite 4.0 (2022.12)

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

最低 Node.js 要求：Rollup 現在至少需要 Node 14.18.0 來運行。

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

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

構建輸出：增加了關于動態導入在 CommonJS 輸出中的處理，允許控制動態導入在生成 CommonJS 輸出時是以 import(...) 還是包裝過的 require(...) 形式被輸出。

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

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

性能優化：避免在發出數千個資產時的性能問題。

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

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

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

啟用自動 JSX 運行時（Babel 在 v7.9.0 版本中引入此特性，相關閱讀：Introducing the New JSX Transform[18] 和 A new JSX transform[19]

Vite 4.1 (2023.02)

同步 Rollup 和 esbuild 版本

react 插件變化顯著

plugin-react 修復了很多 HMR bug

支持 SWC 的 Vite 版本，添加了對 SWC 插件的支持。

Vite 4.2 (2023.03)

改進源代碼調試體驗

修復 Chrome 開發工具在顯示相對路徑時的異常

通過 x_google_ignoreList 從堆棧跟蹤中排除某些文件的源映射，做到錯誤堆棧追蹤僅關注你在意的部分（相關閱讀：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 實現的 CSS 編譯工具鏈），注意：它目前與其他 CSS 處理器互斥。

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

Vite 5.0 (當前處于 beta 版)

最低 Node.js 版本要求 18+

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

審核編輯：劉清