跳到主要内容

热更新

Vite 为了更方便地管理模块之间的关系，创建了模块依赖图的数据结构，在 HMR 过程中，服务端会根据这张图来寻找 HMR 边界模块

  • HMR 更新由客户端和服务端配合完成，两者通过 WebSocket 进行数据传输
  • 在服务端，Vite 通过查找模块依赖图确定热更新的边界，并将局部更新的信息传递给客户端，而客户端接收到热更信息后，会通过动态 import 请求并加载最新模块的内容，并执行派发更新的回调，即 import.meta.hot.accept 中定义的回调函数，从而完成完整的热更新过程

Vite热更新为什么比Webpack热更新快？​

Webpack热更新运行机制：

​ Webpack会遍历你的应用程序中的所有文件，并启动一个开发服务器（Webpack-dev-server），然后将整个代码渲染到开发环境中。从entry入口文件开始，将其依赖的资源文件通过loader打包成一个文件夹，然后通过server传递到客户端运行；也正是因为这样的运行机制，也必将导致项目代码量增多，应用体积增大之后，Webpack热更新需要等待较久的时间才能反映到浏览器中；

​ Vite热更新运行机制：

​ Vite会在本地启动一个Vite Server服务，对于第三方依赖使用了速度更快的esbuild预构建，对于业务代码使用原生的ESM，访问这个服务，加载对应模块的服务端资源，绕过了构建打包过程，对请求的模块进行实时按需编译，热更新时仅需重新请求改动过的模块即可，而且热更新的速度不会随着模块增多而变慢

vite是直接启动开发服务器,请求哪个模块再对该模块进行实时编译。 而webpack会先打包, 然后再启动开发服务器。webpack打包过程中，会分析模块依赖、转换代码，编译代码

vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快

vite热更新机制​

  • 在服务端，Vite 通过查找模块依赖图确定热更新的边界，并将局部更新的信息传递给客户端，而客户端接收到热更信息后，会通过动态 import 请求并加载最新模块的内容，并执行派发更新的回调，即import.meta.hot.accept中定义的回调函数，从而完成完整的热更新过程