首页 > 其他分享 >浏览器热更新原理

浏览器热更新原理

时间:2023-02-23 10:37:16浏览次数:39  
标签:文件 浏览器 hot 更新 hotcheck webpack 原理

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

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

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

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

hotcheck调用hotDownloadManifest发生请求

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

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

 

标签:文件,浏览器,hot,更新,hotcheck,webpack,原理
From: https://www.cnblogs.com/baller-coder/p/17147020.html

相关文章

  • TCP 三次握手四次挥手具体原理——转载
    【TCP/IP】TCP协议的流程图解  一、TCP协议起步#1.什么是TCP协议#TCP是面向连接的协议,这是因为在一个应用进程可以开始向另一个应用进程发送数据之前,这两个进程必......
  • IE和Microsoft Edge浏览器合并,如何设置单独打开IE
    IE和MicrosoftEdge浏览器合并,如何分离,单独打开注:最近系统更新,大家都有可能遇到打开IE时,会默认弹到MicrosoftEdge浏览器,这样会导致有些网页不能下载插件使用,兼容性太差,今......
  • LookAt原理
    原理就是两次Cross算出x轴、y轴,然后利用模型空间坐标轴得到变换矩阵,确切点说是旋转矩阵,LookAt只是把物体旋转了下,并不会涉及缩放和平移。第1次Cross是根据y-z轴所在的平......
  • 自学python-计算机基础原理-day02
    python学习第一课什么是python?python是一门编程语言什么是编程语言呢就是人与电脑交互的语言我们用python编写自己想要得软件而python把我们写的语言转化成计算机看......
  • Android 启动优化(二) - 有向无环图的原理以及解题思路
    Android启动优化(一)-有向无环图Android启动优化(二)-拓扑排序的原理以及解题思路Android启动优化(三)-AnchorTask使用说明Android启动优化(四)-手把手教你实现An......
  • 利用SpringBoot自动装配原理自定义starter
    在使用SpringBoot时候我们经常会碰到引入很多的starter的自动化配置,有了这些starter以后我们就可以很轻松的完成一个企业级的开发项目,很多小朋友就会对于starter很神奇,其实......
  • 响应式原理
    1.为什么要用响应式原理实现数据与视图的自动更新操作。2.响应式原理是什么?当我们修改一个变量时,会有某些操作可以自动执行3.怎么做?vue使用object.defineproperty更新......
  • 理论:第十二章:Dubbo的运行原理,支持什么协议,与SpringCould相比它为什么效率要高一些,Zook
    Dubbo简单的介绍一下Dubbo?(Dubbo是什么)dubbo就是个服务调用的东东。为什么怎么说呢?因为Dubbo是由阿里开源的一个RPC分布式框架那么RPC是什么呢?就是不同的应用部署到......
  • Elasticsearch 操作更新数据后,没有立即生效
    问题描述:SpringBoot 项目使用 RestHighLevelClien操作ES修改数据成功,之后前端调用查询接口发现数据并未更新,待1S左右再次刷新发现ES数据成功更新。从现象来看是ES操作......
  • Microsoft Edge浏览器快捷键
    window系统下按此键执行此操作Command+Shift+B显示或隐藏收藏夹栏Command+Shift+C打开开发人员工具Command+D将当前......