我对“热加载”的理解

热加载又名“模块热替换（HMR - Hot Module Replacement）”。是一种不需要重新加载页面，就可以增加，删除，修改代码中的模块，并生效的一种功能，webpack功能。

一. HMR可以做到以下几点：

1.保留应用程序状态。

完全加载页面，会让程序状态回归原始。HMR修改模块，不会重新加载页面，所以，程序状态不会改变。

2.只更新变更的内容，没有改变的模块，不做更改。

3.调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

二. HMR为什么可以做到以下几点：

1.在应用程序中

(1)应用程序代码要求 HMR runtime 检查更新

(2)HMR runtime（异步）下载更新，然后通知应用程序代码。

(3)应用程序代码要求 HMR runtime 应用更新.

(4)HMR runtime（同步）应用更新

2.模块中

（1）举个例子，通过 style-loader 为 style 样式追加补丁。为了运行追加补丁，style-loader 实现了 HMR 接口；当它通过 HMR 接收到更新，它会使用新的样式替换旧的样式。

（2）不需要强制在每个模块中写入 HMR 代码。如果一个模块没有 HMR 处理函数，更新就会冒泡(bubble up)。这意味着一个简单的处理函数能够对整个模块树(complete module tree)进行更新。如果在这个模块树中，一个单独的模块被更新，那么整组依赖模块都会被重新加载。（等于页面刷新了）

（3）module.hot

3.在HMR的runtime中

（1）对于模块系统的 runtime，附加的代码被发送到 parents 和 children 跟踪模块。在管理方面，runtime 支持两个方法 check 和 apply

（2）check 发送 HTTP 请求来更新 manifest。如果请求失败，说明没有可用更新。如果请求成功，待更新 chunk 会和当前加载过的 chunk 进行比较。对每个加载过的 chunk，会下载相对应的待更新 chunk。当所有待更新 chunk 完成下载，就会准备切换到 ready 状态

（3）apply 方法将所有被更新模块标记为无效。对于每个无效模块，都需要在模块中有一个更新处理函数(update handler)，或者在它的父级模块们中有更新处理函数

（4）之后，所有无效模块都被（通过 dispose 处理函数）处理和解除加载。然后更新当前 hash，并且调用所有 "accept" 处理函数。runtime 切换回闲置状态(idle state)，一切照常继续。

理解：runtime对代码进行追踪和监控，发送http确定是否发生更改。当有更改后，进行处理和加载，然后将模块标记为无效。在进行一轮追踪和监控。