深入理解 Vite 的打包机制

要深入理解 Vite 的打包机制，我们需要分两个维度来看：开发环境（Dev）的“非打包”模式，以及生产环境（Build）的“统一打包”模式。

随着 Vite 8（2026年主流版本）的发布，Vite 完成了从“esbuild + Rollup”双引擎向 Rolldown 统一引擎的重大跨越。

开发环境：从“不打包”到“按需实时转换”

传统的打包工具（如 Webpack）在启动开发服务器前，必须先扫描整个依赖图并进行打包。而 Vite 采用了截然不同的 No-Bundle 哲学：

原生 ESM 驱动

Vite 充分利用了现代浏览器对原生 ES Modules (ESM) 的支持。当你打开页面时：

1. 浏览器遇到 import 语句，会直接向 Vite 开发服务器发起 HTTP 请求。
2. Vite 只在 请求到达时 才对该文件进行转换（比如将 TS 转为 JS，或者处理 CSS Modules）。
3. 这使得服务器启动速度与项目大小解耦，无论项目多大，启动都是毫秒级的。

依赖预构建 (Dependency Pre-bundling)

虽然源码是按需加载的，但第三方库（如 React、lodash）通常有成百上千个内部模块。如果浏览器发起几千个请求，性能会崩溃。

• Vite 8 做法：使用 Rolldown（基于 Rust）自动将这些分散的依赖打包成单个或少数几个 ESM 模块。
• 目的：一是减少网络请求，二是将 CommonJS/UMD 转换为浏览器能识