Vite 7 正式发布，这些升级值得一看！

最近 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 表面上看只是例行升级，实际上却在底层打包、构建效率、生态支持方面做了大量优化。

关注微信公众号" 前端历险记"，掌握更多前端开发干货姿势！