认识 Vite：为什么开发体验这么快

本节目标

传统打包器（Webpack 早期）启动时要先把整个项目打包一遍才能起开发服务器——项目一大，冷启动等几十秒是常态。Vite 的思路完全不同：它利用浏览器原生 ESM，开发时「不打包」，只按需编译浏览器真正请求到的模块。

# 运行环境：Node.js 18+；用官方脚手架 30 秒起一个项目
# npm create vite@latest my-vite-app -- --template vanilla
# cd my-vite-app
# npm install
# npm run dev        # 启动开发服务器（默认 http://localhost:5173）

启动后，浏览器直接请求 /src/main.js，Vite 才「即时」把它和依赖编译成浏览器能跑的 ESM 返回。首次请求可能稍慢（要编译），但之后改动只重新编译那一个文件，热更新几乎瞬时。

对比一下心智模型：

传统打包器：启动 = 打包整个应用（慢）→ 起服务 → 改文件 = 重新打包相关部分
Vite：启动 = 只起一个轻服务（快）→ 浏览器请求谁，才编译谁 → 改文件 = 只编译那一个

所以 Vite 的「快」不是魔法，而是把「打包」从「启动时」推迟到了「按需时」，并依赖浏览器原生 ESM 省掉了大量兼容转换。生产构建时 Vite 仍会用 Rollup 完整打包（保证产物最优），开发时则靠 ESM 跳过这步。

名词解释

原生 ESM（Native ES Modules）：浏览器内置的 import/export 模块能力，无需打包就能加载模块。Vite 开发服务器正是把模块以 ESM 形式直接发给浏览器。

按需编译（On-demand Compile）：浏览器请求哪个模块，Vite 才编译哪个，而不是一次性全量编译。这是开发快的核心。

冷启动（Cold Start）：项目第一次启动开发服务器到可访问的耗时。Vite 因为不预打包，冷启动极快。

Rollup：Vite 生产构建底层使用的打包器，以「产出体积小、Tree Shaking 强」著称。

课后练习

练习 1：Vite 开发时不打包，那第三方依赖（如 react）几十上百个文件，浏览器不会发几十个请求吗？

答案：会，但 Vite 用「依赖预构建」把它化解了——首次启动时把 node_modules 里的 CJS 依赖（如 react）用 esbuild 预打包成少数几个 ESM 文件并强缓存，浏览器只需请求这几个，不会爆量。详见下一节。

练习 2：既然开发不打包，为什么生产构建还要用 Rollup 完整打包？

答案：开发追求「快和即时」，生产追求「小和兼容」。Rollup 能做更彻底的 Tree Shaking、代码分割、兼容降级，产出最优静态资源；这些优化在开发时做会拖慢反馈，所以只在构建时做。

总结

Vite 的快，本质是**「开发靠浏览器原生 ESM 跳过打包，生产靠 Rollup 兜底优化」**的分工。入门你只需记住：它把最重的「全量打包」从启动时挪走了，所以冷启动和改文件都飞快。下一节我们拆开看「原生 ESM + 依赖预构建」这套组合拳到底怎么运作。