Vite 5.1 釋出了！
2024年2月8日
Vite 5 於去年11月釋出，它代表了 Vite 和整個生態系統的又一次重大飛躍。幾周前，我們慶祝了 npm 每週下載量突破 1000 萬次，以及 Vite 倉庫擁有 900 位貢獻者。今天，我們很高興地宣佈 Vite 5.1 的釋出。
其他語言文件：簡體中文, 日本語, Español, Português, 한국어, Deutsch
在 StackBlitz 線上試用 Vite 5.1：vanilla, vue, react, preact, lit, svelte, solid, qwik。
要了解最新動態，請在 X 或 Mastodon 上關注我們。
Vite Runtime API
Vite 5.1 為全新的 Vite Runtime API 增加了實驗性支援。它允許透過先用 Vite 外掛處理程式碼來執行任何程式碼。它與 server.ssrLoadModule 不同，因為執行時實現與伺服器解耦了。這使得庫和框架作者能夠實現自己的伺服器和執行時之間的通訊層。這個新 API 旨在在穩定後取代 Vite 當前的 SSR 原語。
新 API 帶來了許多好處
- 支援在 SSR 期間進行熱更新（HMR）。
- 它與伺服器解耦，因此不受單個伺服器連線客戶端數量的限制——每個客戶端都有自己的模組快取（您甚至可以使用您想要的任何方式與之通訊——使用訊息通道、fetch 呼叫、直接函式呼叫或 websocket）。
- 它不依賴於任何 Node/Bun/Deno 的內建 API，因此可以在任何環境中執行。
- 它很容易與擁有自己程式碼執行機制的工具整合（例如，您可以提供一個執行器來使用
eval而不是new AsyncFunction）。
最初的構想由 Pooya Parsa 提出，並由 Anthony Fu 作為 vite-node 包實現，用於驅動 Nuxt 3 開發環境下的 SSR，後來也成為了 Vitest 的基礎。因此，vite-node 的總體構想已經經過了相當長時間的實戰檢驗。這是由 Vladimir Sheremet 對該 API 進行的全新迭代，他已經在 Vitest 中重新實現了 vite-node，並汲取了經驗，使 API 在加入 Vite Core 時變得更加強大和靈活。該 PR 開發歷時一年，您可以在這裡檢視其演變過程以及與生態系統維護者的討論。
資訊
Vite Runtime API 演變成了 Module Runner API，在 Vite 6 中作為環境 API（Environment API）的一部分發布。
功能
改進對 .css?url 的支援
現在，將 CSS 檔案作為 URL 匯入可以穩定且正確地工作。這是 Remix 遷移到 Vite 的最後一個障礙。見 (#15259)。
build.assetsInlineLimit 現在支援回撥函式
使用者現在可以提供一個回撥函式，返回布林值來選擇開啟或關閉特定資源的內聯。如果返回 undefined，則應用預設邏輯。見 (#15366)。
改進迴圈匯入的熱更新（HMR）
在 Vite 5.0 中，迴圈匯入中被接受的模組即使在客戶端可以正常處理，也會觸發全頁面過載。現在這一限制已放寬，允許在不進行全頁面過載的情況下應用 HMR，但如果 HMR 期間發生任何錯誤，頁面仍將重新載入。見 (#15118)。
支援 ssr.external: true 以將所有 SSR 包外部化
歷史上，Vite 會外部化除連結包（linked packages）之外的所有包。此新選項可用於強制外部化所有包，包括連結包。這在 monorepo 的測試中非常有用，因為我們希望模擬所有包都被外部化的通常情況；或者在使用 ssrLoadModule 載入任意檔案時，我們希望始終外部化包，因為我們不關心 HMR。見 (#10939)。
預覽伺服器中公開 close 方法
預覽伺服器現在公開了一個 close 方法，它將正確關閉伺服器，包括所有開啟的套接字連線。見 (#15630)。
效能提升
Vite 在每個版本中都在不斷變快，Vite 5.1 包含了多項效能改進。我們使用 vite-dev-server-perf 測量了從 Vite 4.0 開始的所有次要版本的 10K 模組（25 層深樹）的載入時間。這是衡量 Vite 無打包（bundle-less）方法效果的一個很好的基準。每個模組都是一個包含計數器和對樹中其他檔案匯入的小型 TypeScript 檔案，因此這主要衡量的是作為獨立模組進行請求所需的時間。在 Vite 4.0 中，在 M1 MAX 上載入 10K 模組耗時 8 秒。在 Vite 4.3 中我們專注於效能並取得了突破，我們將載入時間縮短到了 6.35 秒。而在 Vite 5.1 中，我們又實現了一次效能飛躍。Vite 現在僅需 5.35 秒即可提供 10K 模組。
此基準測試的結果是在無頭 Puppeteer 上執行的，是比較不同版本的好方法。然而，它們並不代表使用者體驗到的時間。在 Chrome 隱身視窗中執行相同的 10K 模組時，結果如下：
| 10K 模組 | Vite 5.0 | Vite 5.1 |
|---|---|---|
| 載入時間 | 2892ms | 2765ms |
| 載入時間（快取） | 2778ms | 2477ms |
| 全量過載 | 2003ms | 1878ms |
| 全量過載（快取） | 1682ms | 1604ms |
線上程中執行 CSS 預處理器
Vite 現在支援線上程中執行 CSS 預處理器（需手動開啟）。您可以透過 css.preprocessorMaxWorkers: true 啟用它。對於一個 Vuetify 2 專案，開啟此功能後開發啟動時間減少了 40%。PR 中有其他設定的效能比較。見 (#13584)。提供反饋。
改進伺服器冷啟動的新選項
您可以設定 optimizeDeps.holdUntilCrawlEnd: false 以切換到一種新的依賴項最佳化策略，這可能有助於大型專案。我們正在考慮將來預設使用此策略。提供反饋。 (#15244)
透過快取檢查實現更快的解析
fs.cachedChecks 最佳化現在預設啟用。在 Windows 上，tryFsResolve 因此快了約 14 倍，並且在三角形基準測試中，總體 ID 解析速度提升了約 5 倍。 (#15704)
內部效能改進
開發伺服器進行了幾項增量效能提升。增加了用於 304 短路的新中介軟體 (#15586)。我們在熱點路徑中避免了 parseRequest (#15617)。Rollup 現在可以正確進行懶載入 (#15621)。
棄用
我們繼續儘可能減少 Vite 的 API 面，以確保專案的長期可維護性。
棄用 import.meta.glob 中的 as 選項
標準已經轉向 匯入屬性 (Import Attributes)，但我們目前不打算用新選項替換 as。建議使用者改用 query。見 (#14420)。
移除實驗性的構建時預打包
Vite 3 中新增的實驗性功能“構建時預打包”已被移除。隨著 Rollup 4 將其解析器切換為原生程式碼，以及 Rolldown 的開發，該功能的效能優勢和開發與構建不一致的問題已不再存在。我們希望繼續改善開發/構建的一致性，並得出結論：使用 Rolldown 進行“開發時預打包”和“生產環境構建”是未來的更好選擇。Rolldown 在構建時可能還會以比依賴預打包效率高得多的方式實現快取。見 (#15184)。
參與其中
我們衷心感謝 900 位 Vite Core 貢獻者，以及外掛、整合、工具和翻譯的維護者，他們不斷推動生態系統向前發展。如果您喜歡 Vite，歡迎參與並幫助我們。檢視我們的 貢獻指南，投入到 分類 Issue、審查 PR、在 GitHub Discussions 中回答問題，並在 Vite Land 中幫助社群中的其他人。
鳴謝
Vite 5.1 的實現離不開我們的貢獻者社群、生態系統中的維護者以及 Vite 團隊。向資助 Vite 開發的個人和公司致敬。StackBlitz、Nuxt Labs 和 Astro 聘請了 Vite 團隊成員。同時也感謝在 Vite 的 GitHub Sponsors、Vite 的 Open Collective 以及 Evan You 的 GitHub Sponsors 上資助的朋友們。