宣佈 Vite 2.0
2021年2月16日 - 檢視 Vite 3.0 釋出公告
今天，我們非常激動地宣佈 Vite 2.0 正式釋出！
Vite（法語意為“快速”，發音為 /vit/）是一種面向前端開發的全新構建工具。可以將其想象為：一個預配置的開發伺服器 + 打包器的組合，但更精簡、更快速。它利用瀏覽器對 原生 ES 模組 的支援，並使用像 esbuild 這樣用編譯型語言編寫的工具，從而提供敏捷、現代的開發體驗。
想感受 Vite 的速度有多快？看看這段對比影片：在 Repl.it 上分別使用 Vite 和 create-react-app (CRA) 啟動同一個 React 應用。
如果你從未聽說過 Vite 並想了解更多資訊，請參閱專案背後的設計原理。如果你對 Vite 與其他類似工具的區別感興趣，請檢視對比頁面。
2.0 有什麼新特性
由於我們在 1.0 進入 RC 階段之前決定對內部進行徹底重構，這實際上是 Vite 的第一個穩定版本。話雖如此，Vite 2.0 相比之前版本帶來了許多重大的改進。
框架無關的核心
Vite 的最初構想始於一個透過原生 ESM 提供 Vue 單檔案元件服務的原型專案。Vite 1 是該構想的延續，並在其之上實現了 HMR（熱更新）。
Vite 2.0 吸取了我們在開發過程中的經驗教訓，從零開始進行了重新設計，採用了更健壯的內部架構。現在它完全實現了框架無關，所有特定於框架的支援都透過外掛來完成。目前已有官方提供的 Vue、React、Preact、Lit Element 模板，社群也在積極努力實現對 Svelte 的整合。
新的外掛格式與 API
受 WMR 的啟發，新的外掛系統擴充套件了 Rollup 的外掛介面，並且開箱即用地相容許多 Rollup 外掛。外掛可以使用 Rollup 相容的鉤子，同時還擁有特定於 Vite 的附加鉤子和屬性，以調整僅適用於 Vite 的行為（例如區分開發環境與生產構建，或自定義 HMR 處理）。
程式化 API 也得到了極大的改進，旨在方便基於 Vite 構建的高層工具/框架。
由 esbuild 驅動的依賴預構建
由於 Vite 是一個原生的 ESM 開發伺服器，它會對依賴項進行預構建，以減少瀏覽器的請求數量並處理 CommonJS 到 ESM 的轉換。此前 Vite 使用 Rollup 來執行此操作，而在 2.0 中，它改用了 esbuild，這使依賴項預構建的速度提高了 10 到 100 倍。作為參考，此前在 M1 晶片的 MacBook Pro 上啟動一個包含大量依賴項（如 React Material UI）的測試應用需要 28 秒，現在僅需約 1.5 秒。如果你正從傳統的基於打包器的設定切換過來，期待獲得相似的效能提升。
一流的 CSS 支援
Vite 將 CSS 視為模組圖中的一等公民，並開箱即用支援以下功能：
- 解析器增強：CSS 中的
@import和url()路徑透過 Vite 的解析器進行了增強，從而支援別名（alias）和 npm 依賴項。 - URL 重定向：無論檔案從何處引入，
url()路徑都會被自動重定向。 - CSS 程式碼分割：程式碼分割後的 JS 分塊（chunk）也會輸出相應的 CSS 檔案，當 JS 分塊被請求時，該 CSS 檔案會自動並行載入。
服務端渲染 (SSR) 支援
Vite 2.0 帶來了實驗性的 SSR 支援。Vite 提供了 API，用於在開發過程中高效地載入和更新基於 ESM 的原始碼（類似於服務端 HMR），並自動將相容 CommonJS 的依賴項外部化，以提高開發和 SSR 構建速度。生產伺服器可以完全與 Vite 解耦，同樣的設定可以輕鬆適配以執行預渲染或靜態網站生成 (SSG)。
Vite SSR 以底層特性的形式提供，我們期待看到更多高層框架在底層利用它。
可選的舊版瀏覽器支援
Vite 預設面向支援原生 ESM 的現代瀏覽器，但你也可以透過官方的 @vitejs/plugin-legacy 選擇支援舊版瀏覽器。該外掛會自動生成現代/舊版雙構建版本，並根據瀏覽器特性檢測交付正確的版本，確保在支援現代特性的瀏覽器中提供更高效的程式碼。
快來試試吧！
特性雖然很多，但 Vite 的上手非常簡單！你可以在一分鐘內真正建立一個由 Vite 驅動的應用，只需執行以下命令（請確保安裝了 Node.js >=12）：
npm init @vitejs/app接下來，請檢視 指南 以瞭解 Vite 開箱即用提供的功能。你也可以在 GitHub 上檢視原始碼，在 Twitter 上關注更新，或者在我們的 Discord 聊天伺服器 上與其他 Vite 使用者討論。