深入理解 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 转换为浏览器能识