热模块替换 | Hot Module Replacement

模块热替换(Hot Module Replacement)

热模块更换（HMR）在应用程序运行时交换，添加或删除模块，而无需完全重新加载。这可以通过几种方式显着加速开发：

• 保留完整重新加载期间丢失的应用程序状态。

• 只需更新已更改的内容，节省宝贵的开发时间。

• 调整样式的速度更快 - 几乎可以与浏览器的调试器中的样式相比。

怎么运行的

让我们通过一些不同的观点来了解HMR究竟是如何工作的......

在应用程序中

1.应用程序要求HMR运行时检查更新。

2.运行时异步下载更新并通知应用程序。

3.然后应用程序会要求运行时应用更新。

4.运行时会同步应用更新。

您可以设置HMR，以便自动执行此过程，或者您可以选择要求用户进行交互以实现更新。

在编译器中

1.更新后的清单（JSON）

2.一个或多个更新的块（JavaScript）

在一个模块中

有关module.hot界面的详细信息，请参阅HMR API页面。

在运行时

这里有更多的技术细节。如果你对内部没有兴趣，可以跳转到HMR API页面或HMR指南。

对于模块系统运行时，额外的代码被发送到跟踪模块parents和children。在管理方面，运行时支持两种方法：check和apply。

开始使用

在开发过程中，可以将 HMR 作为 LiveReload 的替代。webpack-dev-server 支持 hot 模式，在试图重新加载整个页面之前，热模式会尝试使用 HMR 来更新。更多细节请查看模块热更新指南。