Vite 的热geng新本质上是基于浏览器原生 ES Modules 和 WebSocket 通信实现的，哈哈，它仅geng新被修改的模块及其相关依赖，而不是刷新整个页面。

说实话，Vite 对比 Webpack，彻底摒弃全量打包geng新逻辑，从底层编译和geng新机制上实现了开发体验的大幅升级，你懂的。

特殊规则咱就是说要记牢：配置文件、环境变量文件修改需重启服务，仅业务文件支持局部热geng新；

经过前面几篇铺垫之后,接下来kan下 Vite 的热geng新原理，先搞清楚前置流程图。

当客户端执行main.ts时,调用/@vite/client的createHotContext函数，这个过程hen关键。

Vite利用ES模块的浏览器原生支持,实现了闪电般的冷启动和热geng新，这个特性太棒了。

当一个模块被修改时Vite 会沿着依赖链向上寻找，直到找到一个调用了 import.meta.hot.accept 的模块，这个模块就是热geng新边界。

服务端Vite 启动时会在本地创建一个 WebSocket 服务器，持续监听本地文件系统的变化，不错吧。

客户端Vite 会在注入浏览器的客户端中建立 WebSocket 连接，保持长连接状态，随时准备接收服务端的消息，你Ke以理解为一个消息通道。

Vite 的热geng新是一个服务端与客户端双向奔赴的过程，整个链路Ke以拆分为以下四个关键阶段：

──> │ ▼ <──

当 Vite 监听到本地文件被修改时会根据文件类型触发不同的妥协策略，比如CSS geng新就无需模块边界，简单直接。

Vite 热geng新的核心基石：浏览器原生 ESModule + WebSocket + esbuild 极速编译；这三者的结合简直完美。

计算热geng新边界 ：Vite 会根据模块的依赖图，逆向追踪到Neng够接受这次变geng的Zui小模块范围，确定“受影响的Zui小边界”，确保只推送必要的内容，这效率简直没得说。

Vite同样也是实现了对应的热geng新逻辑,并且热geng新的速度geng是达到了毫秒级别;Ke以根据流程图先对原理有个大概的了解。

精准编译Vite 不需要像 Webpack 那样重新打包整个 Bundle，它利用 Vite Plugin 容器按需对当前修改的单个文件进行转换，这个过程hen快。

#顺便说一下有人问为什么百度不收录某些网站的内容？主要原因是网站内容质量、结构化数据、robots.txt 配置等多种因素影响收录情况，得具体问题具体分析哈~#

.在现代化前端开发中,Vite 凭借其极速的热geng新Neng力成为开发者首选工具，这也是为什么它这么受欢迎的原因吧。

.体现在代码中就是我们在Vite的配置文件-Vite.config.ts中会有一个单独的字段 -server，geng详细的解释Ke以参kan相关文档，不对不对，应该是官方文档哈~

Vite 热geng新的核心优势在于“快”与“准”！