Codes►前端

热更新

热更新

热更新

前端热更新（Hot Module Replacement，简称HMR）是一种在应用运行时替换、添加或删除模块，而无需重新加载整个页面的技术。以下是几种处理前端热更新的方法：

  1. WebSocket通信：
    • 通过WebSocket与服务器建立持久连接，服务器在检测到文件变化时通过WebSocket向客户端推送消息。客户端接收到消息后，根据消息类型（如HTML、CSS或JS文件更新）执行相应的更新操作。例如，如果是CSS文件更新，可以重新加载CSS文件；如果是JS文件更新，则可能需要重新加载模块或执行特定的更新逻辑。
  2. HMR API：
    • 使用模块热替换（HMR）API，如import.meta.hot，在Vite或Webpack等现代前端构建工具中实现热更新。这些API允许模块告知系统它们可以处理更新，例如import.meta.hot.accept()用于接受更新，import.meta.hot.dispose()用于在模块被替换前执行清理操作。
  3. 模块依赖图和热更新边界：
    • 构建工具（如Vite）会维护一个模块依赖图，并在检测到文件变化时更新受影响的模块节点属性。然后，找出热更新边界模块，通过WebSocket通知客户端更新，并带上边界模块信息。
  4. 客户端执行热更新方法：
    • 客户端接收到更新信息后，根据更新类型作出对应的更新行为。对于JS模块的热更新，客户端会找到对应的边界模块的热更新回调并执行以完成最终的更新。
  5. JSONP请求获取更新：
    • 在Webpack中，可以使用JSONP请求获取最新的模块代码，因为JSONP请求的代码可以直接执行。这是在客户端获取更新代码的一种方式。
  6. webpackHotUpdate方法：
    • 当客户端获取到最新的代码后，可以通过window.webpackHotUpdate方法更新模块缓存，替换旧模块，并执行新的模块代码。
  7. 插件支持：
    • 对于不同的语言环境，如React、Vue或Svelte，可以使用对应的插件来支持HMR API的调用处理，例如@vitejs/plugin-react、@vitejs/plugin-vue和@vitejs/plugin-svelte