#Vite 生产环境构建

#1. 面试题

Q: 如果 Vite 开发时用 Esbuild，生产时也用吗？为什么生产环境打包使用的是 Rollup？

#2. 核心解答

Vite 的双重架构 极其重要。

• 开发环境 (Dev): 使用 Esbuild (Go) 进行预构建，提供给浏览器原生 ESM 加载。极速冷启动。
• 生产环境 (Prod): 使用 Rollup (JS) 进行最终打包，生成更加优化的构建产物。

#(1) 为什么不用 Esbuild 打包生产？

虽然 Esbuild 很快，但它目前还不具备一些高级的构建特性：

• Code Splitting (代码分割)：对于动态导入 (import()) 和 chunk 分割的支持还不够完美。Vite 团队认为这对于生产部署是不可接受的。
• CSS处理：CSS 压缩和提取 (Extract) 比较弱。
• 生态插件：Rollup 拥有庞大的插件生态系统，能够针对特定场景进行更深度的优化。

#(2) 未来展望

Vite 团队的目标是有一天能完全用 Rolldown (用 Rust 重写的 Rollup) 进行构建，统一开发与生产环境，但这还需要时间。目前阶段，Rollup 依然是生产打包的最佳选择。

#(3) 构建优化配置 (Config)

Vite 生产构建默认开启：

• Minification (压缩)：使用 Esbuild 或 Terser (可选)。
• Module Preload (模块预加载)：自动生成 <link rel="modulepreload"> 标签。
• Async Chunk Loading (异步 chunk 加载)：只有用到时才请求 JS。
• CSS Code Split (CSS 代码分割)：按需提取 CSS。

#3. 面试加分项

#Q: Rollup 的 Tree Shaking 为什么比 Webpack 强？

因为 Rollup 是基于 ESM 的静态分析设计的。它的 Tree Shaking 是默认开启且极其激进的。它利用了 ESM 的不可变性，只有显式 export 的代码会被保留，任何没有被引用的变量都会在打包阶段被剔除。这是 ESM 相对于 CommonJS 最大的优势。

#4. 总结

• Dev: Esbuild for speed.
• Prod: Rollup for optimized output (Code Splitting, Tree Shaking).
• Future: Rolldown (Rust).