大家好，我是 CUGGZ。

7 月 13 日，Vite 3.0 正式發(fā)布，它被稱為下一代的前端工具鏈。Vite 團(tuán)隊(duì)決定至少每年發(fā)布一個(gè)新的 Vite 主要版本，以與 Node.js 的 EOL 保持一致，并借此機(jī)會(huì)定期審查 Vite 的 API，為生態(tài)系統(tǒng)中的項(xiàng)目提供較短的遷移路徑。

去年 2 月，Vite 2 正式發(fā)布。從那時(shí)起，它的使用率不斷增長，每周 npm 下載量超過 100 萬次。發(fā)布后迅速形成了龐大的生態(tài)系統(tǒng)。Vite 正在推動(dòng) Web 框架的新一輪創(chuàng)新競賽。Nuxt 3 默認(rèn)使用 Vite。SvelteKit、Astro、Hydrogen 和 SolidStart 都是用 Vite 構(gòu)建的。Laravel 現(xiàn)在決定默認(rèn)使用 Vite。Vite Ruby 展示了 Vite 如何改進(jìn) Rails DX。Vitest 作為 Jest 的 Vite-native 替代品正在取得長足進(jìn)步。Storybook 將 Vite 作為官方構(gòu)建器。而且名單還在繼續(xù)不斷擴(kuò)大。大多數(shù)這些項(xiàng)目的維護(hù)者都參與了 Vite 核心的改進(jìn)，與 Vite團(tuán)隊(duì)和其他貢獻(xiàn)者密切合作。

全新文檔

全新的 v3 文檔發(fā)布，可以前往 vitejs.dev 查看。Vite 現(xiàn)在使用新的 VitePress 默認(rèn)主題，其支持黑暗模式。

生態(tài)系統(tǒng)中的幾個(gè)項(xiàng)目的文檔也已經(jīng)遷移到了VitePress（ Vitest、vite-plugin-pwa 和 VitePress）。

如果需要訪問 Vite 2 的文檔，可以前往 v2.vitejs.dev 查看。除此之外，還有一個(gè)新的 main.vitejs.dev，每次提交到 Vite 的主分支都會(huì)自動(dòng)部署。這在測試 beta 版本或?yàn)楹诵拈_發(fā)做出貢獻(xiàn)時(shí)很有用。

文檔新增了一個(gè)正式的西班牙語翻譯，目前官網(wǎng)文檔提供了英語、簡體中文、日語、西班牙語版本。

創(chuàng)建 Vite 入門模板

create-vite 模板是一個(gè)很好的工具，可以用你最喜歡的框架快速測試 Vite。在 Vite 3 中，所有的模板都有一個(gè)與新文檔一致的新主題。

在線體驗(yàn)?zāi)０妫?/p>

• 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

該主題現(xiàn)在由所有模板共享。對于更完整的解決方案，包括linting、測試設(shè)置和其他功能，有一些基于 Vite 的官方模板，如create-vue 和 create-svelte。Awesome Vite 上有一個(gè)社區(qū)維護(hù)的模板列表。

Awesome Vite：https://github.com/vitejs/awesome-vite#templates。

開發(fā)改進(jìn)

Vite CLI

VITE v3.0.0  ready in 320 ms
?  Local:   http://127.0.0.1:5173/
?  Network: use --host to expose

除了 CLI 的美觀改進(jìn)之外，默認(rèn)的 dev server 的端口現(xiàn)在是 5173，而 preview server 的端口現(xiàn)在是 4173。此更改可確保 Vite 避免與其他工具發(fā)生沖突。

改進(jìn)的 WebSocket 連接策略

Vite 2 的痛點(diǎn)之一是在代理之后運(yùn)行時(shí)配置服務(wù)器。Vite 3 更改了默認(rèn)連接方案，因此在大多數(shù)情況下都是開箱即用的。所有這些設(shè)置現(xiàn)在都通過 vite-setup-catalogue 作為 Vite 生態(tài)系統(tǒng) CI 的一部分進(jìn)行測試。

冷啟動(dòng)改進(jìn)

Vite 現(xiàn)在可以避免在冷啟動(dòng)期間，當(dāng)插件在抓取初始靜態(tài)導(dǎo)入的模塊時(shí)注入導(dǎo)入時(shí)完全重新加載。

import.meta.glob

import.meta.glob 支持被重寫。下面是  Glob Import Guide 中的新功能：

• 多個(gè)匹配模式可以作為數(shù)組傳遞。

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

• 現(xiàn)在支持反面匹配模式（以!為前綴）以忽略某些特定文件。

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

• 可以指定具名導(dǎo)入以改進(jìn)tree-shaking。

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

• 可以使用 query 選項(xiàng)來提供對導(dǎo)入的自定義查詢，以供其他插件使用。

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

• eager 作為 Glob 導(dǎo)入的一個(gè)標(biāo)識(shí)傳入。

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

將 WASM import 與未來標(biāo)準(zhǔn)對齊

修改了 WebAssembly import API，以避免與未來的標(biāo)準(zhǔn)發(fā)生沖突，并使其更加靈活：

import init from './example.wasm?init'
init().then((instance) => {
  instance.exports.test()
})

構(gòu)建改進(jìn)

ESM 成為 SSR 構(gòu)建的默認(rèn)格式

生態(tài)系統(tǒng)中的大多數(shù)SSR框架已經(jīng)在使用ESM構(gòu)建。因此，Vite 3 使 ESM 成為 SSR 構(gòu)建的默認(rèn)格式。這使我們能夠簡化以前的 SSR 外部化啟發(fā)式方法，默認(rèn)情況下外部化依賴項(xiàng)。

改進(jìn)的 Relative Base 支持

Vite 3 現(xiàn)在正確支持 Relative Base（使用base: ''），允許將構(gòu)建的產(chǎn)物部署到不同的 base，而無需重新構(gòu)建。這在構(gòu)建時(shí)不知道 base 的情況時(shí)很有用。

減小構(gòu)建體積

Vite 關(guān)心它的發(fā)布和安裝足跡；快速安裝新應(yīng)用程序是一項(xiàng)功能。Vite 打包了它的大部分依賴項(xiàng)，并盡可能地嘗試使用現(xiàn)代輕量級(jí)替代方案。繼續(xù)這個(gè)持續(xù)的目標(biāo)，Vite 3 的發(fā)布規(guī)模比 v2 小了 30%。

Bug 修復(fù)

在過去的三個(gè)月里，Vite 的開放 issues 從 770 減少到了 400。而這一下降是在新開放的 PR 處于歷史最高水平的情況下實(shí)現(xiàn)的。

兼容性說明

• Vite 不再支持 Node.js 12，現(xiàn)在需要 Node.js 14.18+。
• Vite 現(xiàn)在以 ESM 的形式發(fā)布。
• 現(xiàn)代瀏覽器 Baseline 現(xiàn)在支持本地 ES 模塊、本地 ESM 動(dòng)態(tài)導(dǎo)入和import.meta 功能的瀏覽器。

Vite 核心升級(jí)

在開發(fā) Vite 3 的同時(shí)，還改進(jìn)了合作者對 Vite 核心的貢獻(xiàn)體驗(yàn)。

• 單元和 E2E 測試已遷移到 Vitest，提供更快、更穩(wěn)定的 DX。
• VitePress 構(gòu)建現(xiàn)在作為 CI 的一部分進(jìn)行測試。
• Vite 升級(jí)到 pnpm 7，跟隨生態(tài)系統(tǒng)的其余部分。
• Playgrounds 已從 packages 目錄移到/playgrounds。
• packages 和 playgrounds 現(xiàn)在是"type": "module"。
• 插件現(xiàn)在使用 unbuild 進(jìn)行構(gòu)建，并且plugin-vue-jsx? 和plugin-legacy 已移至 TypeScript。

生態(tài)系統(tǒng)已為v3做好準(zhǔn)備

Vite 團(tuán)隊(duì)與生態(tài)系統(tǒng)中的項(xiàng)目密切合作，以確保由 Vite 支持的框架為 Vite 3 做好準(zhǔn)備。vite-ecosystem-ci 允許我們針對 Vite 的主分支運(yùn)行生態(tài)系統(tǒng)中領(lǐng)先參與者的 CI，并在引入回歸之前及時(shí)收到報(bào)告。v3 版本很快就會(huì)與大多數(shù)使用 Vite 的項(xiàng)目兼容。

下一步

Vite 團(tuán)隊(duì)將在接下來的幾個(gè)月內(nèi)確保所有基于 Vite 構(gòu)建的項(xiàng)目都能順利過渡。

Rollup 團(tuán)隊(duì)正在開發(fā)下一個(gè)主要版本，并將在接下來的幾個(gè)月內(nèi)發(fā)布。一旦 Rollup 插件生態(tài)系統(tǒng)有時(shí)間更新，Vite 團(tuán)隊(duì)將跟進(jìn)一個(gè)新的主要版本。這將是另一個(gè)在今年引入更重大變化的機(jī)會(huì)，可以利用這些變化來穩(wěn)定此版本中引入的一些實(shí)驗(yàn)性功能。