尤雨溪：Vite的現狀與未來展望

10 月 5 日 - 6 日，ViteConf 2023 線上舉行，Vue 和 Vite 的創建者尤雨溪發表了題為《The State of Vite》 的演講，他分享了 Vite 的現狀與未來展望，本文就來看一看 Vite 現在怎麼樣了，以及未來的路將怎麼走！

Vite 版本發佈情況

首先，來快速回顧一下自上一次 ViteConf 以來， Vite 的版本發佈情況。每個版本都有很多更新，這裡只關註最主要的功能。

Vite 4.0

Vite 4.0 於 2022 年 12 月發佈，是上一次 ViteConf 後的主要版本更新。這個版本最大的變化是升級了 Rollup 3。Vite 和 Rollup 同步了主要版本的發佈，因此也停止了對舊版 Node.js 的支持。

相較於 Vite 3.0，這是一個更小的主要版本，沒有太多的破壞性變化。事實上，Vite 團隊的目標是發佈一個穩定的版本：充分利用生態系統的 CI 工具來確保與下游項目的相容性，以儘可能少地影響最終用戶。

除此之外，Vite 還採用了由 Arnaud Barre 最初創建的基於 SWC 的 React 插件，他現在也是 Vite 團隊成員！

Vite 4.1

Vite 4.1 於 2023 年 2 月發佈，該版本主要是將 Rollup 和 esbuild 的版本進行同步。值得註意的是 React 插件的升級：Plugin-react 插件修複了很多熱更新（HMR）方面的問題，並且採用 SWC 的版本增加了對 SWC 插件的支持。

Vite 4.2

Vite 4.2 於 2023 年 3 月發佈，該版本的主要改進是提升了 source map 的調試體驗。Vite 團隊與 Chrome Devtools 團隊進行合作，修複了一些長期存在的路徑顯示問題。通過x_google_ignoreList source map 擴展添加了排除文件的選項來排除堆棧跟蹤。

這個選項被一些更高級的框架，如 Nuxt 和 Angular 所使用，它可以讓開發者在處理錯誤時，只關註於真正關心的部分，從而提升調試效率。

Vite 4.3

Vite 4.3 於 2023 年 4 月發佈，該版本主要關註性能方面的改進，使冷啟動速度比之前快 4 倍，熱模塊替換速度比以前快 2 倍，其中主要的優化是對解析策略進行了重新編寫。

Vite 4.4

Vite 4.4 於 2023 年 7 月發佈，該版本添加了對 Lightning CSS 的實驗性支持。這是一個使用 Rust 編寫的快速 CSS 編譯工具，它可以加快 CSS 的處理速度。這個功能是可選的，需要顯式地安裝 Lightning CSS，並將其用於處理 Vite 內部的 CSS 轉換，如導入內聯和 CSS 模塊化，還可以用於對 CSS 進行壓縮處理。

此外，該版本還在 create-vite 中添加了 Solid 和 Qwik 模板。

Vite 5.0

Vite 5.0 目前處於測試階段（beta），這是一個穩定版本，主要變化是停止支持已經過時（EOL）的 Node.js 版本。

另外，Vite 正在棄用 CommonJS API。這個 API 目前還沒有被移除，所以如果仍在使用 CommonJS API，不會出現任何問題，只會收到一個小的警告，提示應該使用 ESM API 替代它。同時，Vite 還與大多數相關項目合作，鼓勵他們使用 ESM API。

Vite 增長和採用情況

接下來看看 Vite 在增長和採用方面的情況如何。

Github Star

Vite 的 Github 倉庫累計獲得了超過 60k Star。

npm 下載量

Vite 每周的下載量達到了 720 萬次，相比去年增長了 4 倍。

Storybook

Storybook 在 4 月發佈的 7.0 版本中，提供了一流的 Vite 支持。

Angular

Angular 在 5 月發佈的 16 版本中，使用 Vite 作為其開發伺服器。

Preact

Preact 在 6 月將其預設工具切換到了 Vite。

Redwood

Redwood 在 7 月發佈的 v6 版本完全基於 Vite 構建。

Bun

全新的 JavaScript 運行時 Bun 自從 0.7 版開始支持 Vite。

VitePress

VitePress 是用於 Vite、Rollup、Vue 等眾多項目文檔生成的靜態網站生成器，即將達到 1.0 版本。

Remix

Vite 團隊正在與 Remix 團隊合作，探索遷移到 Vite，並且已經取得了相當大的進展。

小結

顯然，Vite 正在成為一個基礎工具，越來越多的項目都在其之上構建。這些項目在不同的方向上都在創新，這種多樣性一直是 Web 的魅力所在。

Vite 的目標是解放開發者，減少構建工具層面的重覆工作和複雜性，並作為一個共用基礎設施，促進 Web 生態系統中更容易、更快速、更高級別的創新。在抽象化足夠低級別的複雜性的同時，暴露出足夠的靈活性，以便高級用戶、框架和工具作者可以使用。

為了更好地服務這一目標，總結了 Vite 的理念，如下：

• 精簡和可擴展的核心

• 推動現代化Web

• 實用的性能方法

• 支持高級框架

• 合作生態系統

最後兩點特別重要，Vite之所以取得今天的成就，是因為它具有一個合作的生態系統——一個建立在共同基礎之上的開源項目群體，在不同的方向上進行創新，並相互激發靈感。

Vite 未來展望

那麼，接下來呢？Vite 如何更好地履行其使命？仍然存在哪些缺陷，還可以做出哪些改進？

Vite 痛點和挑戰

以下是收集到的一些 Vite 用戶反饋的痛點：

• 相對較慢的生產構建速度

• 開發和生產環境之間的一致性問題

• 開發過程中未捆綁的ESM的網路開銷

• 令人困惑的SSR外部依賴問題

• 對塊拆分的控制能力有限

• 缺乏一方面的模塊聯邦支持

這些問題大多數從 Vite 發佈時就存在了。挑戰在於這些問題大多需要在打包工具層次上解決。Vite 在底層使用了兩個打包工具：esbuild 和 Rollup。

• esbuild 非常快，但是對構建資源優化的控制非常有限，並且插件API不夠靈活；

• Rollup 成熟且靈活，但與本地打包工具相比仍然較慢，並且ESM/CJS互操作的處理還有待改進。

這兩種打包工具無法完全替代彼此，並且存在一些細微的行為差異。所以，如果能有一個具有本地速度和 Rollup 的靈活性的打包工具，那太好了。

這個打包工具就是 Rolldown。

Rolldown

Vite 團隊正在研發 Rolldown，它是使用 Rust 開發的 Rollup 替代品。

Rolldown 的重點將放在本地級別的性能上，同時儘可能與 Rollup 保持相容。最終目標是在 Vite 中切換到 Rolldown，並對用戶產生最小的影響。

目前，Rolldown 仍處於早期的開發階段。原始的 Rolldown 項目在很久之前就開始了，它或多或少是 Rspack 的前身，位元組跳動的 Webpack 的 Rust 移植版本。

現在已經有了 Rolldown 的原始作者，他們也是 Rspack 的核心貢獻者，正在從零開始重新編寫 Rolldown 的新版本，並借鑒了以前迭代的知識和經驗。

目前已經有一個可以打包普通ES模塊的原型，但仍有許多架構層面的決策需要驗證，代碼庫目前正經歷許多變化。在獲得更穩定的結果後，團隊計劃將其開源。

Vite 團隊將與 Rspack 團隊合作開發一些共用的底層工具和功能，例如，都將建立在當前 Rust 中最快的 JS 解析器 OXC 的基礎上，還將研究如何在 Rspack 和 Vite 之間實現模塊聯邦。

當然，Vite 團隊還將與 Rollup 的維護者 Lukas 合作，確保 Rollup 和 Rolldown 之間的 API 和行為一致性。

Vite 發展路線

從零開始用 Rust 編寫一個打包工具並非易事，這需要花費大量的努力。下麵來看一下 Rolldown 的路線圖，以及從短期到長期的關鍵節點。

第一階段：聚焦基礎打包功能

第一階段的目標是能夠替代 esbuild 進行依賴預打包，其中關鍵的挑戰在於處理 CommonJS 和偽 ESM 依賴項。

第二階段：實現 Rollup 的功能

第二階段的目標是實現與 Rollup 相當的功能，尤其是與 Rollup 插件生態系統的相容性，以及實現 tree-shaking 和高級塊分割控制。

最終目標是在 Vite 中使用 Rolldown 作為生產構建的替代品，以提供功能更強大、高效、易用和靈活的打包工具。

第三階段：常見需求的內置轉換

第三個階段會稍微遙遠一些，它將包括一些最常見需求的內置轉換，例如 TypeScript、JSX、代碼壓縮，以及基於目標環境進行語法降級。

這個階段的目標是實現 esbuild 的功能，最終將用 Rolldown 取代 esbuild 和 Rollup。

第四階段：使用 Rust 重構 Vite

從長遠來看，Vite 團隊也在考慮如何讓 Vite 本身能夠更好地受益於原生級別的速度。

一種可能的實現方式是通過 Rust API 來公開 Rolldown 的插件容器，並將 Rolldown 作為 Vite 引入自己的Rust核心的依賴項。這樣一來，Vite 就可以將許多內部插件和轉換使用 Rust 重構，從而提高性能關鍵路徑上的效率。

此外，為那些開發過程中有太多未打包模塊的項目引入完全打包模式也是一個備選方案。

最終，Rolldown 的目標並不是取代現有的工具，而是更好地滿足在 Vite 中所面臨的獨特需求，並最終使所有使用 Vite 的用戶受益。