<Vite>HMR实现原理

什么是HMR?

在这里插入图片描述

HMR(Hot Module Replacement)是一种开发工具,也就是热更新。用于在应用程序运行时替换、添加或删除模块,而无需完全重新加载整个页面或重新启动应用程序。这可以极大地提高开发效率和调试体验。

HMR的优势

通过使用HMR,当你修改了一个模块的代码后,在保存文件的瞬间,只有该模块及其依赖关系会被重新编译,并且新的代码将立即生效。这使得你能够实时查看对应用程序所做更改的影响结果,无需手动刷新页面。

Vite的HMR功能是通过以下原理实现的:

在这里插入图片描述

  1. ES模块和浏览器原生支持: Vite利用了现代浏览器对ES模块加载机制的支持。在开发环境中,Vite将每个文件作为一个独立的模块进行处理,并且使用浏览器自身提供的importexport语法来实现模块之间的依赖关系。

  2. WebSocket通信: 当源代码发生更改时,Vite会检测到变化并建立与客户端之间的WebSocket连接。这样,服务器可以向客户端发送更新消息。

  3. 按需编译和替换: 一旦服务器检测到代码更改,它会根据变化重新编译受影响的文件,并生成新版本。然后,服务器通过WebSocket将更新消息发送给客户端。

  4. 局部更新: 客户端收到更新消息后,它会根据需要下载新版本并对页面进行局部刷新,而无需完全重新加载整个页面。这种局部刷新使得应用程序保持在开发状态下无缝运行,并提供快速反馈。

具体而言,在Vite中实现HMR特性主要涉及以下三个步骤:

  1. 监听文件改动: 在开发模式下,Vite使用一个文件系统监视器(watcher)来监听源代码文件的变化。当文件被修改、添加或删除时,watcher会立即捕获到这些变化。

  2. 服务器端编译资源并推送新模块内容给浏览器: 一旦有文件更改被捕获,Vite启动一个服务器,并执行相应的编译过程。它会根据需要重新构建受影响的模块,并生成新版本。然后,服务器通过WebSocket与客户端保持连接,并将更新消息推送给浏览器。

  3. 浏览器接收并处理新模块内容: 浏览器收到更新消息后,在不刷新整个页面的情况下下载和加载新版本的模块。对于支持HMR功能的前端框架(如Vue.js和React),它们具备能力在接收到新模块内容后进行局部渲染或组件重载操作(例如Vue中即是rerender)。这使得应用程序可以实现热更新效果,即时地反映出源代码更改所带来的变化。

serverPluginClient 源码举例

serverPluginClient是Vite中的一个插件,用于在开发服务器上提供客户端代码。它负责将构建后的客户端代码发送给浏览器,并处理与客户端相关的请求。

服务端由 serverPluginClient 插件进行处理
代码举例:

export const clientPlugin: ServerPlugin = ({ app, config }) => {// 读取客户端代码文件内容,并替换其中的占位符const clientCode = fs.readFileSync(clientFilePath, 'utf-8').replace(`__MODE__`, JSON.stringify(config.mode || 'development')).replace(`__DEFINES__`,JSON.stringify({...defaultDefines,...config.define}))// 使用中间件处理请求app.use(async (ctx, next) => {if (ctx.path === clientPublicPath) {ctx.type = 'js'ctx.status = 200// 返回具体内容,将端口号动态替换到客户端代码中的占位符处ctx.body = clientCode.replace(`__PORT__`, ctx.port.toString())} else {// 兼容历史逻辑,并进行错误提示if (ctx.path === legacyPublicPath) {console.error(chalk.red(`[vite] client import path has changed from "/vite/hmr" to "/vite/client". ` +`please update your code accordingly.`))}return next()}})
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/89058.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue table动态合并, 自定义合并,参照合并,组合合并

<template><div><el-table:data"tableData":span-method"objectSpanMethod"border:header-cell-style"{ textAlign: center }"><el-table-column prop"area" label"区域" align"center">…

ios 知识

IOS 类文件.h和.m中interface的区别 大家都知道我们在创建类文件时会发现&#xff1a; #import <UIKit/UIKit.h>interface ViewController : UIViewControllerend和 #import "ViewController.h"interface ViewController ()end那么他们之间有何区别呢&#x…

MySql存储过程详解

文章目录 存储过程1 介绍 基本语法创建:调用查看删除演示: 变量相关系统变量演示: 用户自定义变量局部变量 if语法参数介绍casewhilerepeatloop游标条件处理程序存储函数 存储过程 1 介绍 存储过程是事先经过编译并存储在数据库中的一段 SQL 语句的集合&#xff0c;调用存储过…

kafka 02——三个重要的kafka客户端

kafka 02——三个重要的kafka客户端 1. 前言1.1 关于 Kafka 的安装1.2 常用客户端简介1.3 依赖 2. AdminClient2.1 Admin Configs2.2 AdminClient API2.2.1 设置 AdminClient 对象2.2.2 创建 topic 获取 topic 列表2.2.3 删除topic2.2.4 查看 topic 的描述信息2.2.5 查看 topi…

Python系统学习1-7-字典

一、字典 1、概念及内存图 列表&#xff1a;由一系列变量组成的可变序列容器字典&#xff1a;由一系列键值对组成的可变散列容器字典优势&#xff1a;利用&#xff08;内存&#xff09;空间&#xff0c;换取&#xff08;CPU查找&#xff09;时间 键key 必须唯一且为不…

学无止境·运维高阶⑤(LVS-DR 群集 配置Nginx负载均衡)

LVS-DR 群集 && 配置Nginx负载均衡 一、LVS-DR 群集1、相关配置环境2、在RS上配置并启动脚本2.1相关脚本2.2 启动脚本&#xff0c;另一台RS同样步骤 3、LVS-DR模式配置脚本4、测试 二、Nginx负载均衡1、安装Nginx并关闭相应设置2、向主机 node2&#xff0c;node3 写入内…

JDK 17 营销初体验 —— 亚毫秒停顿 ZGC 落地实践 | 京东云技术团队

前言 自 2014 年发布以来&#xff0c; JDK 8 一直都是相当热门的 JDK 版本。其原因就是对底层数据结构、JVM 性能以及开发体验做了重大升级&#xff0c;得到了开发人员的认可。但距离 JDK 8 发布已经过去了 9 年&#xff0c;那么这 9 年的时间&#xff0c;JDK 做了哪些升级&am…

《golang设计模式》第二部分·结构型模式-01-适配器模式(Adapter)

文章目录 1. 概念1.1 角色1.2 应用场景1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 示例类图 1. 概念 定义一个适配器&#xff0c;帮助原本不能实现接口的类“实现”该接口 1.1 角色 目标&#xff08;Target&#xff09;&#xff1a;客户端调用的目标接口 被适配者&#xff08…

OSI七层模型及TCP/IP四层模型

目录 OSI七层模型 TCP/IP四层模型 OIS七层模型和TCP/IP模型图 七层详解 两种模型比较 为什么OSI七层体系结构不常用 四层详解 网络为什么要分层&#xff1f; 说说 OSI 七层模型和 TCP/IP 四层模型的关系和区别 OSI七层模型 OSI&#xff08;Open System Interconnect&a…

ModaHub魔搭社区:Milvus Cloud素材集合帖,等你查收

Hi~Milvus Cloud 的各位朋友,这是一期 Milvus Cloud 素材弹药库的集中汇总帖。随着向量数据库的火爆,越来越多的伙伴开始关注到向量数据库并开始使用 Milvus Cloud 。 考虑到目前信息获取的渠道多且分散,我们专门为大家整理了一期 Milvus Cloud 信息集合帖,让大家可以在快…

ppt怎么压缩?试试这样压缩文件

当PPT文件体积过大时&#xff0c;打开的速度就会很慢&#xff0c;演示的时候刘程度也会受到影响&#xff0c;其次&#xff0c;现在很多平台对于上传的文件是有大小限制的&#xff0c;比如超过100M的文件就无法上传、发送等等&#xff0c;那么&#xff0c;怎么才能压缩PPT文件呢…

CentOS安装Postgresql

PG基本安装步骤 安装postgresql&#xff1a; sudo yum install postgresql-server初始化数据库&#xff1a;安装完毕后&#xff0c;需要初始化数据库并创建初始用户&#xff1a; sudo postgresql-setup initdb启动和停止服务&#xff1a; sudo systemctl start postgresql sudo…

Android之版本号、版本别名、API等级对应关系(全)(一百六十二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

微服务07-分布式缓存

前提: 单机的Redis存在四大问题: 解决办法:基于Redis集群解决单机Redis存在的问题 1、Redis持久化 Redis 具有持久化功能,其会按照设置以 快照 或 操作日志 的形式将数据持久化到磁盘。 Redis有两种持久化方案: RDB持久化AOF持久化注意: RDB 是默认持久化方式,但 Red…

Clone函数

概述 Clone函数是一种用于复制的计算机函数。在程序编写中&#xff0c;除了自定义一个拷贝构造函数来实现对象复制外&#xff0c;还可以实现一个clone函数。这需要借助编译器实现的一个隐藏拷贝构造函数&#xff0c;这样的做法&#xff0c;更省心。 中文名clone函数外文名clon…

Sql server还原失败(数据库正在使用,无法获得对数据库的独占访问权)

一.Sql server还原失败(数据库正在使用,无法获得对数据库的独占访问权) 本次测试使用数据库实例SqlServer2008r2版 错误详细&#xff1a; 标题: Microsoft SQL Server Management Studio ------------------------------ 还原数据库“Mvc_HNHZ”时失败。 (Microsoft.SqlServer.…

设计模式之Bridge模式的C++实现

目录 1、Bridge模式的提出 2、Bridge模式的定义 3、Bridge模式总结 4、需求描述 5、多继承方式实现 6、使用Bridge设计模式实现 1、Bridge模式的提出 在软件功能模块设计中&#xff0c;如果类的实现功能划分不清晰&#xff0c;使得继承得到的子类往往是随着需求的变化&am…

关于 Eclipse 的一场 “三角关系”

上个世纪 90 年代&#xff0c;世界上的计算机要么不联网&#xff0c;要么在企业内部联网。但是&#xff0c;在互联网的概念下&#xff0c;计算机之间共享信息和资源的需求成为了必要。 1995 年 5 月&#xff0c;Java 横空出世。Java 的父亲是当时凭借 Solaris 操作系统风头正盛…

flutter 手写日历组件

先看效果 直接上代码 calendar_popup_view.dart import package:flutter/material.dart; import package:intl/intl.dart;import custom_calendar.dart; import hotel_app_theme.dart;class CalendarPopupView extends StatefulWidget {const CalendarPopupView({required th…

OpenCV项目开发实战--相机校准—并附实例Python/C++代码实现

介绍 相机标定是计算机视觉中的一项基本任务在 3D 重建、对象跟踪、增强现实和图像分析等各种应用中至关重要。准确的校准通过校正失真和估计相机的内在和外在参数来确保精确的测量和可靠的分析。这本综合指南深入探讨了相机校准的原理、技术和算法。我们探索获取相机的内在和…