HMR（Hot Module Replacement 热模块替换）的实现原理

3 min read

HMR（Hot Module Replacement）是一种前端开发中常用的技术，它可以在不刷新页面的情况下替换掉被修改的模块，从而实现快速更新页面的效果。

HMR的实现原理如下：

  1. 当一个文件被修改时，Webpack 会监听该文件和依赖该文件的模块。

  2. 当一个文件被修改时，Webpack 会将修改的内容打包成一个新的代码块，并将该代码块发送到浏览器端。

  3. 当浏览器端接收到新的代码块时，Webpack 会使用一个热更新客户端（hot update client）来实现热替换。

  4. 热更新客户端会首先向服务端发送一个更新请求，服务端会根据请求将更新内容作为一个 JSON 对象传输到客户端。

  5. 在客户端，热更新客户端会解析接收到的更新内容并将其应用到页面上，从而实现热模块替换的效果。

总的来说，HMR 中的实现原理主要涉及四个部分：文件监听、代码打包、热更新服务端、热更新客户端。这些部分协同工作，使得在不刷新页面的情况下替换掉被修改的模块成为可能。