浏览器热更新原理

使用:HMR作为webpack内置的功能,通过--hot开启

原理:webpack对文件进行监听,文件发生改变进行重新编译

webpack服务器与浏览器建立通信   webpack-hot-middleware插件实现

改动页面代码保存后,webpack会重新编译文件并发消息通知浏览器,浏览器在check之后触发webpackhotupdatecallback

hotcheck调用hotDownloadManifest发生请求

通过json请求结果获取热更新文件,以及下次热更新的Hash标识,进入热更新准备阶段

hotcheck确认需要热更新后进入hotaddupdateChunk方法,该方法检查hash标识的模块是否更新,如果没更新,则通过在DOM中添加script标签的方式,动态请求js

 

posted @ 2023-02-23 10:24  baller  阅读(71)  评论(0)    收藏  举报