Vite 4.0 釋出了！
2022年12月9日 - 檢視 Vite 5.0 公告
Vite 3 釋出於五個月前。自那以後，npm 每週下載量已從 100 萬增長至 250 萬。生態系統也日益成熟，並持續增長。在今年的 Jamstack Conf 調查中，社群使用率從 14% 躍升至 32%，同時保持了 9.7 的高滿意度評分。我們見證了 Astro 1.0、Nuxt 3 以及其他由 Vite 驅動的框架的穩定版本釋出，它們正在不斷創新與協作：SvelteKit、Solid Start、Qwik City。Storybook 宣佈將對 Vite 的一流支援作為 Storybook 7.0 的主要功能之一。Deno 現在也支援 Vite。Vitest 的採用率正在激增，它很快將佔據 Vite npm 下載量的半壁江山。Nx 也在投資該生態系統，並官方支援 Vite。
為了展示 Vite 及其相關專案所取得的增長，Vite 生態系統於 10 月 11 日舉辦了 ViteConf 2022。我們看到了來自主流 Web 框架和工具的代表講述創新與協作的故事。作為一種象徵性的舉動，Rollup 團隊選擇在當天釋出了 Rollup 3。
今天，Vite 團隊在生態系統合作伙伴的幫助下，很高興地宣佈釋出 Vite 4，它在構建時由 Rollup 3 提供支援。我們與生態系統合作，確保了此主要版本的平滑升級路徑。Vite 現在使用 Rollup 3，這使我們能夠簡化 Vite 的內部資源處理並帶來了許多改進。請點選此處檢視 Rollup 3 釋出說明。
快速連結
其他語言的文件
如果您最近才開始使用 Vite，我們建議閱讀《為什麼選擇 Vite》指南，並檢視入門指南和功能指南。如果您想參與其中，歡迎前往 GitHub 貢獻程式碼。已有近 700 名合作者為 Vite 做出過貢獻。歡迎在 Twitter 和 Mastodon 上關注更新，或在我們的 Discord 社群與其他使用者交流。
開始體驗 Vite 4
使用 pnpm create vite 以您喜歡的框架搭建 Vite 專案，或者透過 vite.new 線上開啟一個入門模板來體驗 Vite 4。
您也可以執行 pnpm create vite-extra 來獲取其他框架和執行時（Solid、Deno、SSR 和庫啟動器）的模板。當您在 create vite 中選擇 Others 選項時，也可以使用 create vite-extra 模板。
請注意，Vite 啟動模板旨在作為測試 Vite 與不同框架配合使用的遊樂場。在構建您的下一個專案時，我們建議使用各框架推薦的啟動器。現在，一些框架在 create vite 中也會重定向到它們自己的啟動器（如 Vue 的 create-vue 和 Nuxt 3，以及 Svelte 的 SvelteKit）。
開發時使用 SWC 的新 React 外掛
SWC 現在是 Babel 的成熟替代品，特別是在 React 專案中。SWC 的 React Fast Refresh 實現比 Babel 快得多，對於某些專案來說，它是目前更好的替代方案。從 Vite 4 開始，React 專案可以使用兩個外掛，它們各有優劣。我們認為這兩種方法目前都值得支援，並且未來我們將繼續探索對這兩個外掛的改進。
@vitejs/plugin-react
@vitejs/plugin-react 是一個使用 esbuild 和 Babel 的外掛，它在實現快速 HMR 的同時，保持了較小的包體積，並具備使用 Babel 轉換流水線的靈活性。
@vitejs/plugin-react-swc (新)
@vitejs/plugin-react-swc 是一個新外掛，它在構建時使用 esbuild，但在開發時用 SWC 替換了 Babel。對於不需要非標準 React 擴充套件的大型專案，冷啟動和熱模組替換 (HMR) 速度可以得到顯著提升。
瀏覽器相容性
現代瀏覽器構建現在預設以 safari14 為目標，以實現更廣泛的 ES2020 相容性。這意味著現代構建現在可以使用 BigInt，並且不再轉換空值合併運算子。如果您需要支援更舊的瀏覽器，您可以像往常一樣新增 @vitejs/plugin-legacy。
將 CSS 作為字串匯入
在 Vite 3 中，匯入 .css 檔案的預設匯出可能會導致 CSS 的雙重載入。
import cssString from './global.css'這種雙重載入可能會發生，因為 .css 檔案會被輸出，而且 CSS 字串很可能也會被應用程式碼使用——例如，由框架執行時注入。從 Vite 4 開始，.css 的預設匯出已被棄用。在這種情況下，需要使用 ?inline 查詢字尾修飾符，因為它不會輸出匯入的 .css 樣式。
import stuff from './global.css?inline'在遷移指南中瞭解更多資訊。
環境變數
Vite 現在使用 dotenv 16 和 dotenv-expand 9（之前為 dotenv 14 和 dotenv-expand 5）。如果您的值包含 # 或 `，您需要用引號將其包裹起來。
-VITE_APP=ab#cd`ef
+VITE_APP="ab#cd`ef"更多詳情，請參見 dotenv 和 dotenv-expand 更新日誌。
其他功能
- CLI 快捷鍵（開發時按
h可檢視所有快捷鍵）(#11228) - 預構建依賴項時支援
patch-package(#10286) - 更簡潔的構建日誌輸出 (#10895)，並切換到
kB以與瀏覽器開發工具對齊 (#10982) - 改進了 SSR 期間的錯誤訊息 (#11156)
減小包體積
Vite 非常關注其安裝體積，以加快安裝速度，特別是在文件演示和重現案例中。這個大版本再次減小了 Vite 的包體積。Vite 4 的安裝體積比 vite 3.2.5 小 23%（14.1 MB vs 18.3 MB）。
Vite 核心升級
Vite Core 和 vite-ecosystem-ci 持續發展，旨在為維護者和合作者提供更好的體驗，並確保 Vite 的開發能夠跟上生態系統的增長。
框架外掛移出核心
@vitejs/plugin-vue 和 @vitejs/plugin-react 自 Vite 初期就一直是 Vite 核心 monorepo 的一部分。這有助於我們在進行更改時獲得緊密的反饋迴圈，因為我們能夠同時測試和釋出 Core 和這些外掛。透過 vite-ecosystem-ci，我們可以在這些外掛於獨立倉庫開發時獲得反饋，因此從 Vite 4 開始，它們已被移出 Vite 核心 monorepo。這對於 Vite 的框架無關性而言意義重大，並將使我們能夠建立獨立的團隊來維護每個外掛。如果您有 Bug 要報告或有功能需求，請在未來的新倉庫中建立 Issue：vitejs/vite-plugin-vue 和 vitejs/vite-plugin-react。
vite-ecosystem-ci 的改進
vite-ecosystem-ci 透過提供大多數主要下游專案 CI 狀態的按需報告，擴充套件了 Vite 的 CI 能力。我們每週執行三次 vite-ecosystem-ci 來對比 Vite 的主分支，並在引入迴歸之前及時收到報告。Vite 4 將很快與大多數使用 Vite 的專案相容，這些專案已經準備好包含必要更改的分支，並將於未來幾天內釋出。我們還能夠透過評論中的 /ecosystem-ci run 在 PR 上按需執行 vite-ecosystem-ci，讓我們在程式碼合併到主分支之前就能知道更改的影響。
鳴謝
沒有 Vite 貢獻者們無數個小時的工作，Vite 4 是不可能實現的。他們中的許多人是下游專案和外掛的維護者，再加上 Vite 團隊的努力。我們所有人齊心協力，再次提升了 Vite 的開發體驗，服務於每一個使用它的框架和應用。我們很榮幸能為一個如此充滿活力的生態系統改進共同的基礎。
我們同樣感謝贊助 Vite 團隊的個人和公司，以及直接投資 Vite 未來的公司：@antfu7 在 Vite 和生態系統上的工作是他 Nuxt Labs 工作的一部分；Astro 正在資助 @bluwyoo 的 Vite 核心工作；StackBlitz 聘請了 @patak_dev 全職從事 Vite 的開發。
後續步驟
我們的首要任務是分類新提交的 Issue，以避免可能出現的迴歸帶來的困擾。如果您想參與其中並幫助我們改進 Vite，我們建議從 Issue 分類開始。加入我們的 Discord 並在 #contributing 頻道聯絡我們。完善我們的 #docs，並幫助 #help 其他人。隨著 Vite 採用率的持續增長，我們需要繼續為下一波使用者建立一個樂於助人且友好的社群。
還有很多前沿工作需要去做，以不斷提升那些選擇 Vite 來驅動框架和開發應用的使用者的開發體驗。前行！