Vite 3.0 正式發布，下一代前端工具鏈！
大家好，我是 CUGGZ。
7 月 13 日，Vite 3.0 正式發布，它被稱為下一代的前端工具鏈。Vite 團隊決定至少每年發布一個新的 Vite 主要版本，以與 Node.js 的 EOL 保持一致，并借此機會定期審查 Vite 的 API，為生態系統中的項目提供較短的遷移路徑。
去年 2 月，Vite 2 正式發布。從那時起，它的使用率不斷增長，每周 npm 下載量超過 100 萬次。發布后迅速形成了龐大的生態系統。Vite 正在推動 Web 框架的新一輪創新競賽。Nuxt 3 默認使用 Vite。SvelteKit、Astro、Hydrogen 和 SolidStart 都是用 Vite 構建的。Laravel 現在決定默認使用 Vite。Vite Ruby 展示了 Vite 如何改進 Rails DX。Vitest 作為 Jest 的 Vite-native 替代品正在取得長足進步。Storybook 將 Vite 作為官方構建器。而且名單還在繼續不斷擴大。大多數這些項目的維護者都參與了 Vite 核心的改進，與 Vite團隊和其他貢獻者密切合作。
全新文檔
全新的 v3 文檔發布，可以前往 vitejs.dev 查看。Vite 現在使用新的 VitePress 默認主題，其支持黑暗模式。
生態系統中的幾個項目的文檔也已經遷移到了VitePress（ Vitest、vite-plugin-pwa 和 VitePress）。
如果需要訪問 Vite 2 的文檔，可以前往 v2.vitejs.dev 查看。除此之外，還有一個新的 main.vitejs.dev，每次提交到 Vite 的主分支都會自動部署。這在測試 beta 版本或為核心開發做出貢獻時很有用。
文檔新增了一個正式的西班牙語翻譯，目前官網文檔提供了英語、簡體中文、日語、西班牙語版本。
創建 Vite 入門模板
create-vite 模板是一個很好的工具，可以用你最喜歡的框架快速測試 Vite。在 Vite 3 中，所有的模板都有一個與新文檔一致的新主題。
在線體驗模版：
- Vite：https://stackblitz.com/edit/vitejs-vite-qff3vk?file=index.html&terminal=dev
- Vite + Vue：https://stackblitz.com/edit/vitejs-vite-4hxjez?file=index.html&terminal=dev
- Vite + Svelte：https://stackblitz.com/edit/vitejs-vite-f3pc98?file=index.html&terminal=dev
- Vite + React：https://stackblitz.com/edit/vitejs-vite-s1q16q?file=index.html&terminal=dev
- Vite + Preact：https://stackblitz.com/edit/vitejs-vite-rndlvv?file=index.html&terminal=dev
- Vite + Lite：https://stackblitz.com/edit/vitejs-vite-8zaxwn?file=index.html&terminal=dev
該主題現在由所有模板共享。對于更完整的解決方案，包括linting、測試設置和其他功能，有一些基于 Vite 的官方模板，如create-vue 和 create-svelte。Awesome Vite 上有一個社區維護的模板列表。
Awesome Vite：https://github.com/vitejs/awesome-vite#templates。
開發改進
Vite CLI
VITE v3.0.0 ready in 320 ms
? Local: http://127.0.0.1:5173/
? Network: use --host to expose
除了 CLI 的美觀改進之外，默認的 dev server 的端口現在是 5173，而 preview server 的端口現在是 4173。此更改可確保 Vite 避免與其他工具發生沖突。
改進的 WebSocket 連接策略
Vite 2 的痛點之一是在代理之后運行時配置服務器。Vite 3 更改了默認連接方案，因此在大多數情況下都是開箱即用的。所有這些設置現在都通過 vite-setup-catalogue 作為 Vite 生態系統 CI 的一部分進行測試。
冷啟動改進
Vite 現在可以避免在冷啟動期間，當插件在抓取初始靜態導入的模塊時注入導入時完全重新加載。
import.meta.glob
import.meta.glob 支持被重寫。下面是 Glob Import Guide 中的新功能：
- 多個匹配模式可以作為數組傳遞。
import.meta.glob(['./dir/*.js', './another/*.js'])
- 現在支持反面匹配模式（以!為前綴）以忽略某些特定文件。
import.meta.glob(['./dir/*.js', '!**/bar.js'])
- 可以指定具名導入以改進tree-shaking。
import.meta.glob('./dir/*.js', { import: 'setup' })
- 可以使用 query 選項來提供對導入的自定義查詢，以供其他插件使用。
import.meta.glob('./dir/*.js', { query: { custom: 'data' } })
- eager 作為 Glob 導入的一個標識傳入。
import.meta.glob('./dir/*.js', { eager: true })
將 WASM import 與未來標準對齊
修改了 WebAssembly import API，以避免與未來的標準發生沖突，并使其更加靈活：
import init from './example.wasm?init'
init().then((instance) => {
instance.exports.test()
})
構建改進
ESM 成為 SSR 構建的默認格式
生態系統中的大多數SSR框架已經在使用ESM構建。因此，Vite 3 使 ESM 成為 SSR 構建的默認格式。這使我們能夠簡化以前的 SSR 外部化啟發式方法，默認情況下外部化依賴項。
改進的 Relative Base 支持
Vite 3 現在正確支持 Relative Base（使用base: ''），允許將構建的產物部署到不同的 base，而無需重新構建。這在構建時不知道 base 的情況時很有用。
減小構建體積
Vite 關心它的發布和安裝足跡；快速安裝新應用程序是一項功能。Vite 打包了它的大部分依賴項，并盡可能地嘗試使用現代輕量級替代方案。繼續這個持續的目標，Vite 3 的發布規模比 v2 小了 30%。
Bug 修復
在過去的三個月里，Vite 的開放 issues 從 770 減少到了 400。而這一下降是在新開放的 PR 處于歷史最高水平的情況下實現的。
兼容性說明
- Vite 不再支持 Node.js 12，現在需要 Node.js 14.18+。
- Vite 現在以 ESM 的形式發布。
- 現代瀏覽器 Baseline 現在支持本地 ES 模塊、本地 ESM 動態導入和import.meta 功能的瀏覽器。
Vite 核心升級
在開發 Vite 3 的同時，還改進了合作者對 Vite 核心的貢獻體驗。
- 單元和 E2E 測試已遷移到 Vitest，提供更快、更穩定的 DX。
- VitePress 構建現在作為 CI 的一部分進行測試。
- Vite 升級到 pnpm 7，跟隨生態系統的其余部分。
- Playgrounds 已從 packages 目錄移到/playgrounds。
- packages 和 playgrounds 現在是"type": "module"。
- 插件現在使用 unbuild 進行構建，并且plugin-vue-jsx? 和plugin-legacy 已移至 TypeScript。
生態系統已為v3做好準備
Vite 團隊與生態系統中的項目密切合作，以確保由 Vite 支持的框架為 Vite 3 做好準備。vite-ecosystem-ci 允許我們針對 Vite 的主分支運行生態系統中領先參與者的 CI，并在引入回歸之前及時收到報告。v3 版本很快就會與大多數使用 Vite 的項目兼容。
下一步
Vite 團隊將在接下來的幾個月內確保所有基于 Vite 構建的項目都能順利過渡。
Rollup 團隊正在開發下一個主要版本，并將在接下來的幾個月內發布。一旦 Rollup 插件生態系統有時間更新，Vite 團隊將跟進一個新的主要版本。這將是另一個在今年引入更重大變化的機會，可以利用這些變化來穩定此版本中引入的一些實驗性功能。
