11 月 16 日，Vite 5.0 正式發(fā)布，這是 Vite 道路上的又一個(gè)重要里程碑！Vite 現(xiàn)在使用 Rollup 4，這已經(jīng)代表了構(gòu)建性能的大幅提升。此外，還有一些新的選項(xiàng)可以改善開發(fā)服務(wù)器性能。

Vite 4 發(fā)布于近一年前，它為生態(tài)系統(tǒng)奠定了堅(jiān)實(shí)的基礎(chǔ)。隨著項(xiàng)目繼續(xù)在共享基礎(chǔ)設(shè)施上構(gòu)建，每周 npm 下載量從 250 萬躍升至 750 萬。框架不斷創(chuàng)新，除了 Astro、Nuxt、SvelteKit、Solid Start、Qwik City 等，還看到新的框架加入并使生態(tài)系統(tǒng)更加強(qiáng)大。RedwoodJS 和 Remix 轉(zhuǎn)向 Vite 為 React 生態(tài)系統(tǒng)的進(jìn)一步采用鋪平了道路。Vitest 的增長(zhǎng)速度甚至超過了 Vite。其團(tuán)隊(duì)一直在努力，很快將發(fā)布 Vitest 1.0。Vite 與 Storybook、Nx 和 Playwright 等其他工具一起使用的故事不斷改進(jìn)，環(huán)境也是如此，Vite 在 Deno 和 Bun 中都是可以使用的。

六個(gè)月前，Vite 4.3 版本發(fā)布。該版本顯著提高了開發(fā)服務(wù)器的性能。然而，仍有很大的改進(jìn)空間。在 ViteConf 上，尤雨溪公布了 Vite 的長(zhǎng)期計(jì)劃，即致力于開發(fā) Rolldown，這是一個(gè)帶有兼容 API 的 Rust 移植版的 Rollup。一旦準(zhǔn)備就緒，打算在 Vite Core 中使用它來承擔(dān) Rollup 和 esbuild 的任務(wù)。這將意味著提高構(gòu)建性能，并大大減少開發(fā)和構(gòu)建之間的不一致。Rolldown 目前處于早期階段，團(tuán)隊(duì)正準(zhǔn)備在年底前開源代碼庫(kù)。敬請(qǐng)關(guān)注！

Vite 5 專注于清理 API（刪除不推薦使用的功能），并簡(jiǎn)化了解決長(zhǎng)期問題的幾個(gè)功能，例如切換定義以使用正確的 AST 替換而不是 regex。團(tuán)隊(duì)還將繼續(xù)采取措施來實(shí)現(xiàn)未來的 Vite（Node.js 18+ 現(xiàn)在是必需的，CJS Node API 已被棄用）。

# 快速開始使用 Vite 5

可以使用 pnpm create vite 用喜歡的框架搭建 Vite 項(xiàng)目，或者使用 vite.new 在線打開啟動(dòng)模板來使用 Vite 5。還可以運(yùn)行 pnpm create vite-extra 來訪問其他框架和運(yùn)行時(shí)（Solid、Deno、SSR 和庫(kù)啟動(dòng)器）的模板。當(dāng)在“其他”選項(xiàng)下運(yùn)行 create vite 時(shí)，也可以使用 create vite-extra 模板。

注意，Vite 入門模板旨在用作使用不同框架測(cè)試 Vite 的平臺(tái)。在構(gòu)建下一個(gè)項(xiàng)目時(shí)，建議使用每個(gè)框架推薦的啟動(dòng)器。一些框架現(xiàn)在也將 create vite 重定向到它們的啟動(dòng)器（Vue 的 create-vue 和 Nuxt 3，以及 Svelte 的 SvelteKit）。

# Node.js 支持

Vite 不再支持已 EOL 的 Node.js 14 / 16 / 17 / 19。現(xiàn)在需要 Node.js 18 / 20+。

# 性能

除了 Rollup 4 的構(gòu)建性能改進(jìn)之外，還有一個(gè)新指南可幫助你識(shí)別和修復(fù)常見性能問題：https://vitejs.dev/guide/performance。

Vite 5 還引入了 server.warmup，這是一項(xiàng)改善啟動(dòng)時(shí)間的新功能。它允許定義應(yīng)在服務(wù)器啟動(dòng)后立即進(jìn)行預(yù)轉(zhuǎn)換的模塊列表。當(dāng)使用 --open 或 server.open 時(shí)，Vite 還會(huì)自動(dòng)預(yù)熱應(yīng)用的入口點(diǎn)或提供的 URL 以打開。

# 主要更新

Vite 現(xiàn)在由 Rollup 4 提供支持

Vite 現(xiàn)在使用 Rollup 4，它也帶來了重大變化，包括：

• Import assertions 已更名為 import attributes。
• 不再支持 Acorn 插件。
• 對(duì)于 Vite 插件，this.resolve的skipSelf選項(xiàng)現(xiàn)在默認(rèn)為true。
• 對(duì)于 Vite 插件，this.parse目前僅支持allowReturnOutsideFunction選項(xiàng)。

CJS Node API 已被棄用

Vite的CJS Node API 已被棄用。當(dāng)調(diào)用require('vite')時(shí)，現(xiàn)在會(huì)記錄棄用警告。應(yīng)該更新文件或框架，以導(dǎo)入Vite的ESM構(gòu)建而不是CJS構(gòu)建。

在基本的Vite項(xiàng)目中，請(qǐng)確保：

• vite.config.js文件內(nèi)容使用ESM語法。
• 最接近的package.json文件包含"type": "module"，或者使用.mjs擴(kuò)展名，例如vite.config.mjs。

對(duì)于其他項(xiàng)目，有一些常見的方法：

• 將 ESM 配置為默認(rèn)選項(xiàng)，根據(jù)需要選擇 CJS：在項(xiàng)目的package.json中添加"type": "module"。所有*.js文件現(xiàn)在都被解釋為ESM，并且需要使用 ESM 語法。可以將帶有.cjs擴(kuò)展名的文件重命名，以繼續(xù)使用 CJS。
• 將 CJS 配置為默認(rèn)選項(xiàng)，根據(jù)需要選擇ESM：如果項(xiàng)目的package.json沒有"type": "module"，所有*.js文件都將被解釋為 CJS。可以將帶有.mjs擴(kuò)展名的文件重命名，以使用 ESM。
• 動(dòng)態(tài)導(dǎo)入 Vite：如果需要繼續(xù)使用 CJS，可以使用import('vite')進(jìn)行動(dòng)態(tài)導(dǎo)入 Vite。這需要代碼以異步上下文編寫，但由于 Vite 的 API 大多是異步的，因此應(yīng)該仍然可以管理。

重新制定 define 和 import.meta.env.* 的替代策略

在 Vite 4 中，define和import.meta.env.*功能在開發(fā)和構(gòu)建中使用不同的替換策略：

• 在開發(fā)環(huán)境中，這兩個(gè)功能被注入為全局變量到globalThis和import.meta中。
• 在構(gòu)建環(huán)境中，這兩個(gè)功能被靜態(tài)地使用正則表達(dá)式替換。

這導(dǎo)致在嘗試訪問這些變量時(shí)出現(xiàn)開發(fā)環(huán)境和構(gòu)建環(huán)境的不一致性，有時(shí)甚至?xí)?dǎo)致構(gòu)建失敗。例如：

// vite.config.js
export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0'),
  },
})

const data = { __APP_VERSION__ }
// dev: { __APP_VERSION__: "1.0.0" } ?
// build: { "1.0.0" } ?

const docs = 'I like import.meta.env.MODE'
// dev: "I like import.meta.env.MODE" ?
// build: "I like "production"" ?

Vite 5 通過使用 esbuild 來處理構(gòu)建中的替換，與開發(fā)行為保持一致。

這個(gè)改變不應(yīng)該影響大多數(shù)設(shè)置，因?yàn)橐呀?jīng)有文檔說明define的值應(yīng)該遵循 esbuild 的語法：

為了與 esbuild 的行為保持一致，表達(dá)式必須是一個(gè) JSON 對(duì)象（null、boolean、number、string、array或object）或者一個(gè)單個(gè)的標(biāo)識(shí)符。

然而，如果你更喜歡直接保持靜態(tài)替換值，可以使用 @rollup/plugin-replace[1]。

worker.plugins 現(xiàn)在是一個(gè)函數(shù)

在 Vite 4 中，worker.plugins接受一個(gè)插件數(shù)組((Plugin | Plugin[])[])。而在 Vite 5 中，它需要配置為一個(gè)返回插件數(shù)組的函數(shù)(() => (Plugin | Plugin[])[])。這個(gè)改變是為了使并行的工作器構(gòu)建更加一致和可預(yù)測(cè)。

允許包含 . 的路徑回退到 index.html

在 Vite 4 中，在開發(fā)環(huán)境中訪問包含點(diǎn)"."的路徑時(shí)，即使將appType設(shè)置為'spa'（默認(rèn)值），也不會(huì)回退到index.html。而在 Vite 5 中，它將會(huì)回退到index.html。

注意，如果將圖像路徑指向一個(gè)不存在的文件（例如<img src="./file-does-not-exist.png">），瀏覽器將不再在控制臺(tái)中顯示 404 錯(cuò)誤消息。

統(tǒng)一開發(fā)和預(yù)覽 HTML 服務(wù)行為

在 Vite 4 中，開發(fā)服務(wù)器和預(yù)覽服務(wù)器根據(jù)目錄結(jié)構(gòu)和末尾斜杠來不同地提供HTML服務(wù)。這會(huì)導(dǎo)致在測(cè)試構(gòu)建后的應(yīng)用時(shí)出現(xiàn)不一致性。Vite 5 將重構(gòu)成以下類似的單一行為，假設(shè)以下文件結(jié)構(gòu)：

├── index.html
├── file.html
└── dir
    └── index.html

manifest 文件會(huì)在 .vite 目錄中生成

默認(rèn)情況下，Vite 4 中的清單文件（build.manifest和build.ssrManifest）是在構(gòu)建的根目錄中生成的。

而從 Vite 5 開始，默認(rèn)情況下它們將會(huì)生成在.build.outDir目錄中的.vite目錄中。這個(gè)改變有助于避免公共文件與相同的清單文件名在復(fù)制到build.outDir時(shí)發(fā)生沖突。

CLI 快捷方式需要額外的 Enter 鍵觸發(fā)

現(xiàn)在，CLI的快捷方式（例如r鍵重啟開發(fā)服務(wù)器）需要額外按下Enter鍵才能觸發(fā)快捷方式。例如，按下r鍵后再按Enter鍵來重啟開發(fā)服務(wù)器。

這個(gè)改變防止 Vite 吞噬和控制特定于操作系統(tǒng)的快捷方式，使得將 Vite 開發(fā)服務(wù)器與其他進(jìn)程結(jié)合使用時(shí)更加兼容。

更新experimentalDecorators和useDefineForClassFields在 TypeScript 中的行為

Vite 5 使用 esbuild 0.19，并移除了對(duì) esbuild 0.18 的兼容層，這改變了 experimentalDecorators 和 useDefineForClassFields 的處理方式。

• experimentalDecorators默認(rèn)情況下是未啟用的，需要在tsconfig.json中將compilerOptions.experimentalDecorators設(shè)置為true才能使用裝飾器。
• useDefineForClassFields的默認(rèn)值取決于TypeScript的目標(biāo)值，如果目標(biāo)不是ESNext或ES2022或更新版本，或者沒有tsconfig.json文件，則useDefineForClassFields將默認(rèn)為false，這可能會(huì)導(dǎo)致問題，因?yàn)槟J(rèn)的esbuild.target值是 esnext。它可能會(huì)轉(zhuǎn)譯為靜態(tài)初始化塊，而這在瀏覽器中可能不被支持。

因此，建議在配置tsconfig.json時(shí)將目標(biāo)設(shè)置為ESNext或ES2022或更新版本，或者顯式將useDefineForClassFields設(shè)置為true。

{
  "compilerOptions": {
    // 如果使用裝飾器，設(shè)置為true
    "experimentalDecorators": true,
    // 如果在瀏覽器中看到解析錯(cuò)誤，設(shè)置為true
    "useDefineForClassFields": true
  }
}

移除--https標(biāo)志和https: true

-https標(biāo)志在內(nèi)部設(shè)置了server.https: true和preview.https: true。這個(gè)配置原本是用來與 Vite 3 中取消的自動(dòng) https 證書生成功能一起使用的。因此，這個(gè)配置不再有用，因?yàn)樗鼤?huì)啟動(dòng)一個(gè)沒有證書的 Vite HTTPS 服務(wù)器。

如果使用的是@vitejs/plugin-basic-ssl或vite-plugin-mkcert，它們已經(jīng)在內(nèi)部設(shè)置了 https 配置，所以可以在設(shè)置中移除--https、server.https: true和preview.https: true。

移除resolvePackageEntry和resolvePackageData API

resolvePackageEntry和resolvePackageData API已被移除，因?yàn)樗鼈儽┞读?Vite 的內(nèi)部結(jié)構(gòu)，并阻礙了過去 Vite 4.3 的潛在優(yōu)化。可以使用第三方包替代這些API，例如：

• resolvePackageEntry: 使用 import.meta.resolve[2] 或 import-meta-resolve[3]包。
• resolvePackageData: 同上，并向上遍歷包目錄以獲取根package.json。或者使用社區(qū)的 vitefu[4] 包。

import { resolve } from 'import-meta-env'
import { findDepPkgJsonPath } from 'vitefu'
import fs from 'node:fs'

const pkg = 'my-lib'
const basedir = process.cwd()

// `resolvePackageEntry`:
const packageEntry = resolve(pkg, basedir)

// `resolvePackageData`:
const packageJsonPath = findDepPkgJsonPath(pkg, basedir)
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))

已移除的過時(shí) API

• CSS 文件的默認(rèn)導(dǎo)出（例如 import style from './foo.css'）：改用?inline查詢參數(shù)代替
• import.meta.globEager：改用 import.meta.glob('*', { eager: true }) 代替 ssr.format：'cjs' 和 legacy.buildSsrCjsExternalHeuristics
• server.middlewareMode：'ssr' 和 server.middlewareMode：'html'：改用 appType + server.middlewareMode: true 代替。

[1]@rollup/plugin-replace： https://github.com/rollup/plugins/tree/master/packages/replace。

[2]import.meta.resolve]： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve。

[3]import-meta-resolve： https://github.com/wooorm/import-meta-resolve。

[4]vitefu： https://github.com/svitejs/vitefu。