1.为什么要选择vite

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
而vite是基于 原生 ES 模块 提供了丰富的内建功能，所以vite的hrm的速度比webpakc要快很多。

2.vite的hrm大致过程

  • 创建一个websocket服务端。
  • 创建一个ws client文件，并在html中引入，加载ws client文件。
  • 服务端监听文件变化，发送websocket消息，告诉客户端变化类型，变化文件等。
  • 客户端接受到消息，根据消息内容决定重新刷新页面还是重新加载变化文件，并执行相关文件注入ws client时设置的hmr hook函数。

源码分析

image.png
创建一个websocket服务端。
在createServer函数内调用createWebSocketServer，在createWebSocketServer中调用ws库创建ws服务端。

过程如下：
1.处理index.html时，在执行vite 独有hook transformIndexHtml时把’’注入到文件中。
2.在ws client 文件中，通过Websocket创建ws客户端，并接受服务端信息。
image.png
2.服务端监听文件变化，发送websocket消息，告诉客户端变化类型，变化文件等
3. handleHMRUpdate函数会发送消息给客户端，根据此次修改文件的类型告诉客户端是要刷新还是重新加载文件。
image.png
4.客户端接受到消息，根据消息内容决定重新刷新页面还是重新加载变化文件，并执行相关文件注入ws client时设置的hmr hook函数。
image.png
5.如果是js类型文件，则会先重新加载文件，然后执行在当前js文件类注册的hmr hook。
image.png
image.png