网站后台设置,手机评分网站,网页特效制作,网站标题是关键词吗一、是什么
HMR全称 Hot Module Replacement#xff0c;可以理解为模块热替换#xff0c;指在应用程序运行过程中#xff0c;替换、添加、删除模块#xff0c;而无需重新刷新整个应用
例如#xff0c;我们在应用运行过程中修改了某个模块#xff0c;通过自动刷新会导致… 一、是什么
HMR全称 Hot Module Replacement可以理解为模块热替换指在应用程序运行过程中替换、添加、删除模块而无需重新刷新整个应用
例如我们在应用运行过程中修改了某个模块通过自动刷新会导致整个应用的整体刷新那页面中的状态信息都会丢失
如果使用的是 HMR就可以实现只将修改的模块实时替换至应用中不必完全刷新整个应用
在webpack中配置开启热模块也非常的简单如下代码
const webpack require(webpack)
module.exports {// ...devServer: {// 开启 HMR 特性hot: true// hotOnly: true}
}通过上述这种配置如果我们修改并保存css文件确实能够以不刷新的形式更新到页面中
但是当我们修改并保存js文件之后页面依旧自动刷新了这里并没有触发热模块
所以HMR并不像 Webpack 的其他特性一样可以开箱即用需要有一些额外的操作
我们需要去指定哪些模块发生更新时进行HRM如下代码
if(module.hot){module.hot.accept(./util.js,(){console.log(util.js更新了)})
}二、实现原理
首先来看看一张图如下 Webpack Compile将 JS 源代码编译成 bundle.jsHMR Server用来将热更新的文件输出给 HMR RuntimeBundle Server静态资源文件服务器提供文件访问路径HMR Runtimesocket服务器会被注入到浏览器更新文件的变化bundle.js构建输出的文件在HMR Runtime 和 HMR Server之间建立 websocket即图上4号线用于实时更新文件变化
上面图中可以分成两个阶段
启动阶段为上图 1 - 2 - A - B
在编写未经过webpack打包的源代码后Webpack Compile 将源代码和 HMR Runtime 一起编译成 bundle文件传输给Bundle Server 静态资源服务器
更新阶段为上图 1 - 2 - 3 - 4
当某一个文件或者模块发生变化时webpack监听到文件变化对文件重新编译打包编译生成唯一的hash值这个hash值用来作为下一次热更新的标识
根据变化的内容生成两个补丁文件manifest包含了 hash 和 chundId用来说明变化的内容和chunk.js 模块
由于socket服务器在HMR Runtime 和 HMR Server之间建立 websocket链接当文件发生改动的时候服务端会向浏览器推送一条消息消息包含文件改动后生成的hash值如下图的h属性作为下一次热更细的标识 在浏览器接受到这条消息之前浏览器已经在上一次socket 消息中已经记住了此时的hash 标识这时候我们会创建一个 ajax 去服务端请求获取到变化内容的 manifest 文件
mainfest文件包含重新build生成的hash值以及变化的模块对应上图的c属性
浏览器根据 manifest 文件获取模块变化的内容从而触发render流程实现局部模块更新 三、总结
关于webpack热模块更新的总结如下
通过webpack-dev-server创建两个服务器提供静态资源的服务express和Socket服务express server 负责直接提供静态资源的服务打包后的资源直接被浏览器请求和解析socket server 是一个 websocket 的长连接双方可以通信当 socket server 监听到对应的模块发生变化时会生成两个文件.jsonmanifest文件和.js文件update chunk通过长连接socket server 可以直接将这两个文件主动发送给客户端浏览器浏览器拿到两个新的文件后通过HMR runtime机制加载这两个文件并且针对修改的模块进行更新
