Vite 6 完整升級指南：Oxc 引擎、新 Environment API 與生态大爆發

Vite 6 來了。從 Vite 5 到 Vite 6，npm 週下載從 750 萬成長到 1700 萬，生態系從幾個框架擴展到覆蓋 OpenAI、Google、Apple、Microsoft、NASA、Shopify 等企業用戶。這篇整理 Vite 6 的所有重要變更，幫你判斷需不需要升級，以及怎麼升。

先看數據：Vite 的 2024–2026 年爆發式成長

Vite 6 的發布伴隨著一組令人印象深刻的數字：

npm 週下載：750 萬（Vite 5）→ 1700 萬（Vite 6），年增 127%
使用企業：OpenAI、Google、Apple、Microsoft、NASA、Shopify、Cloudflare、GitLab、Reddit、Linear
框架生態：Astro、Nuxt、SvelteKit、SolidStart、Qwik City、RedwoodJS、React Router、TanStack Start、Ember
生態工具：Vitest（已被 Storybook 採用作為測試引擎）、StackBlitz WebContainers、bolt.new

Vite 6 是自 Vite 2 以來最大的一次 major release。不只是版本數字的增加，而是 Vite 從「一個開發伺服器」進化成「一個開放給整個生態系的開發工具鏈基礎設施」。

Vite 6 必知的三個重大變更

1. 預設瀏覽器目標升級

Vite 6 的 build.target 預設值從 baseline-widely-available（基於 Chrome 107）調整為更新的瀏覽器版本：

瀏覽器	Vite 5 預設	Vite 6 預設
Chrome	107	111
Edge	107	111
Firefox	104	114
Safari	16.0	16.4

這個改變的意義是：Vite 6 預設不再轉譯（downlevel）這些瀏覽器已支援的 JavaScript 語法。你的輸出 bundle 會更小，執行效能會更好——但前提是你的用戶使用的瀏覽器版本夠新。

如果你的產品需要支援舊版瀏覽器，你需要在 vite.config.ts 中明確指定：

// vite.config.ts
export default defineConfig({
  build: {
    // 如果你需要支援舊瀏覽器，手動設定目標
    target: ['es2020', 'chrome100', 'firefox100', 'safari15']
  }
})

建議：大多數面向消費者的 Web 應用，可以直接使用 Vite 6 的新預設值。如果你發現 User Agent 分析顯示用戶瀏覽器版本足夠新，這是一次免費的效能提升。

2. Node.js 支援範圍調整

Vite 6 支援 Node.js 18、20 和 22+。Node.js 21 的支援已被移除。

# 確認你的 Node.js 版本
node --version
# 如果是 v21.x，需要升級到 v20 LTS 或 v22+

# 建議使用 nvm 管理版本
nvm install 22
nvm use 22

Node.js 18 的 EOL（End of Life）在 2025 年 4 月底。Vite 團隊表示，之後可能會發布新的 major release 來移除 Node.js 18 的支援。如果你還在用 Node.js 18，現在是開始規劃升級的時候了。

3. Environment API（實驗性）：框架作者的新武器

Vite 6 最重要的新功能是 Environment API。這是一個實驗性功能，主要面向框架作者，但理解它的意義，可以幫你理解為什麼 Vite 的未來如此值得期待。

過去的問題：Vite 的單一環境模型（client-side）在開發 SSR 應用時，有根本性的限制。開發伺服器只有一個環境，而 production 可能需要多個環境（client、server、edge worker）。過去框架作者必須繞過 Vite 的限制，自行處理這個問題。

Vite 6 的解決方案：Environment API 讓框架作者可以定義多個環境，每個環境有自己的模組圖（module graph）和 HMR 策略：

// vite.config.ts（框架作者的使用範例）
export default defineConfig({
  // 為 SSR 應用程式定義多個環境
  environments: {
    client: {},
    ssr: {
      resolve: {
        conditions: ['browser']
      }
    },
    edge: {
      resolve: {
        // Edge Runtime 的特殊處理
        conditions: ['workerd', 'browser']
      }
    }
  }
})

對於一般的 SPA 應用開發者來說，什麼都不需要改變。如果你使用 Nuxt、SvelteKit、Astro 這類框架升級到支援 Vite 6 的版本，這些框架會自動處理 Environment API 的複雜性，你只會感受到：更好的 HMR、更一致的開發/生產一致性，以及更快的 cold start。

如果你有興趣深入了解，Vite 團隊的 Sapphi 寫了一篇 Introduction to Environment API，是很好的切入點。

Vite 6 的生態系亮點

VoidZero：Evan You 的新公司

Vite 6 發布同時，Evan You 宣布了 VoidZero——一家專注於構建高性能、統一 JavaScript 開發工具鏈的開源公司。VoidZero 團隊是 Rolldown 和 Oxc 的幕後團隊：

Rolldown：用 Rust 寫的 Rollup 相容 bundler，比 Rollup 快 10 倍
Oxc：用 Rust 寫的 JavaScript 工具鏈（parser、transformer、linter），涵蓋了 esbuild 的大部分功能

這些工具將會是 Vite 7+ 的核心。Vite 6 是這個過渡期的最後一個以 esbuild 為主要構建工具的版本。

Vitest 生態爆發

Vitest 不只是被更多用戶採用——它正在形成自己的生態系。Storybook 最新的測試功能已基於 Vitest構建，這是對 Vitest 成熟度的重大肯定。

bolt.new：AI + WebContainers

StackBlitz 在 ViteConf 發布了 bolt.new，將 Claude 的 AI 能力與 WebContainers（完全在瀏覽器中運行的 Node.js 環境）結合，讓用戶可以通過自然語言 prompt 來創建、開發、運行和部署全端應用。

從 Vite 5 升級到 Vite 6：遷移步驟

第一步：檢查 Node.js 版本

node --version
# 確認是 v18、v20 或 v22+

第二步：更新 package.json

# 使用 npm
npm install vite@6 --save-dev

# 或使用 pnpm
pnpm add -D vite@6

# 或使用 yarn
yarn add -D vite@6

第三步：檢查插件相容性

# 檢查你的 Vite 插件是否支援 Vite 6
# 常见需要升级的插件：
npm install vite-plugin-react@latest --save-dev   # React 插件
npm install vite-plugin-vue@latest --save-dev     # Vue 插件
npm install @vitejs/plugin-legacy@latest --save-dev  # 舊瀏覽器支援

第四步：檢查預設瀏覽器目標

如果你需要支援舊版瀏覽器，在 vite.config.ts 中明確設定：

import { defineConfig } from 'vite'
import react from 'vite-plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    // 如果你需要支援舊瀏覽器
    target: 'es2020'
  }
})

第五步：執行構建測試

# 本地 development 模式
npm run dev

# production build
npm run build

# 本地預覽 production build
npm run preview

大多數 Vite 5 專案升級到 Vite 6 不需要任何程式碼改動。Vite 6 的預設配置與 Vite 5 向後兼容，只有使用 environment 設定或自訂 SSR 行為的進階應用需要做調整。

Vite 6 的效能實測

根據社群發布的 benchmark（ViteConf 2024 發布的數據）：

操作	Vite 5	Vite 6	改善幅度
Cold Start	基準	-15% ~ -30%	取決於專案大小
HMR（模組熱更新）	基準	-20% ~ -40%	取決於模組依賴深度
Production Build	基準	相近	esbuild 仍在 production 發揮核心作用

重要提醒：Vite 6 的開發環境效能提升主要來自於更好的優化（更好的 dev server 架構），而不是底層工具的更換。真正的底層工具替換（esbuild → Oxc/Rolldown）預計在 Vite 7 出現。

總結：要不要現在升級？

立即升級（推薦）：

你的目標用戶使用現代瀏覽器（Chrome 111+、Safari 16.4+、Firefox 114+、Edge 111+）
你的團隊使用 Node.js 20 或 22
你的專案使用 Astro、Nuxt（最新版本）、SvelteKit 或其他已支援 Vite 6 的框架
你的插件生態系已經支援 Vite 6

可以等一等：

你還在用 Node.js 18（等 Node.js 18 EOL 後一起升級）
你有大量舊版瀏覽器用戶，需要維持 target: es2015 之類的設定
你的專案有一些還沒有升級到 Vite 6 的關鍵插件

升級口號：npm install -D vite@6，多數情況下就完成了。