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

圖片

Vite 版本發(fā)布情況

首先，來快速回顧一下自上一次 ViteConf 以來， Vite 的版本發(fā)布情況。每個版本都有很多更新，這里只關(guān)注最主要的功能。

Vite 4.0

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

圖片

相較于 Vite 3.0，這是一個更小的主要版本，沒有太多的破壞性變化。事實上，Vite 團隊的目標(biāo)是發(fā)布一個穩(wěn)定的版本：充分利用生態(tài)系統(tǒng)的 CI 工具來確保與下游項目的兼容性，以盡可能少地影響最終用戶。

除此之外，Vite 還采用了由 Arnaud Barre 最初創(chuàng)建的基于 SWC 的 React 插件，他現(xiàn)在也是 Vite 團隊成員！

Vite 4.1

Vite 4.1 于 2023 年 2 月發(fā)布，該版本主要是將 Rollup 和 esbuild 的版本進(jìn)行同步。值得注意的是 React 插件的升級：Plugin-react 插件修復(fù)了很多熱更新（HMR）方面的問題，并且采用 SWC 的版本增加了對 SWC 插件的支持。

圖片

Vite 4.2

Vite 4.2 于 2023 年 3 月發(fā)布，該版本的主要改進(jìn)是提升了 source map 的調(diào)試體驗。Vite 團隊與 Chrome Devtools 團隊進(jìn)行合作，修復(fù)了一些長期存在的路徑顯示問題。通過x_google_ignoreList  source map 擴展添加了排除文件的選項來排除堆棧跟蹤。

圖片

這個選項被一些更高級的框架，如 Nuxt 和 Angular 所使用，它可以讓開發(fā)者在處理錯誤時，只關(guān)注于真正關(guān)心的部分，從而提升調(diào)試效率。

Vite 4.3

Vite 4.3 于 2023 年 4 月發(fā)布，該版本主要關(guān)注性能方面的改進(jìn)，使冷啟動速度比之前快 4 倍，熱模塊替換速度比以前快 2 倍，其中主要的優(yōu)化是對解析策略進(jìn)行了重新編寫。

圖片

Vite 4.4

Vite 4.4 于 2023 年 7 月發(fā)布，該版本添加了對 Lightning CSS 的實驗性支持。這是一個使用 Rust 編寫的快速 CSS 編譯工具，它可以加快 CSS 的處理速度。這個功能是可選的，需要顯式地安裝 Lightning CSS，并將其用于處理 Vite 內(nèi)部的 CSS 轉(zhuǎn)換，如導(dǎo)入內(nèi)聯(lián)和 CSS 模塊化，還可以用于對 CSS 進(jìn)行壓縮處理。

圖片

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

Vite 5.0

Vite 5.0 目前處于測試階段（beta），這是一個穩(wěn)定版本，主要變化是停止支持已經(jīng)過時（EOL）的 Node.js 版本。

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

圖片

Vite 增長和采用情況

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

Github Star

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

圖片

npm 下載量

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

圖片

Storybook

Storybook 在 4 月發(fā)布的 7.0 版本中，提供了一流的 Vite 支持。

圖片

Angular

Angular 在 5 月發(fā)布的 16 版本中，使用 Vite 作為其開發(fā)服務(wù)器。

圖片

Preact

Preact 在 6 月將其默認(rèn)工具切換到了 Vite。

圖片

Redwood

Redwood 在 7 月發(fā)布的 v6 版本完全基于 Vite 構(gòu)建。

圖片

Bun

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

圖片

VitePress

VitePress 是用于 Vite、Rollup、Vue 等眾多項目文檔生成的靜態(tài)網(wǎng)站生成器，即將達(dá)到 1.0 版本。

圖片

Remix

Vite 團隊正在與 Remix 團隊合作，探索遷移到 Vite，并且已經(jīng)取得了相當(dāng)大的進(jìn)展。

圖片

小結(jié)

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

Vite 的目標(biāo)是解放開發(fā)者，減少構(gòu)建工具層面的重復(fù)工作和復(fù)雜性，并作為一個共享基礎(chǔ)設(shè)施，促進(jìn) Web 生態(tài)系統(tǒng)中更容易、更快速、更高級別的創(chuàng)新。在抽象化足夠低級別的復(fù)雜性的同時，暴露出足夠的靈活性，以便高級用戶、框架和工具作者可以使用。

為了更好地服務(wù)這一目標(biāo)，總結(jié)了 Vite 的理念，如下：

• 精簡和可擴展的核心
• 推動現(xiàn)代化Web
• 實用的性能方法
• 支持高級框架
• 合作生態(tài)系統(tǒng)

最后兩點特別重要，Vite之所以取得今天的成就，是因為它具有一個合作的生態(tài)系統(tǒng)——一個建立在共同基礎(chǔ)之上的開源項目群體，在不同的方向上進(jìn)行創(chuàng)新，并相互激發(fā)靈感。

Vite 未來展望

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

Vite 痛點和挑戰(zhàn)

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

• 相對較慢的生產(chǎn)構(gòu)建速度
• 開發(fā)和生產(chǎn)環(huán)境之間的一致性問題
• 開發(fā)過程中未捆綁的ESM的網(wǎng)絡(luò)開銷
• 令人困惑的SSR外部依賴問題
• 對塊拆分的控制能力有限
• 缺乏一方面的模塊聯(lián)邦支持

這些問題大多數(shù)從 Vite 發(fā)布時就存在了。挑戰(zhàn)在于這些問題大多需要在打包工具層次上解決。Vite 在底層使用了兩個打包工具：esbuild 和 Rollup。

• esbuild 非?？?，但是對構(gòu)建資源優(yōu)化的控制非常有限，并且插件API不夠靈活；
• Rollup 成熟且靈活，但與本地打包工具相比仍然較慢，并且ESM/CJS互操作的處理還有待改進(jìn)。

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

這個打包工具就是 Rolldown。

Rolldown

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

圖片

Rolldown 的重點將放在本地級別的性能上，同時盡可能與 Rollup 保持兼容。最終目標(biāo)是在 Vite 中切換到 Rolldown，并對用戶產(chǎn)生最小的影響。

目前，Rolldown 仍處于早期的開發(fā)階段。原始的 Rolldown 項目在很久之前就開始了，它或多或少是 Rspack 的前身，字節(jié)跳動的 Webpack 的 Rust 移植版本。

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

目前已經(jīng)有一個可以打包普通ES模塊的原型，但仍有許多架構(gòu)層面的決策需要驗證，代碼庫目前正經(jīng)歷許多變化。在獲得更穩(wěn)定的結(jié)果后，團隊計劃將其開源。

Vite 團隊將與 Rspack 團隊合作開發(fā)一些共享的底層工具和功能，例如，都將建立在當(dāng)前 Rust 中最快的 JS 解析器 OXC 的基礎(chǔ)上，還將研究如何在 Rspack 和 Vite 之間實現(xiàn)模塊聯(lián)邦。

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

Vite 發(fā)展路線

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

第一階段：聚焦基礎(chǔ)打包功能

第一階段的目標(biāo)是能夠替代 esbuild 進(jìn)行依賴預(yù)打包，其中關(guān)鍵的挑戰(zhàn)在于處理 CommonJS 和偽 ESM 依賴項。

第二階段：實現(xiàn) Rollup 的功能

第二階段的目標(biāo)是實現(xiàn)與 Rollup 相當(dāng)?shù)墓δ?，尤其是與 Rollup 插件生態(tài)系統(tǒng)的兼容性，以及實現(xiàn) tree-shaking 和高級塊分割控制。

最終目標(biāo)是在 Vite 中使用 Rolldown 作為生產(chǎn)構(gòu)建的替代品，以提供功能更強大、高效、易用和靈活的打包工具。

第三階段：常見需求的內(nèi)置轉(zhuǎn)換

第三個階段會稍微遙遠(yuǎn)一些，它將包括一些最常見需求的內(nèi)置轉(zhuǎn)換，例如 TypeScript、JSX、代碼壓縮，以及基于目標(biāo)環(huán)境進(jìn)行語法降級。

這個階段的目標(biāo)是實現(xiàn) esbuild 的功能，最終將用 Rolldown 取代 esbuild 和 Rollup。

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

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

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

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

最終，Rolldown 的目標(biāo)并不是取代現(xiàn)有的工具，而是更好地滿足在 Vite 中所面臨的獨特需求，并最終使所有使用 Vite 的用戶受益。