浏览器&Websocket&热更新

热更新基本流程图

一、先明确：什么是热更新（HMR）？

热更新是指：在开发过程中，当代码发生修改并保存后，浏览器无需刷新整个页面，仅更新修改的模块（如组件、样式、逻辑等），同时保留页面当前状态（如表单输入、滚动位置、组件数据等）。

与传统的 "自动刷新"（如 live-reload）相比，HMR 的核心优势是：

局部更新：只替换修改的部分，不影响其他模块；
状态保留：避免因全页刷新导致的状态丢失；
速度极快：Vite 的 HMR 几乎是 "即时" 的（毫秒级）。

二、前端开发中：浏览器与开发服务器的 "连接基础"

要实现热更新，首先需要建立开发服务器 与浏览器之间的 "实时通信通道"，否则浏览器无法知道 "代码何时被修改了"。

在 Vite 中：

开发服务器（Vite Dev Server） ：启动项目时（vite dev），Vite 会在本地启动一个 HTTP 服务器（默认端口 5173），负责提供页面资源（HTML、JS、CSS 等），同时监听文件变化。
浏览器：通过 HTTP 协议访问开发服务器，加载并渲染页面。
通信桥梁 ：仅靠 HTTP 协议无法实现 "服务器主动通知浏览器"（HTTP 是 "请求 - 响应" 模式，服务器不能主动发消息），因此需要 WebSocket 建立 "双向通信通道"。

三、WebSocket：浏览器与服务器的 "实时对讲机"

WebSocket 是一种全双工通信协议，允许客户端（浏览器）和服务器在建立连接后，双向实时发送消息（无需客户端反复请求）。这是热更新的 "通信核心"。

在 Vite 中，WebSocket 的作用是：

服务器监听文件变化，当文件被修改时，通过 WebSocket 向浏览器 "发送更新通知"；
浏览器收到通知后，通过 WebSocket 向服务器 "请求更新的模块内容"；
双方通过 WebSocket 交换 "更新信息"（如哪个模块变了、新模块的地址等）。

四、Vite 热更新的完整流程（一步一步拆解）

假设我们在开发一个 Vue 项目，修改了 src/components/Hello.vue 并保存，Vite 的热更新流程如下：

步骤 1：Vite 开发服务器监听文件变化

Vite 启动时，会通过 chokidar 库（文件监听工具）对项目目录（如 src/）进行监听，实时检测文件的创建、修改、删除等操作。
当我们修改并保存 Hello.vue 时，文件系统会触发 "修改事件"，Vite 服务器立刻感知到：src/components/Hello.vue 发生了变化。

步骤 2：Vite 服务器编译 "变更模块"（而非全量编译）

Vite 基于 "原生 ESM（ES 模块）" 工作：开发时不会打包所有文件，而是让浏览器直接通过 <script type="module"> 加载模块。
当 Hello.vue 被修改后，Vite 只会重新编译这个单文件组件（.vue 文件）：
- 解析模板（template）生成渲染函数；
- 处理脚本（script）和样式（style）；
- 生成该组件的 "更新后模块内容"，并标记其唯一标识（如 id=123）。
同时，Vite 会分析 "依赖关系"：判断哪些模块依赖了 Hello.vue（比如父组件、页面等），确定需要更新的 "模块范围"。

步骤 3：服务器通过 WebSocket 向浏览器发送 "更新通知"

Vite 服务器内置了 WebSocket 服务（默认路径为 ws://localhost:5173/ws），浏览器加载页面时，会自动通过 JavaScript 连接这个 WebSocket。

服务器将 "变更信息" 通过 WebSocket 发送给浏览器，信息格式类似：

json 复制代码

{
  "type": "update", // 类型：更新
  "updates": [
    {
      "type": "js-update", // 更新类型：JS 模块
      "path": "/src/components/Hello.vue", // 变更文件路径
      "acceptedPath": "/src/components/Hello.vue",
      "timestamp": 1699999999999 // 时间戳（避免缓存）
    }
  ]
}

这个消息告诉浏览器：Hello.vue 模块更新了，需要处理。

步骤 4：浏览器接收通知，请求 "更新的模块内容"

浏览器的 Vite 客户端（Vite 注入的 HMR 运行时脚本）接收到 WebSocket 消息后，解析出需要更新的模块路径（Hello.vue）。
客户端通过 HTTP 请求（而非 WebSocket）向服务器获取 "更新后的模块内容"，请求地址类似：
bash 复制代码
```
http://localhost:5173/src/components/Hello.vue?t=1699999999999
```
（t 参数是时间戳，用于避免浏览器缓存旧内容）。

步骤 5：浏览器 "替换旧模块" 并 "局部更新视图"

客户端拿到新的 Hello.vue 模块内容后，会执行 "模块替换"：
- 对于 Vue 组件，Vite 会利用 Vue 的 defineComponent 和热更新 API（import.meta.hot），将旧组件的实例替换为新组件的实例；
- 保留组件的状态（如 data 中的数据），仅更新模板、样式或逻辑；
- 对于样式文件（如 .css），会直接替换 <style> 标签内容，无需重新渲染组件。
替换完成后，Vue 的虚拟 DOM 会对比新旧节点，只更新页面中受影响的部分（如 Hello.vue 对应的 DOM 区域），实现 "局部刷新"。

步骤 6：处理 "无法热更新" 的情况（降级为刷新）

某些场景下（如修改了入口文件 main.js、路由配置、全局状态等），模块依赖关系过于复杂，无法安全地局部更新。
此时 Vite 会通过 WebSocket 发送 "全页刷新" 指令，浏览器收到后执行 location.reload()，确保代码更新生效。

五、关键技术点：Vite 如何实现 "极速 HMR"？

原生 ESM 按需加载：开发时不打包，浏览器直接加载模块，修改后只需重新编译单个模块，而非整个包（对比 Webpack 的 "打包后更新" 快得多）。
精确的依赖分析 ：Vite 会跟踪模块间的依赖关系（通过 import 语句），修改一个模块时，只通知依赖它的模块更新，范围最小化。
轻量的客户端运行时：Vite 向浏览器注入的 HMR 脚本非常精简，仅负责接收通知、请求新模块、替换旧模块，逻辑高效。
与框架深度集成 ：针对 Vue、React 等框架，Vite 提供了专门的 HMR 处理逻辑（如 Vue 的 @vitejs/plugin-vue 插件），确保组件状态正确保留。

总结：Vite 热更新的核心链路

复制代码

文件修改（保存）
  ↓
Vite 服务器监听文件变化
  ↓
编译变更模块（仅修改的文件）
  ↓
WebSocket 发送更新通知（告诉浏览器"哪个模块变了"）
  ↓
浏览器通过 HTTP 请求新模块内容
  ↓
替换旧模块，框架（如 Vue）局部更新视图
  ↓
页面更新完成（状态保留，无需全量刷新）

场景假设：你修改了 `src/App.vue` 并保存

1. Vite 脚手架确实内置了 WebSocket 服务

当你运行 vite dev 时，Vite 会同时启动两个服务：
- HTTP 服务 ：默认 http://localhost:5173，负责给浏览器提供页面、JS、CSS 等资源（比如你在浏览器输入这个地址就能看到项目）。
- WebSocket 服务 ：默认 ws://localhost:5173/ws，专门用来和浏览器 "实时聊天"（双向通信）。
浏览器打开项目页面时，会自动通过一段 Vite 注入的 JS 代码，连接这个 WebSocket（相当于浏览器和服务器之间架了一根 "实时电话线"）。

2. 当文件变化时，Vite 先 "发现变化"，再通过 WebSocket 喊一声 "有东西改了！"

你修改 App.vue 并按 Ctrl+S 保存：
- Vite 会通过文件监听工具（类似 "监控摄像头"）立刻发现 App.vue 变了。
- 它会快速处理这个文件（比如编译 Vue 模板、处理样式），生成 "更新后的内容"，并记下来 "是 App.vue 这个文件变了"。
然后，Vite 通过 WebSocket 给浏览器发一条消息（就像打电话通知）：
json 复制代码
```
{
  "type": "update",
  "updates": [{"path": "/src/App.vue", "timestamp": 123456}]
}
```
翻译成人话："喂，浏览器！src/App.vue 这个文件刚刚改了，赶紧处理一下！"

3. 浏览器收到通知后，用 HTTP 请求 "主动要新内容"

浏览器接收到 WebSocket 的消息后，知道了 "App.vue 变了"，但此时它还没有新内容。
于是浏览器会通过 HTTP 协议，向 Vite 的 HTTP 服务发一个请求，要新的 App.vue 内容：
bash 复制代码
```
GET http://localhost:5173/src/App.vue?t=123456
```
（t=123456 是时间戳，确保拿到的是最新的，不是缓存的旧内容）。
Vite 的 HTTP 服务收到请求后，把刚才处理好的 "更新后的 App.vue 内容" 返回给浏览器。

4. 浏览器拿到新内容，局部更新页面

浏览器收到新的 App.vue 代码后，会：
- 丢掉旧的 App.vue 模块（但保留组件状态，比如输入框里的文字）。
- 用新代码替换，并重新渲染 App.vue 对应的页面部分（不会刷新整个页面）。
最终你看到的效果：页面上只有 App.vue 相关的部分变了，其他内容和状态都没变。

一句话总结核心流程