最近 Vite 推出了 7.0 正式版。作為一個主力開發工具，這次更新并不是普通的“修 bug 式”版本，而是有一些值得開發者特別注意的重要升級點。

我第一時間把自己的幾個項目升上去了，踩了幾個坑，也收獲了一些「真香」瞬間。這篇文章就來和你分享 Vite 7 到底改了啥，有哪些更新是你不升級都對不起自己的。

1. 核心打包器升級：Rollup 4.x

Vite 7 把底層打包器從 Rollup 3 升級到了 Rollup 4。這是整個生態的一次大升級，最大的感受是打包更干凈、chunk 拆分更合理了。

之前我的組件庫打包體積約為 145kb，升級后直接減少到 132kb，不改一行業務代碼。

舉個例子：

// utils.ts
export const unusedFn = () => console.log('never used');

在舊版本中，unusedFn 有時會因為副作用分析不精準而被打進去。Rollup 4 的 Tree-shaking 更可靠，直接干掉這些“冗余”。

注意：如果你寫了 Rollup 插件，可能需要升級適配 Rollup 4 的新 API，尤其是鉤子 generateBundle、outputOptions。

2. HMR 更聰明了，重載更少了

Vite 的熱更新體驗一直不錯，這次又做了優化。

• Monorepo 下更新 utils 包，不會影響整個項目頁面重載
• 依賴追蹤更精準，父模塊不會無腦 reload

如果你項目結構是類似：

/packages
  /web-app
  /ui-lib
  /utils

只改 utils，Vite 會精準更新引用模塊，不再 reload 整頁，提高開發效率特別明顯。

3. ESBuild 升級到 0.21，支持更新語法

Vite 內置的構建工具 ESBuild 升級到了 v0.21。這個版本支持了一些新的 TypeScript 與 JS 語法，使用新版 TS 不再有兼容性擔憂。

比如對裝飾器元數據的支持變得更完善：

@Logger()
class MyService {
  // ...
}

再比如對現代 JSX 支持變得更自然：

// JSX 里可以直接使用 class
return <div class="container">Hello</div>;

不再強制用 className，React/Preact 用戶都能從中受益。

4. 自動 Polyfill（實驗性）

Vite 7 開始在開發階段支持了一些 自動 Polyfill 功能，比如：

• URL
• Buffer
• crypto

這意味著有些依賴 Node API 的三方庫，在瀏覽器中也不會直接炸了。

比如：

import { randomUUID } from 'crypto';

console.log(randomUUID());

舊版本直接報錯。現在開發階段自動 shim，不影響調試。

生產環境建議仍然使用 vite-plugin-node-polyfills 等插件顯式配置。

5. resolve.dedupe 行為更智能了

Vite 在處理多包依賴時，有時需要手動寫：

resolve: {
  dedupe: ['react', 'react-dom']
}

否則多個版本的 React 會導致 HMR 出現問題。

Vite 7 的新行為是：如果多個包中存在相同依賴，默認會自動合并處理 dedupe，尤其是在使用 pnpm 或 yarn workspaces 的時候，提升了不少穩定性。

不過建議對 React 還是顯式寫 dedupe，更穩。

6. 對 React Server Components 的預支持

這不是主打功能，但我在試驗項目中發現：Vite 7 已經可以識別 .server.js 和 .client.js 后綴，嘗試支持 React Server Components。

雖然暫時還沒有官方文檔，但這也說明 Vite 正在往這個方向靠近，也許未來我們真的可以不用 Next.js 開 RSC 項目了。

總結

Vite 7 表面上看只是例行升級，實際上卻在底層打包、構建效率、生態支持方面做了大量優化。