Webpack模块热替换原理(梁王的理论自习室)

Webpack模块热替换(HMR)

热替换就是我代码更新了，我不需要手动f5页面就更新了，这个功能主要是用于开发过程中，对生产环境没有任何帮助。效果上就是界面的无刷新更新。

原理阐述

这一部分主要是参考官网的文档加一些自己的理解

webpack在编译的时候会加一小段HMR runtime的代码进bundle里面，这一段代码运行在你的APP中。当编译结束后Webpack不会退出而是监听源代码的变化，如果检测到了源代码变化，Webpack会重新编译发生变化的模块(不会全部重新编译)。

然后根据设置(这个设置是啥读者能不能告诉我)，webpack会发送信号给HMR runtime或者HMR runtime会轮询webpack是否有变化。反正不管怎么样变化后的模块会发送给HMR runtime，然后会尝试热更新。

首先检查这个更新后的模块是否是self-accept。如果不是，它就会检查其他依赖于这个更新后的模块的其他模块，如果这些模块也不accept(accept我后面会解释)这个更新，那就会冒泡到更上一层，去检测那些依赖于依赖这个更新后的模块的模块的模块（好绕啊。。反正就是处于依赖层再上一层的模块）。冒泡会直到这个更新被accept或者到达app的入口起点(entry points)，不过这种情况热更新就废了。

从 App 的角度

App 代码请求 HMR runtime检查更新.（这里的说法应该是轮询）
HMR runtime会下载(异步)更新的代码,
通知 App 代码运行已经可用.
App 代码请求 HMR runtime应用更新.
HMR 运行时应用更新(同步).
这个过程, App 代码可以也可以不依赖用户操作(看需要).

从编译器(Webpack)角度

除了普通的静态文件, 编译器触发 "Update" 进行版本更新."Update" 包含两个部分:

1. the update manifest (json)
2. one or multiple update chunks (js)

manifest 包含新的编译结果的 Hash 和列表储存的 chunks (2.).
更新的 chunks 包含 chunk 当中所有更新掉的模块的代码(或者模块已经被移除的标记)
编译器额外会保证模块和 chunk 的 id 在多个建构当中一致

它使用 "records" JSON 文件在建构之间保存它们(或者存储在内存里)

从模块角度

HMR 是个可选功能, 它只影响包含 HMR 代码的模块文件里描述了模块中可用的 API通常模块开发者写的处理器代码会在这个模块的依赖更新时被调用他也可以写个处理器, 在当前模块更新时被调用

大多数情况不会强制在每个模块里写上 HMR 代码如果一个模块不包含 HMR 处理器, 更新事件就会向上冒泡意味着单个处理器可以处理整个模块树的更新如果树当中单个模块被更新, 整个模块树就会重新(刷新而不是 transferred(转移?))

从 HMR runtime角度(技术的)

对模块系统而言, HMR runtime是一段被插入的代码，它用来追踪模块的父节点子节点
管理层面, 运行时支持两个方法: check和 apply

check

check 发起 HTTP 请求去获取更新的 manifest。请求失败时, 意味着没有可用的更新否则将能返回更新的 chunks 的列表, 和当前已加载的 chunks 列表做对比每个被更新的 chunk 对应的更新后的 chunk 都会被下载所有存储在运行时当中的代码模块随着代码进行更新运行时会切换到 ready状态, 表明更新已经被下载并准备好应用
对于每个 ready 状态的新的 chunk 请求来说, 更新的 chunk 也已经被下载好了

apply

apply 方法标记所有更新过的模块为 invalid，每个 invalid 模块需要有个 update 处理器, 在模块中或者在每个父节点不然 invalid 向上冒泡, 多有的父节点也被标记为 invalid这个步骤持续知道不再有"冒泡"出现如果冒泡到了 entry point 就说明过程失败了
现在所有 invalid 模块会被处置(dispose 处理器)和卸载随后当前的 hash 被更新, 所有的 "accept" 处理器被调用运行时切换回到 "idle" 状态, 一切继续正常运行
生成的文件(技术的)
左侧表示初始的编译器流程右侧表示当模块 4 和 9 更新的流程

后记

。。。写到后面感觉我就是在翻译文档而已。。不过还算学到了一些东西顺便练习了下英语。
在我自己的vue项目里面几乎只在plugins里面有一句new webpack.HotModuleReplacementPlugin()而看不到一些很细节的东西，真方便。