工程化知识卡片 008: webpack HMR 实现的核心原理
HMR,Hot Module Replacement,热模块替换,见名思意,即无需刷新再内存环境中即可替换掉过旧模块。与 Live Reload 相对应。
在 webpack 的运行时中 __webpack__modules__
用以维护所有的模块。而热模块替换的原理,即通过 chunk
的方式加载最新的 modules
,找到 __webpack__modules__
中对应的模块逐一替换,并删除其上下缓存。
其精简数据结构用以下代码表示:
const __webpack_modules = [ (module, exports, __webpack_require__) => { __webpack_require__(0) }, () => { console.log(这是一号模块) } ] // JSONP 异步加载的所需要更新的 modules self["webpackHotUpdate"](0, { 1: () => { console.log('这是最新的三号模块') } }) 复制代码
其下为更具体更完整的流程,每一步都涉及众多,有兴趣的可阅读 webpack-dev-server
及开发环境 webpack 运行时的源码。
webpack-dev-server
将打包输出 bundle 使用内存型文件系统控制,而非真实的文件系统。此时使用的是 memfs 模拟 node.jsfs
API每当文件发生变更时,
webpac
将会重新编译,webpack-dev-server
将会监控到此时文件变更事件,并找到其对应的module
。此时使用的是 chokidar 监控文件变更webpack-dev-server
将会把变更模块通知到浏览器端,此时使用websocket
与浏览器进行交流。此时使用的是 ws浏览器根据
websocket
接收到 hash,并通过 hash 以 JSONP 的方式请求更新模块的 chunk浏览器加载 chunk,并使用新的模块对旧模块进行热替换,并删除其缓存
作者:shanyue
链接:https://juejin.cn/post/7021167384484380709