vite技术揭秘--hmr（热更新概览）

前言

    热更新应该算是vite的核心能力之一了，因此分多篇，由浅入深的分析是有必要的，本节仅了解其核心实现过程

思考

    当我们打开一个html文件后，会发起一个资源请求，当修改该文件后，必须进行手动刷新，才能让浏览器重新请求该资源得到改动后的结果

    如果能把浏览器直接请求资源的这个动作进行拦截，那我们就有模拟用户手动刷新的动作的可能

    我们知道，使用JavaScript做dom修改是可以在不刷新页面的前提下更改页面显示的，那假设我们可以把改动的部分作为一个补丁函数，然后通过类似ajax请求的方式把这个函数拉取过来并执行，那是不是就做到了不刷新而更新页面了？

    那现在有几个必须要解决的问题：

        如何拦截浏览器请求目标资源

        如何监听文件变动

        如何将文件变动通知给客户端

        客户端如何获取到变动内容

源码

    如何拦截浏览器请求目标资源

        只需要创建一个node服务,将直接访问文件A改为先访问我们启动的node服务，再由node将文件A返回给客户端，这样我们就可以在文件A被返回之前执行一些逻辑

    如何监听文件变动

        通过chokidar包可以做到监听指定目录下的文件改动并执行回调

    如何将文件变动通知给客户端

        我们换个更加通俗的问法：服务端如何向客户端推送消息？显然，socket很擅长做这件事

        另外，让用户在客户端手动连接是个糟糕的体验，且连接后需要执行怎样的动作也应当是对用户不可见的，因此，可以考虑手动向客户端塞一个

        在第一步时候，我们已经对目标文件做了拦截，因此只需要去监听对html的访问

        由于是中间件，故对.html文件的访问都将先执行框红的部分，这部分即对源文件做修改，即"手动向客户端塞一个"

    客户端如何获取到变动内容

        现在已经塞了一个客户端的socket实现，那么当文件变更后推送消息即可

        updates即具体的消息体

        则只需要在client.js中做对应的消息接收即可