⚡ 30 秒速记

• 核心判断：HMR 通过文件监听、增量编译、更新通知和运行时模块替换保留页面状态
• 原理主线：围绕 「Vite 的定义」、「快速上手」、「实现原理」 建立输入、状态变化与输出之间的因果关系
• 文章范围：系统介绍了 Vite 的核心原理、与 Webpack 等传统构建工具的差异、上手体验及其在现代前端开发中的优势，帮助开发者理解 Vite 如何通过原生 ES Modules 实现更快的冷启动和高效的热更新，提升开发效率。
• 边界与代价：依赖边界拒绝更新或副作用无法安全重放时必须回退刷新；开发期热替换不属于生产运行逻辑
• 工程落地：排障应沿文件是否被监听、哈希是否变化、客户端是否收到更新、accept 边界是否成立逐段检查

Vite 在开发阶段利用浏览器原生 ES Modules 按请求编译模块，因此启动和热更新不必先打完整个应用。 它把项目目录作为静态服务根目录，拦截依赖和 .vue 文件请求，并通过 WebSocket 推送更新。第三方依赖可以提前优化成 ESM bundle，业务文件则按需处理，避免编译暂时用不到的模块。生产环境仍通过 vite build 交给 Rollup 打包，所以“开发时不打包”不等于上线时完全不构建。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。

Vite 的定义

Vite 是面向现代浏览器的一个更轻、更快的 Web 应用开发工具，核心基于 ECMAScript 标准原生模块系统（ES Modules）实现。

表象功能上看，Vite 可以取代基于 Webpack 的 vue-cli 或者 cra 的集成式开发工具，提供全新的一种开发体验。

具体细节往下看。

Vite 的由来

在此之前，如果我们所开发的应用比较复杂（代码量偏大），使用 Webpack 的开发过程相对没有那么「丝滑」，具体表现为以下两点：

• Webpack Dev Server 冷启动时间会比较长，稍大一点的项目启动开发服务都需要等待 10 - 20 秒；
• Webpack HMR 热更新的反应速度比较慢，修改完代码需要等待编译器全部编译完成才能开始同步到浏览器；