前端工具vite HMR原理，让你从零快速掌握

不知不觉间，距离尤雨溪在微博宣布「vite」的出现到现在，已经过了 2 个月多。当时，「vite」只是支持对 .vue 文件的即时编译和 import 的 rewrite，相应地「Plugin」也没有几个。并且，最初在「GitHub」上「vite」的 slogan 是这样…

vite HMR 的基本原理

vite HMR 的基本原理其实很简单，它就是利用了浏览器的 WebSocket 来实现的。当你在保存文件时，vite 会通过 WebSocket 向浏览器发送一个更新消息。浏览器收到更新消息后，会重新加载相应的模块。这样一来，你就可以看到更新后的结果了。

vite HMR 的实现细节

vite HMR 的实现细节其实比较复杂，这里我只简单介绍一下。

1. 客户端

vite HMR 的客户端主要由以下几个部分组成：

• WebSocket 客户端 ：负责与 vite 建立 WebSocket 连接，并接收更新消息。
• 模块加载器 ：负责加载模块，并在模块加载完成后向 WebSocket 客户端发送一个加载完成的消息。
• HMR 运行时 ：负责处理 WebSocket 客户端发来的更新消息，并重新加载相应的模块。

2. 服务端

vite HMR 的服务端主要由以下几个部分组成：

• WebSocket 服务端 ：负责与客户端建立 WebSocket 连接，并接收客户端发来的加载完成消息。
• 文件监听器 ：负责监听文件的变化，并在文件发生变化时向 WebSocket 服务端发送一个更新消息。
• HMR 插件 ：负责处理 WebSocket 服务端发来的更新消息，并重新编译相应的模块。

3. 通信过程

vite HMR 的通信过程大致如下：

1. 客户端启动后，WebSocket 客户端会自动与 vite 建立 WebSocket 连接。
2. 模块加载完成后，模块加载器会向 WebSocket 客户端发送一个加载完成的消息。
3. WebSocket 客户端收到加载完成的消息后，会向 vite 发送一个更新消息。
4. vite 收到更新消息后，文件监听器会开始监听文件的变化。
5. 当文件发生变化时，文件监听器会向 vite 发送一个更新消息。
6. vite 收到更新消息后，HMR 插件会重新编译相应的模块。
7. 重新编译完成后，vite 会向 WebSocket 服务端发送一个更新消息。
8. WebSocket 服务端收到更新消息后，WebSocket 客户端会自动重新加载相应的模块。

vite HMR 的优缺点

vite HMR 有很多优点，比如：

• 速度快 ：vite HMR 的速度非常快，它可以在你保存文件后立即看到更新的结果。
• 简单易用 ：vite HMR 的使用非常简单，你只需要安装一个插件，然后就可以使用了。
• 兼容性好 ：vite HMR 兼容性非常好，它可以在大多数浏览器中使用。

但是，vite HMR 也有一个缺点，那就是：

• 内存占用大 ：vite HMR 会占用比较大的内存，这可能会导致你的电脑变慢。

总结

vite HMR 是一个非常强大的工具，它可以大大提高你的开发效率。如果你还没有使用 vite HMR，我强烈建议你尝试一下。