HMR（热模块代替）原理和react实践

手动更新：

 

在以前，当我们一个大型的应用程序在开发过程中，每一次的修改每改动一次就要经历以下步骤：

• 资源重载
• 网络请求
• 浏览器渲染
• 页面刷新

 

这个过程对应工作量很大的应用来说是很难以接受的。想一想，即便你只是给网页添加了一个img，但是却要重新经历等待应用程序资源重新构建，然后手动刷新页面才能看到效果。恐怕再有耐心的程序员也受不了。如果每一次小改动都要经历这些部分，那将是一个开发灾难。

 

---

自动更新：

我们现在的开发工具为我们提供了更加方便的方式，只要检测到代码更新就会自动重新构建，自动触发页面更新。我们只需要关心修改，修改结果会自然而然的呈现在页面上。

 

简单来说：可以让我们的程序（网页）在不刷新的情况下立即看到修改结果。这就是热模块替换功能（Hot Moudle Replacement）

 

---

HMR（Hot Module Replacement）

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