Vite 2.0 發佈
2021 年 2 月 16 日 - 查看 Vite 3.0 的發佈公告
今天我們很高興宣佈 Vite 2.0 的正式發佈！
Vite (法語，意為「快速」，發音為 /vit/) 是一種用於前端 Web 開發的新型建構工具。把它想像成一個預先配置好的開發伺服器 + 打包工具的組合，但更精簡、更快速。它利用瀏覽器的 原生 ES 模組 支援以及使用編譯為原生語言 (例如 esbuild) 編寫的工具，來提供快速且現代化的開發體驗。
若要瞭解 Vite 有多快，請查看 此影片比較，比較在 Repl.it 上使用 Vite 與 create-react-app (CRA) 啟動 React 應用程式的速度。
如果您之前從未聽說過 Vite 且想瞭解更多資訊，請查看 此專案背後的理念。如果您對 Vite 與其他類似工具的差異感興趣，請查看 比較。
2.0 版本的新功能
由於我們決定在 1.0 版退出 RC 之前完全重構內部架構，這實際上是 Vite 的第一個穩定版本。也就是說，Vite 2.0 比之前的版本帶來了許多重大改進。
框架無關核心
Vite 的最初想法是一個 hacky 原型，可透過原生 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 倍。作為參考，使用像 React Material UI 這樣依賴項繁重的測試應用程式進行冷啟動，之前在配備 M1 的 MacBook Pro 上需要 28 秒，而現在只需要約 1.5 秒。如果您從傳統的基於打包工具的設定切換過來，預計會有類似的改進。
一流的 CSS 支援
Vite 將 CSS 視為模組圖表的一流成員，並支援以下現成功能
- 解析器增強: CSS 中的
@import和url()路徑透過 Vite 的解析器進行增強，以遵循別名和 npm 依賴項。 - URL 重定基底:
url()路徑會自動重定基底，無論檔案從何處匯入。 - CSS 程式碼分割: 程式碼分割的 JS 區塊也會發出相應的 CSS 檔案，該檔案會在要求時與 JS 區塊並行自動載入。
伺服器端渲染 (SSR) 支援
Vite 2.0 附帶 實驗性的 SSR 支援。Vite 提供 API 來在開發期間有效率地在 Node.js 中載入和更新基於 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 使用者進行討論。