webpack热更新原理(HRM)

·  阅读 161

这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

一、什么是 HMR

HMR(Hot Module Replacement)是webpack一个重要的特性,当代码文件修改并保存之后,webapck通过watch监听到文件发生变化,会对代码文件重新打包生成两个模块补丁文件manifest(js) 和一个(或多个)updated chunk(js),将结果存储在内存文件系统中,通过websocket通信机制将重新打包的模块发送到浏览器端,浏览器动态的获取新的模块补丁替换旧的模块,浏览器不需要刷新页面就可以实现应用的更新。

优点:

  • 代码文件修改到页面内容更新,自动完成
  • 兼容目前市面上主流的开发框架 :react,vue,angular2,如使用angular-cli创建ng项目通过@ngtools/webpack已经内置了webpack
  • 相比location.reload() 更新方式,不需要刷新页面,可以保存应用的当前状态

HMR相关的中间件

  1. webpack-dev-middleware

本质上是一个容器,将webpack处理后的文件传递给服务器。

webpack-dev-middleware 是一个 express 中间件,核心实现两个功能:第一通过file-loader内部集成了node的 monery-fs/memfs 内部文件系统,,直接将资源存储在内存;第二是通过watch监听文件的变化,动态编译

2. webpack-hot-middleware

核心是给webpack提高服务端和客户端之间的通信机制,内部使用EventSocurce实现。

在webpack第一次打包的时候,除了代码本身之外,还包含一部分HMRruntime订阅服务代码,HMRruntime 订阅服务端的更新变化,触发HMR runtime API拉取最新的资源模块。

webpack-hot-middleware实现页面的热重载。

3. webpack-dev-server

内置了webpack-dev-middleware和express服务器,利用webpack-dev-middleware提供文件的监听和编译,利用express提供http服务,底层利用websocket代替EventSource实现了webpack-hot-middleware提供的客户端和服务器之间的通信机制。

知识点扩充:EventSource

EventSource 是服务器推送的一个网络事件接口。一个EventSource实例会对HTTP服务开启一个持久化的连接,以text/event-stream 格式发送事件, 会一直保持开启直到被要求关闭。

一旦连接开启,来自服务端传入的消息会以事件的形式分发至你代码中。如果接收消息中有一个事件字段,触发的事件与事件字段的值相同。如果没有事件字段存在,则将触发通用事件。

与 WebSockets,不同的是,服务端推送是单向的。数据信息被单向从服务端到客户端分发. 当不需要以消息形式将数据从客户端发送到服务器时,这使它们成为绝佳的选择。例如,对于处理社交媒体状态更新,新闻提要或将数据传递到客户端存储机制(如IndexedDB或Web存储)之类的,EventSource无疑是一个有效方案。

HMR的工作原理

\

  1. webpack --watch启动监听模式之后,webpack第一次编译项目,并将结果存储在内存文件系统,相比较磁盘文件读写方式内存文件管理速度更快,内存webpack服务器通知浏览器加载资源,浏览器获取的静态资源除了JS code内容之外,还有一部分通过webpack-dev-server注入的的 HMR runtime代码,作为浏览器和webpack服务器通信的客户端( webpack-hot-middleware提供类似的功能)。截图如下:

  1. 文件系统中一个文件(或者模块)发生变化,webpack监听到文件变化对文件重新编译打包,每次编译生成唯一的hash值,根据变化的内容生成两个补丁文件:说明变化内容的manifest(文件格式是hash.hot-update.json,包含了hash和chundId用来说明变化的内容)和chunk js(hash.hot-update.js)模块。

  1. hrm-server通过websocket将manifest推送给浏览器

浏览器接受到最新的hotCurrentHash,触发 hotDownloadManifest 函数,获取manifest json 文件。

function hotDownloadManifest() {
    var request = new XMLHttpRequest();
    var requestPath = __webpack_require__.p + "" + hotCurrentHash + ".hot-update.json";
request.open("GET", requestPath, true);		
    request.send(null);
}
复制代码

  1. 浏览器端hmr runtime根据manifest的hash和chunkId使用ajax拉取最新的更新模块chunk
function hotDownloadUpdateChunk(chunkId) {
    var script = document.createElement("script");
    script.src = __webpack_require__.p + "" 
                     + chunkId + "." + hotCurrentHash + ".hot-update.js";	
    document.head.appendChild(script);
}
复制代码

  1. 触发render流程实现局部热重载

HMR runtime 调用window["webpackHotUpdate"] 方法,调用hotAddUpdateChunk

var parentHotUpdateCallback = window["webpackHotUpdate"];
window["webpackHotUpdate"] = function webpackHotUpdateCallback(chunkId, moreModules) {
    hotAddUpdateChunk(chunkId, moreModules);
    if (parentHotUpdateCallback) parentHotUpdateCallback(chunkId, moreModules);
};
复制代码

hotAddUpdateChunk动态的更新代码模块,并调用hotUpdateDownloaded函数

function hotAddUpdateChunk(chunkId, moreModules) {
    hotRequestedFilesMap[chunkId] = false;
    for (var moduleId in moreModules) {
        if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
            hotUpdate[moduleId] = moreModules[moduleId]; 			}
    }
    if (--hotWaitingFiles === 0 && hotChunksLoading === 0) {
        hotUpdateDownloaded();
    }
}
复制代码

hotUpdateDownloaded执行hotApply执行热重载

function hotUpdateDownloaded() {
    hotSetStatus("ready");
    Promise.resolve()
        .then(function() {
            return hotApply(hotApplyOnUpdate);
        })
}
复制代码
分类:
前端
标签:
分类:
前端
标签: