Vite 8 正式發布：內建 devtool，支援 Wasm SSR

===================================

![](https://i.imgur.com/m2W0pZz.jpeg)

昨天，Vue 的創辦人說，本週將有三個重磅釋出，讓前端圈相當興奮。

原本以為還要等幾天才會放出重大消息，沒想到等候時間很短，Vite 8 就正式釋出了！

一個全新的、讓前端加速奔跑的時代，已經到來。

Vite 8 採用了最新的 rolldown 驅動，這是自 Vite 誕生以來最大的一次「心臟」手術。

過去開發階段以 esbuild 取勝於速度，正式打包時則以 rollup 作為主要工具，這種左右腦互搏的情況，不僅讓開發團隊頭疼，有時候開發環境與正式建置結果不一致，更讓使用者感到不安。

這也是許多人與專案依然固守 Webpack 陣營、遲遲不願回到 Vite 生態的原因之一：雖然慢，但至少結果一致。

如今這個局面被打破了。經過深思熟慮，尤雨溪團隊成立了 Void 公司，從根本解決這個問題。從底層的語法解析到壓縮打包，全部由 Void 維護與實作，打造一個涵蓋開發、測試、格式化、執行與除錯等各個環節的全能「Vite+」生態。

換了「心臟」的 Vite 8，構建速度快了 10–30 倍，實測報告如下：

Linear：生產構建時間從 46 秒降到 6 秒
Ramp：構建時間減少了 57%
Mercedes-Benz.io：構建時間最多減少 38%
Beehiiv：構建時間減少 64%

以上皆為國外真實大型專案的提速回饋，Vite 8 的確將我們帶進了「大加速」時代。

同時，令人驚喜的是 Vite 8 內建了 devtool 開發者除錯工具，不再需要安裝第三方依賴。

<div><div><div></div><span>js</span></div><div><div> <span>體驗AI程式助理</span></div><div> <span>程式碼解讀</span></div><div>複製程式碼</div></div></div>```
<span><span>import</span> { defineConfig } <span>from</span> <span>'vite'</span>;</span>
<span></span>
<span><span>export</span> <span>default</span> <span>defineConfig</span>({</span>
<span>    <span>devtools</span>: {</span>
<span>        <span>enabled</span>: <span>true</span></span>
<span>    }</span>
<span>});</span>



只要依照如上設定啟動 `devtool`，就能像智慧駕駛一樣，開發與管理專案。

![](https://i.imgur.com/HLb37U3.jpeg)

同時，為了方便維護與管理 Vite 外掛，`https://registry.vite.dev` 的 Vite 外掛平台應運而生，可以在此查看與瀏覽成千上萬個 Vite 外掛，開發者們再也不用到處尋找外掛了。

前端規範的 ESM 運動仍任重道遠，`require` 的歷史包袱正被越來越多流行工具所修正，Vite 也不例外。

Vite 8 需要 Node.js 20.19+ 或 22.12+，這些版本範圍確保 Node.js 支援不需旗標的 `require(esm)`，允許 Vite 以 ESM 形式發行。

內建 tsconfig 支援
-----------------

Vite 8 內建 tsconfig 支援，開發者可以將 `resolve.tsconfigPaths` 設為 `true` 以啟用 TypeScript 的路徑別名解析，這會帶來一定的效能開銷，預設情況下為停用。

emitDecoratorMetadata 支援
------------------------

Vite 8 現在已內建自動支援 TypeScript 的 `emitDecoratorMetadata` 選項，無需外部外掛。

Wasm SSR 支援
------------

Wasm 的支援也更進一步，`.wasm?init` 匯入現在可以在 SSR 環境中運作，將 Vite 的 WebAssembly 功能擴展到伺服器端渲染。

瀏覽器主控台轉發
--------------

Vite 8 可以將瀏覽器主控台的日誌與錯誤轉發到開發伺服器終端，這在與程式碼代理（code proxy）合作時特別有用，因為執行時的用戶端錯誤會在 CLI 輸出中顯示。

使用 `server.forwardConsole` 啟用，當偵測到程式碼代理時會自動啟動。

---

隨著 Vite 8 的正式釋出，後續計畫也已提上日程。

完整打包模式（實驗性）
--------------------

此模式在開發過程中即對模組進行打包，類似於生產建置。

初步結果顯示，開發伺服器啟動速度提升 3 倍，完整重新整理速度提升 40%，網路請求數量減少 10 倍。

這對大型專案特別有幫助，因為未打包的開發方式在擴展性上會遇到限制。

原始 AST 傳輸
----------

允許 JavaScript 外掛以最小化序列化開銷存取由 Rust 產生的 AST，縮短了 Rust 內部與 JS 外掛程式碼之間的效能落差。

原生 MagicString 轉換
------------------

支援自訂轉換，其邏輯位於 JavaScript 中，但字串操作計算在 Rust 中執行。

穩定的環境 API
-----------

Vite 團隊正在努力使環境 API 穩定，生態系中已開始定期會議，以便更好地協作。

---

我是鄉下程式員、獨立開發者、前端之虎 陳隨易，技術交流與交朋友請到我的個人網站聯絡我 ✌️

- 個人網站 1️⃣：[chensuiyi.me](https://link.juejin.cn?target=https%3A%2F%2Fchensuiyi.me)
- 個人網站 2️⃣：[me.yicode.tech](https://link.juejin.cn?target=https%3A%2F%2Fme.yicode.tech)

---

原文出處：https://juejin.cn/post/7616222207401410611