Vue 3源码极客之：`Vite`的`HMR`：如何通过`WebSocket`实现模块热更新，并保持状态。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，早上好/中午好/晚上好！我是今天的主讲人，咱们今天就来聊聊Vite HMR的那些事儿，保证让你听完之后，感觉自己也能撸一个简单的HMR出来。

什么是HMR？为什么要用它？

首先，咱们得搞清楚HMR是啥玩意儿。HMR，全称Hot Module Replacement，中文名叫模块热替换。这名字听着就高大上，实际上干的事儿也很实在：在应用程序运行的时候，替换掉模块，而不用刷新整个页面。

想想你写代码的时候，改了一行CSS，然后默默地刷新一下浏览器，等待整个页面重新加载，是不是很烦？有了HMR，你改完CSS，页面上的效果立马就变了，跟变魔术一样。这对于前端开发效率的提升，那可不是一点半点。

简单来说，HMR的优势就是：

快：不用刷新整个页面，只更新修改的部分。
爽：保持应用状态，告别数据丢失的烦恼。

Vite HMR的架构概览

Vite的HMR机制，简单来说，分为三个部分：

Vite Server (Backend): 负责监听文件变化，编译模块，并通知客户端更新。
HMR Client (Frontend): 运行在浏览器端，接收服务器的更新通知，并执行模块替换。
HMR API: 由框架/库 (如Vue, React) 提供，用于处理模块的更新逻辑，保持组件状态。

这三者之间的关系，可以用一张图来表示：

+---------------------+       +---------------------+       +---------------------+
|    Vite Server      | ----> |    HMR Client       | ----> |    HMR API          |
| (Node.js)           |       | (Browser)           |       | (Framework/Library)|
+---------------------+       +---------------------+       +---------------------+
|  - File Watcher    |       |  - WebSocket        |       |  - Vue Component   |
|  - Module Compiler |       |  - Module Re-import  |       |  - React Component |
|  - HMR Protocol    |       |  - Update Handlers   |       |  - ...             |
+---------------------+       +---------------------+       +---------------------+

WebSocket：HMR的信使

WebSocket是HMR的核心通信机制。它提供了一个在浏览器和服务器之间建立持久连接的通道，允许服务器主动向客户端推送数据。

Vite Server 启动时，会创建一个WebSocket Server。HMR Client 在页面加载时，会与这个WebSocket Server建立连接。

Vite Server (Backend) 的 WebSocket 代码示例 (简化版):

// Vite Server (简化版)
import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 5173 }); // 假设端口为 5173

wss.on('connection', ws => {
  console.log('Client connected');

  ws.on('message', message => {
    console.log('received: %s', message);
  });

  // 模拟文件变化，发送更新消息
  setInterval(() => {
    const payload = JSON.stringify({
      type: 'update',
      updates: [
        {
          path: '/src/App.vue',
          timestamp: Date.now(),
          acceptedPath: '/src/App.vue',
          type: 'js-update', // 或者 'css-update'
        },
      ],
    });
    ws.send(payload);
  }, 3000); // 每隔3秒模拟一次文件变化
});

console.log('WebSocket Server started on port 5173');

HMR Client (Frontend) 的 WebSocket 代码示例 (简化版):

// HMR Client (简化版)
const socket = new WebSocket('ws://localhost:5173'); // 假设端口为 5173

socket.onopen = () => {
  console.log('WebSocket connected');
};

socket.onmessage = event => {
  const payload = JSON.parse(event.data);

  if (payload.type === 'update') {
    payload.updates.forEach(update => {
      console.log('Received update:', update);
      // 这里需要调用框架/库提供的 HMR API 来更新模块
      // 例如，对于 Vue，可以这样：
      // import.meta.hot.accept(update.path, () => { ... });
      // 具体的 HMR API 调用方式取决于你使用的框架/库
    });
  }
};

socket.onclose = () => {
  console.log('WebSocket closed');
};

上面的代码只是一个极其简化的例子，真实的Vite HMR实现要复杂得多，但核心思想是一样的：通过WebSocket建立连接，服务器监听文件变化，然后向客户端发送更新消息。

模块热更新的流程

当Vite Server 监听到文件变化时，会执行以下步骤：

编译模块: 使用 Rollup 或 esbuild 等工具，将修改后的模块重新编译成新的代码。
构建更新消息: 创建一个包含更新信息的 JSON 对象，例如包含模块的路径、时间戳等。
通过 WebSocket 发送更新消息: 将 JSON 对象发送给 HMR Client。

HMR Client 接收到更新消息后，会执行以下步骤：

解析更新消息: 解析 JSON 对象，获取更新信息。
请求更新模块: 向服务器请求更新后的模块代码。
执行模块替换: 使用框架/库提供的 HMR API，替换掉旧的模块代码，并保持应用状态。

可以用一个表格来总结一下：

步骤	Vite Server (Backend)	HMR Client (Frontend)
1. 监听文件变化	使用 chokidar 等工具监听文件变化
2. 编译模块	使用 Rollup 或 esbuild 等工具编译模块
3. 构建更新消息	创建包含模块路径、时间戳等信息的 JSON 对象
4. 发送更新消息	通过 WebSocket 发送 JSON 对象
5. 接收更新消息		通过 WebSocket 接收 JSON 对象
6. 解析更新消息		解析 JSON 对象，获取更新信息
7. 请求更新模块		向服务器请求更新后的模块代码 (通常使用 `import()` 动态导入)
8. 执行模块替换		使用框架/库提供的 HMR API 替换模块，例如 `import.meta.hot.accept()` (Vue) 或 `module.hot.accept()` (React)

保持状态：HMR的灵魂

HMR 最重要的特性之一，就是能够在模块替换的过程中，保持应用的状态。如果没有状态保持，每次更新都相当于刷新整个页面，那 HMR 就失去了意义。

不同的框架/库，有不同的状态保持机制。我们以 Vue 为例，简单介绍一下 Vue 的 HMR 机制。

在 Vue 中，可以使用 import.meta.hot API 来处理 HMR 事件。例如：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};

if (import.meta.hot) {
  import.meta.hot.accept(() => {
    console.log('Component updated!');
    // 在这里可以执行一些额外的更新逻辑，例如更新组件实例的数据
  });
}
</script>

当这个组件被更新时，import.meta.hot.accept() 中的回调函数会被执行。你可以在这个回调函数中执行一些额外的更新逻辑，例如更新组件实例的数据，或者重新渲染组件。

Vite 默认会处理大部分的 HMR 逻辑，例如重新导入模块，更新组件实例等。但是，有些情况下，你可能需要手动处理一些 HMR 事件，例如当你的组件使用了全局状态管理 (例如 Vuex, Pinia) 时，你可能需要在 HMR 回调函数中更新全局状态。

代码示例：一个简单的计数器

为了更好地理解 HMR 的工作原理，我们来创建一个简单的计数器应用，并演示 HMR 的效果。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite HMR Demo</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

src/main.js:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

src/App.vue:

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment,
    };
  },
};

if (import.meta.hot) {
  import.meta.hot.accept(() => {
    console.log('Component updated!');
  });
}
</script>

在这个例子中，我们创建了一个简单的 Vue 组件，它包含一个计数器和一个按钮。当你点击按钮时，计数器的值会增加。

如果你使用 Vite 运行这个应用，然后修改 src/App.vue 文件，你会发现页面上的计数器会立即更新，而不会刷新整个页面。这就是 HMR 的效果。

你可以尝试修改 src/App.vue 文件中的模板，或者修改 increment 函数，看看 HMR 是如何工作的。

HMR 的局限性

虽然 HMR 非常强大，但它也有一些局限性：

并非所有模块都可以热更新: 有些模块的更新可能会导致应用崩溃，例如包含全局状态的模块。
需要框架/库的支持: HMR 需要框架/库提供相应的 API，才能正常工作。
配置可能比较复杂: 有些情况下，你需要手动配置 HMR，才能使其正常工作。

总结

Vite HMR 通过 WebSocket 实现模块热更新，能够在应用程序运行的时候，替换掉模块，而不用刷新整个页面，从而极大地提高了开发效率。它通过监听文件变化，编译模块，构建更新消息，并通过 WebSocket 发送给客户端。客户端接收到更新消息后，会解析消息，请求更新模块，并使用框架/库提供的 HMR API 替换掉旧的模块代码，并保持应用状态。

总的来说，HMR 是一个非常强大的工具，它可以极大地提高前端开发效率。希望今天的讲座能够让你对 Vite HMR 有更深入的了解。

今天的分享就到这里，谢谢大家！希望对大家有所帮助，下次再见！