Vite
ViteConf Logo

攜手共建

ViteConf 2025

觀看回放

Vite 3.0 釋出了！ ​

2022年7月23日 - 檢視 Vite 4.0 釋出公告

去年二月，尤雨溪釋出了 Vite 2。自那以後，它的採用率持續增長，每週 npm 下載量超過 100 萬次。釋出後，一個龐大的生態系統迅速形成。Vite 正在推動 Web 框架領域的創新競賽。Nuxt 3 預設使用 Vite。SvelteKit、Astro、Hydrogen 和 SolidStart 均基於 Vite 構建。Laravel 現在也決定預設使用 Vite。Vite Ruby 展示了 Vite 如何改善 Rails 的開發體驗（DX）。Vitest 作為 Jest 的 Vite 原生替代品，正在穩步前進。Cypress 和 Playwright 的新元件測試功能也採用了 Vite，Storybook 更是將 Vite 作為其官方構建器。這個列表還在不斷增長。上述大多數專案的維護者都參與了 Vite 核心的改進，與 Vite 團隊及其他貢獻者緊密合作。

Vite 3 Announcement Cover Image

今天，距離 v2 釋出已過去 16 個月，我們很高興宣佈 Vite 3 的釋出。我們決定每年至少釋出一個 Vite 大版本，以對齊 Node.js 的 EOL（生命週期結束）時間表，並藉此機會定期審查 Vite 的 API，同時為生態系統中的專案提供簡短的遷移路徑。

快速連結

如果你剛接觸 Vite，建議閱讀 《為什麼選 Vite》指南。然後查閱 《入門指南》 和 《特性指南》，瞭解 Vite 開箱即用的功能。一如既往，歡迎在 GitHub 上做出貢獻。到目前為止，已有超過 600 位協作者幫助改進了 Vite。請關注 Twitter 上的更新，或在我們的 Discord 聊天伺服器上與其他 Vite 使用者進行交流。

全新文件 ​

前往 vite.dev 體驗全新的 v3 文件。Vite 現在使用全新的 VitePress 預設主題，除了其他功能外，還支援令人驚豔的深色模式。

Vite documentation frontpage

生態系統中的多個專案已經遷移到該文件（參見 Vitest、vite-plugin-pwa 以及 VitePress 本身）。

如果你需要訪問 Vite 2 的文件，它們將保留在 v2.vite.dev。此外還有一個新的 main.vite.dev 子域名，每次對 Vite 主分支的提交都會自動部署到這裡。這在測試測試版或參與核心開發時非常有用。

此外，現在還有官方的西班牙語翻譯，它與之前的中文和日文翻譯一同提供。

建立 Vite 啟動模板 ​

create-vite 模板是快速測試你最喜愛的框架與 Vite 相容性的絕佳工具。在 Vite 3 中，所有模板都更新了與新文件相符的主題。現在就可以線上開啟並體驗 Vite 3 了。

Vite logoVue logoSvelte logoReact logoPreact logoLit logo

該主題現在由所有模板共享。這有助於更好地傳達這些入門套件作為 Vite 最小化啟動模板的定位。對於包含 linting、測試設定和其他功能的更完整解決方案，一些框架提供了官方的 Vite 驅動模板，例如 create-vue 和 create-svelte。此外，Awesome Vite 維護了一份社群模板列表。

開發改進 ​

Vite CLI ​

  VITE v3.0.0  ready in 320 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

除了 CLI 的外觀改進外，你會注意到預設的開發伺服器埠現在是 5173，預覽伺服器監聽 4173。這一更改確保了 Vite 將避免與其他工具產生埠衝突。

改進的 WebSocket 連線策略 ​

Vite 2 的痛點之一是在代理伺服器後執行開發伺服器時的配置。Vite 3 更改了預設的連線方案，使其在大多數場景下都能開箱即用。所有這些配置現在都透過 vite-setup-catalogue 作為 Vite 生態系統 CI 的一部分進行測試。

冷啟動改進 ​

Vite 現在避免在冷啟動時進行全頁面過載，即使在爬取初始靜態匯入模組時有外掛注入匯入項的情況（#8869）。

點選瞭解更多

在 Vite 2.9 中，掃描器和最佳化器都在後臺執行。在最佳情況下（掃描器能找到所有依賴項），冷啟動時不需要過載。但如果掃描器漏掉了一個依賴項，則需要一個新的最佳化階段，然後進行過載。Vite 在 v2.9 中能夠避免一些過載，因為我們檢測了新的最佳化塊是否與瀏覽器已有的塊相容。但如果存在公共依賴，子塊可能會發生變化，為了避免狀態重複，需要進行過載。在 Vite 3 中，在完成靜態匯入的爬取之前，最佳化後的依賴項不會發送給瀏覽器。如果有缺失的依賴（例如由外掛注入），會立即觸發一個快速最佳化階段，只有在此之後，捆綁好的依賴才會傳送。因此，在這些情況下不再需要頁面過載。

Two graphs comparing Vite 2.9 and Vite 3 optimization strategy

import.meta.glob ​

import.meta.glob 的支援已重寫。請在 Glob 匯入指南中瞭解新功能。

多重模式現在可以以陣列形式傳遞。

js
import.meta.glob(['./dir/*.js', './another/*.js'])

排除模式現在支援（以 ! 為字首），用於忽略某些特定檔案。

js
import.meta.glob(['./dir/*.js', '!**/bar.js'])

命名匯入可以指定，以改善 Tree-shaking。

js
import.meta.glob('./dir/*.js', { import: 'setup' })

自定義查詢可以傳遞以附加元資料。

js
import.meta.glob('./dir/*.js', { query: { custom: 'data' } })

即時匯入（Eager Imports）現在可以透過標誌（flag）傳遞。

js
import.meta.glob('./dir/*.js', { eager: true })

將 WASM 匯入與未來標準對齊 ​

WebAssembly 匯入 API 已修訂，以避免與未來標準衝突，並使其更加靈活。

js
import init from './example.wasm?init'

init().then((instance) => {
  instance.exports.test()
})

在 WebAssembly 指南中瞭解更多。

構建改進 ​

預設採用 ESM SSR 構建 ​

生態系統中的大多數 SSR 框架已經在使用 ESM 構建。因此，Vite 3 將 ESM 作為 SSR 構建的預設格式。這使我們能夠簡化之前的 SSR 外部化啟發式方法，預設外部化所有依賴項。

改進的相對 Base 支援 ​

Vite 3 現在正確支援相對 base（使用 base: ''），允許構建的資產在不重新構建的情況下部署到不同的 base 中。這在構建時不知道 base 的情況下非常有用，例如部署到像 IPFS 這樣的內容定址網路。

實驗性功能 ​

構建資產路徑的細粒度控制（實驗性） ​

還有其他部署場景是不夠的。例如，如果生成的雜湊資產需要部署到與公共檔案不同的 CDN，則需要在構建時對路徑生成進行更細粒度的控制。Vite 3 提供了一個實驗性 API 來修改構建檔案路徑。請檢視 構建高階 Base 選項以獲取更多資訊。

構建時的 Esbuild 依賴最佳化（實驗性） ​

開發和構建時之間的主要區別之一是 Vite 處理依賴項的方式。在構建時，使用 @rollup/plugin-commonjs 來允許匯入僅限 CJS 的依賴項（如 React）。而在使用開發伺服器時，則使用 esbuild 進行預捆綁和最佳化，並在轉換匯入 CJS 依賴項的使用者程式碼時應用內聯互操作方案。在 Vite 3 的開發過程中，我們引入了必要的更改，以允許在構建時也使用 esbuild 來最佳化依賴項。這樣就可以避免使用 @rollup/plugin-commonjs，從而使開發和構建時的處理方式一致。

鑑於 Rollup v3 將在未來幾個月內釋出，且我們將緊隨其後釋出另一個 Vite 大版本，我們決定將此模式設為可選，以縮小 v3 的範圍，並給 Vite 和生態系統更多時間來解決在構建時使用新 CJS 互操作方法可能出現的問題。框架可以在 Vite 4 之前按自己的節奏切換為預設使用 esbuild 依賴最佳化。

HMR 部分接受（實驗性） ​

提供對 HMR 部分接受（HMR Partial Accept）的選擇性支援。此功能可以為在同一模組中匯出多個繫結的框架元件解鎖更細粒度的 HMR。你可以在 該提案的討論區中瞭解更多。

捆綁包體積縮減 ​

Vite 非常關注其釋出和安裝體積；快速安裝新應用程式是一項重要功能。Vite 捆綁了其大部分依賴項，並儘可能使用現代輕量級替代方案。繼續這一目標，Vite 3 的釋出體積比 v2 小了 30%。

釋出體積安裝體積
Vite 2.9.144.38MB19.1MB
Vite 3.0.03.05MB17.8MB
縮減量-30%-7%

在一定程度上，這種縮減是透過將一些大多數使用者不需要的依賴項設為可選實現的。首先，Terser 不再預設安裝。由於我們在 Vite 2 中已經使 esbuild 成為 JS 和 CSS 的預設壓縮器，該依賴項不再是必需的。如果你使用 build.minify: 'terser'，你需要自行安裝（npm add -D terser）。我們還將 node-forge 移出了 monorepo，並將自動 https 證書生成的支援實現為一個新外掛：@vitejs/plugin-basic-ssl。由於此功能僅建立未新增到本地儲存的未信任證書，因此它不值得佔據如此大的體積。

Bug 修復 ​

由 @bluwyoo 和最近加入 Vite 團隊的 @sapphi_red 帶頭進行了一場 Bug 修復馬拉松。在過去三個月中，Vite 的公開問題從 770 個減少到 400 個。這一大幅下降是在新開 PR 數量達到歷史新高的同時實現的。與此同時，@haoqunjiang 還整理了一份詳盡的 Vite 問題概覽。

Graph of open issues and pull requests in Vite

Graph of new issues and pull requests in Vite

相容性說明 ​

  • Vite 不再支援已結束生命週期的 Node.js 12 / 13 / 15。現在要求 Node.js 14.18+ / 16+。
  • Vite 現在作為 ESM 釋出，並提供一個指向 ESM 入口的 CJS 代理以實現相容性。
  • 現代瀏覽器基準線現在瞄準支援 原生 ES 模組、原生 ESM 動態匯入 和 import.meta 特性的瀏覽器。
  • SSR 和庫模式下的 JS 副檔名現在根據格式和包型別使用有效的副檔名（js、mjs 或 cjs）作為輸出 JS 入口點和塊。

在 遷移指南中瞭解更多。

對 Vite 核心的升級 ​

在致力於 Vite 3 的同時，我們還改善了 Vite Core 協作者的貢獻體驗。

  • 單元測試和 E2E 測試已遷移到 Vitest，提供了更快、更穩定的 DX。此舉也為生態系統中的一個重要基礎設施專案提供了“狗糧（dog fooding）”。
  • VitePress 構建現在作為 CI 的一部分進行測試。
  • Vite 升級到 pnpm 7，緊跟生態系統的步伐。
  • Playgrounds 已從 packages 目錄移至 /playgrounds。
  • 所有 packages 和 playgrounds 現在都標記為 "type": "module"。
  • 外掛現在使用 unbuild 進行捆綁，並且 plugin-vue-jsx 和 plugin-legacy 已遷移到 TypeScript。

生態系統已為 v3 做好準備 ​

我們與生態系統中的專案緊密合作，確保由 Vite 驅動的框架為 Vite 3 做好準備。vite-ecosystem-ci 允許我們針對 Vite 的主分支執行生態系統中領先專案的 CI，並在引入迴歸之前及時收到報告。今天的釋出應該很快能與大多數使用 Vite 的專案相容。

鳴謝 ​

Vite 3 是 Vite 團隊成員與生態系統專案維護者以及 Vite 核心其他協作者共同努力的成果。

我們要感謝所有實現功能、修復問題、提供反饋以及參與 Vite 3 開發的每一個人。

我們還要感謝資助 Vite 團隊的個人和公司，以及投資 Vite 開發的公司：@antfu7 在 Vite 和生態系統上的部分工作是他作為 Nuxt Labs 員工職責的一部分，而 StackBlitz 聘請了 @patak_dev 全職從事 Vite 的開發。

下一步計劃 ​

接下來的幾個月，我們將致力於確保所有基於 Vite 構建的專案順利過渡。因此，最初的幾個小版本（minor）將專注於繼續進行問題分類，重點解決新提出的問題。

Rollup 團隊正在開發其下一個大版本，將於未來幾個月內釋出。一旦 Rollup 外掛生態系統有時間進行更新，我們將隨之釋出一個新的 Vite 大版本。這將為我們提供另一個機會，在今年內引入更重大的變更，從而穩定此版本中引入的一些實驗性功能。

如果你有興趣幫助改進 Vite，加入我們的最好方式是參與問題分類。加入我們的 Discord 並查詢 #contributing 頻道。或者參與我們的 #docs、幫助 #help 其他人，或建立外掛。我們才剛剛起步。還有許多開放的創意可以繼續改進 Vite 的開發體驗。

© 2019-至今 VoidZero Inc. 和 Vite 貢獻者。(b59265c8)