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

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

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

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

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

舉個例子：

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

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

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

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

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

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

如果你項目結(jié)構(gòu)是類似：

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

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

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

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

比如對裝飾器元數(shù)據(jù)的支持變得更完善：

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

再比如對現(xiàn)代 JSX 支持變得更自然：

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

不再強(qiáng)制用 className，React/Preact 用戶都能從中受益。

4. 自動 Polyfill（實驗性）

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

• URL
• Buffer
• crypto

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

比如：

import { randomUUID } from 'crypto';

console.log(randomUUID());

舊版本直接報錯?，F(xiàn)在開發(fā)階段自動 shim，不影響調(diào)試。

生產(chǎn)環(huán)境建議仍然使用 vite-plugin-node-polyfills 等插件顯式配置。

5. resolve.dedupe 行為更智能了

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

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

否則多個版本的 React 會導(dǎo)致 HMR 出現(xiàn)問題。

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

不過建議對 React 還是顯式寫 dedupe，更穩(wěn)。

6. 對 React Server Components 的預(yù)支持

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

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

總結(jié)

Vite 7 表面上看只是例行升級，實際上卻在底層打包、構(gòu)建效率、生態(tài)支持方面做了大量優(yōu)化。