Day_08 : 让 Vite 来开启你的Vue 之 Vite 核心 HMR

Hi Dai Gei Ho~ 我是Winnie～ 今天是第八天，中秋连假到数结束第二天～

在开始说明今天主题之前，请大家回忆一下，当我们在local开发时，先不论是使用的工具是 Vite 还是 webpack，今天即时修改了一段程序码，有没有想过为什麽页面可以不用刷新也可以跟着修改的内容一起改变呢？

兵蹦～对！答案就是与HMR有关～ 也是属於Vite核心背後之一。

什麽是 HMR？

HMR热更新 全意为 Hot Module Replacement，简单来说 就是在 Server与 浏览器 建立了一个 websocket连线，当程序码被修改时，Server会传送讯息通知 浏览器 去请求修改模组的程序码，完成热更新，所以在这样的情况下就能在不刷新浏览器的前提下进行更新。

而总结以上，相较与 live load，HMR具有以下优点：

• 修改程序码时，可以即时更新画面
• 实现部分跟新，避免多余请求
• 保有原本状态

而在 Vite 的 HMR 中 运作主要会有4个流程：

1. 启动 koa server，使用chokidar 对档案进行监听，针对更动可对不同模组进行相应处理
2. 建立一个websocket服务器 与 ws client文件，并在html中引入，载入ws client文件
3. 当 server 监听到 档案变化，发送websocket讯息 通知 浏览器
4. 当 浏览器接受到讯息，可以根据内容 决定 要刷新页面 还是 更新变化档案，同时执行相关档案 注入ws client时设置的hmr hook函数

相关补充：

koa 是什麽?
koa 是一个基於 node 实现的一个新的web框架，由express框架的原班人马打造的。它的特点是优雅、简洁、表达力强、自由度高。与express相比，是一个更轻量的node框架
websocket 是什麽?
WebSocket 是一种网路协定， 客户端 可以透过此协定与 服务器端 做沟通， 且只需透过一次连结便能保持连线，不必再透过一直发送 请求 来与 服务器端 互动
chokidar 是什麽?
chokidar 是封装 Node.js 监控文件系统文件变化功能的套件

以上 是今天的关於 HMR 介绍(抱歉，有一点简略，因为有一点不太熟，希望之後更理解原始码，再将这篇补齐)，谢谢大家的阅读，如有问题欢迎给予指教，谢谢。

ps 如想再更详细了解 Vite HMR源码解释 推荐大家可以先阅读此篇 从零到一，带你彻底搞懂 vite 中的 HMR 原理（源码分析）