Vite 6 的新特性：Environment API 和更快的 HMR

Vite 6 发布了，这次更新的重头戏是 Environment API。如果你做 SSR 或者有多运行时需求（比如 service worker），这个特性会很有用。 ## Environment API 以前 Vite 只能区分 "client" 和 "server" 两个环境。现在你可以定义任意数量的环境： ```javascript // vite.config.js export default { environments: { client: { build: { outDir: 'dist/client' }, }, server: { build: { outDir: 'dist/server', ssr: true }, }, worker: { build: { outDir: 'dist/worker' }, webCompatible: true, }, }, } ``` 每个环境可以有自己的插件、解析规则和构建配置。对于需要同时输出多种产物的项目（比如 SSR + Service Worker + Edge Function）来说，这个功能太实用了。 ## HMR 改进 Vite 6 的 HMR 做了几个优化： ### 1. 更精确的模块失效 以前改一个 CSS 文件可能会触发整个模块树的重新加载。现在 Vite 能更精确地判断影响范围，只更新真正受影响的模块。 ### 2. 循环依赖处理 以前遇到循环依赖时 HMR 经常失效，需要手动刷新。Vite 6 改进了循环依赖的处理逻辑，大部分情况下都能正常热更新了。 ### 3. CSS HMR 优化 CSS 的热更新现在是真正的"增量更新"——只替换变化的规则，不重新加载整个样式表。在大型项目中差别很明显。 ## SSR 改进 ```javascript // 服务端代码可以直接 import 客户端模块的类型 import type { ClientModule } from './client-module'; // 运行时根据环境选择正确的实现 const module = import.meta.env.SSR ? await import('./server-impl') : await import('./client-impl'); ``` ## 从 Vite 5 升级 升级基本上是平滑的： ```bash npm install vite@latest ``` Breaking changes 很少，主要是： - `server.middlewareMode` 的默认值变了 - 一些内部 API 的类型签名更新了 如果你没有使用底层 API，升级应该是无感的。 ## Vite vs Webpack 现在还在用 Webpack 的项目，迁移到 Vite 的理由又多了一个。Vite 6 在 DX（开发者体验）上的领先越来越明显： - 开发服务器启动：秒级 vs 分钟级 - HMR：毫秒级 vs 秒级 - 配置复杂度：简单很多 唯一还需要 Webpack 的场景是需要 Module Federation 的微前端项目，但 Vite 的 Module Federation 插件也在快速成熟中。