核心判断
Vite 的核心范式是开发阶段的按需编译：它把浏览器原生 ESM 作为开发入口，让模块在被请求时才由开发服务器即时转换。
它并不是取消打包，而是把开发时反馈速度与生产时产物优化拆开处理：开发阶段按需服务模块，生产阶段仍通过 Rollup 等打包能力生成可部署产物。
这个主题要回答的问题
- Vite 如何借助原生 ESM 避免在开发启动时预先打包整个应用？
- 开发服务器、模块请求、依赖预构建和 HMR 在 Vite 流程中如何协同？
- Vite 为什么开发阶段按需编译，生产阶段仍然需要整体打包？
主题结构
- HTML 作为应用入口：Vite 默认面向 Web 应用，把
index.html中的<script type="module">视为模块图入口，而不是把 JavaScript 文件单独当作唯一入口。 - 原生 ESM 推动模块图渐进展开：浏览器请求入口模块后，会继续根据 import 链条发起后续模块请求，使开发时处理路径由真实访问路径驱动。
- 开发服务器即时转换被请求模块：原生 ESM 驱动的按需编译让启动成本不再等同于完整应用构建成本。
- 依赖预构建隔离稳定第三方依赖：Vite 会把变化少、模块数量多的依赖先预构建，减少浏览器请求数量，并把应用源码的频繁变化与依赖处理分开。
- HMR 聚焦局部反馈路径：模块更新只需要沿着实际受影响的模块边界传播，减少完整重建带来的等待。
- 生产构建回到整体产物优化：部署场景需要压缩、兼容性、代码分割、缓存命名和资源调度，因此仍需要 Rollup 一类的打包流程。
相关概念 / 下层卡片
- 原生 ESM 驱动的按需编译：解释 Vite 如何把编译时机推迟到浏览器请求发生时。
- 插件化增强构建能力：解释 Vite 如何复用插件机制，把框架语法、样式和生产优化逐步接入构建流程。
相关入口
- 构建工具演进中的按需编译阶段：把 Vite 放回构建工具从预整合走向按需调度的主线中理解。
- 预整合范式的对照入口：用 Webpack 对照 Vite，能看清构建工具如何从完整图谱预处理转向请求驱动的模块服务。
暂时结论
Vite 的关键变化不是“更快的 Webpack”，而是把开发阶段的工作模式从完整预构建改为请求驱动的模块服务。理解 Vite，要抓住“HTML 入口 → 浏览器 ESM 请求 → 开发服务器即时转换 → HMR 局部反馈 → 生产整体打包”这条分工链路。