跳到主要内容

liveload 和 hmr

在前端开发中，"live load" 和 "HMR"（Hot Module Replacement）是两种不同的技术，用于提高开发效率和用户体验。以下是它们的区别：

Live Load​

功能: 当开发者修改代码并保存时，整个页面会自动刷新。这意味着浏览器会重新加载整个页面，包括所有的 JavaScript、CSS 和 HTML。

优点: 简单易用，适用于大多数开发环境。

缺点: 页面刷新会导致应用程序的状态丢失。例如，如果用户正在填写表单，刷新后表单内容会丢失。

HMR（Hot Module Replacement）​

功能: 允许在不刷新整个页面的情况下，替换、添加或删除模块。HMR 只更新发生变化的模块，而不影响其他模块。

优点:

  • 保留应用程序的状态，减少不必要的页面刷新，提高开发效率。对于大型应用程序，HMR 可以显著减少开发时的等待时间
  • 可以实现局部更新，避免多余的资源请求，提高开发效率。
  • 在更新的时候可以保存应用原有状态。
  • 在代码修改和页面更新方面，实现所见即所得。

缺点: 实现较为复杂，需要构建工具（如 Webpack）的支持，并且在某些情况下可能需要额外的配置。 总结来说，Live Load 适用于简单的开发场景，而 HMR 则更适合复杂的应用程序开发，尤其是在需要频繁修改和测试的情况下。

HMR​

热替换（Hot Module Replacement）指的是在修改代码后无需刷新页面即可生效。一个成熟的框架是必须要具备热替换能力的。Vite 的热替换实现与业界知名的一些模块如 webpack-dev-server 的实现类似。

本质都是通过 websocket 建立服务端与浏览器端的通信（通知客户端发起拉取文件请求）。

当文件发生变化时，通知浏览器端重新拉取文件。

关于 webpack 热模块更新的总结如下：

  • 通过 webpack-dev-server 创建两个服务器：提供静态资源的服务（express）和 Socket 服务
  • express server 负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）
  • socket server 是一个 websocket 的连接，双方可以通信
  • 当 socket server 监听到对应的模块发生变化时，会生成两个文件.json（manifest 文件 mainfest 文件包含重新 build 生成的 hash 值，以及变化的模块，）和.js 文件（update chunk）
  • express 服务端向客户端发一条消息,包含 文件改动后生成的 hash 值
  • 浏览器接受消息后跟上次 hash 值相比,通过 ajax 去请求变化了的文件 , ws 是用来检测，ajax 是用来更新
  • 浏览器拿到两个新的文件后，通过 HMR runtime 机制，加载这两个文件，并且针对修改的模块进行更新