下一代前端构建演进：Vite 6 Environment API 与 Rolldown / Oxc 如何统一开发与生产双引擎架构？
早期 Vite（v2～v5）采用 “开发期 esbuild（预构建与转译）+ 生产期 Rollup（打包）+ Terser/esbuild（压缩）” 的多引擎拼装架构。随着 Vite 6 Environment API 与基于 Rust 的 Rolldown + Oxc 工具链 落地，前端构建正在迈入统一单引擎时代。
一、 传统 Vite 双引擎架构的痛点与 Rolldown + Oxc 的破局
| 架构痛点 | 早期 Vite（esbuild + Rollup 双引擎） | 新一代 Vite（Rolldown + Oxc 统一 Rust 引擎） |
|---|---|---|
| 开发与生产行为不一致 | 开发期用 esbuild 预构建，生产期用 Rollup 打包，偶发“本地 npm run dev 正常、上线 npm run build 报错或循环依赖表现不一致” |
开发期预构建与生产期打包全部统一由 Rolldown 驱动，消除了双引擎语义鸿沟 |
| 多次 AST 解析与跨语言开销 | JS 插件与 Rollup/esbuild 之间频繁序列化源码字符串，重复解析 AST | Rolldown 内置 Oxc（目前最快的 Rust 词法/语法解析器、转换器与压缩器），一次解析全程共享 AST，生产构建提速 10～30 倍 |
| 多运行时环境配置割裂 | 过去只区分 client 与 ssr 两个硬编码环境，难以在同一个 Vite 实例中同时跑浏览器客户端、Node SSR 与 Cloudflare Workers Edge |
Vite 6 Environment API 支持在同一台 Dev Server 中声明任意多个具有独立模块图（ModuleGraph）与解析规则的自定义运行环境 |
二、 Vite 6 Environment API 多环境配置代码示例
// vite.config.js：使用 Vite 6 Environment API 在单次开发中同时编排浏览器客户端、Node API 与 Edge Worker
import { defineConfig } from 'vite'
export default defineConfig({
environments: {
client: {
build: { outDir: 'dist/client' }
},
ssr: {
resolve: { conditions: ['node', 'import'] },
build: { outDir: 'dist/server', ssr: 'src/entry-server.ts' }
},
edge_worker: {
// 针对 Cloudflare Workers / Web 边缘运行时的独立模块图与条件导出解析
resolve: { conditions: ['workerd', 'worker', 'browser'], noExternal: true },
build: { outDir: 'dist/edge' }
}
}
})