【前端工程化面试题】vite热更新原理

vite 在开发阶段,运行 vite 命令,会启动一个开发服务器,vite 在开发阶段是一个服务器

  1. 依赖 esm: vite 在开发阶段使用 esm 作为开发时的模块系统。esm 具有动态导入的能力,这使得在代码中引入模块时可以动态地加载新的模块,从而实现了热更新。
  2. HMR 机制:vite 利用了 webpack 等构件工具中常用的热模块替换机制,在代码发生变化时,只将修改的模块动态的注入到运行中的应用程序中,不需要刷新整个页面,从而实现热更新。
  3. 使用 websocket 进行通信:vite 使用了 websocket 在开发服务器和浏览器之间建立了一个持久的双向通信通过。通过这个通道,vite 能够实时的将代码推送给浏览器,使浏览器可以及时的获取到代码变化,并进行热更新。
    1. 开发服务器创建 websocket 并监听文件变化,并给客户端发送消息
    2. 客户端有一个 js 文件(/@vite/client)也创建 websocket ,用来接收开发服务器的消息,这个 js 文件,在项目启动阶段,会注入到入口文件 index.html 中,从而实现模块的热更新。
  4. 开发服务器:vite 提供了一个基于 koa 的开发服务器,这个服务器会监控系统中文件的变化,并在文件发生变化时触发重新构建和热更新。通过这个开发服务器,开发者可以在开发过程中实时地查看代码的变化效果。

综上所述,Vite 的热更新主要依赖于 ES Module 的动态导入特性、模块热替换机制、WebSocket 通信以及开发服务器等技术手段,通过这些技术手段的结合,Vite 能够实现快速、实时地将代码变化推送到浏览器端,从而实现了高效的热更新功能。

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

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

相关文章

Python对Excel文件进行操作

Python对Excel文件进行操作具有重要性的几个方面: 1. 数据处理:Excel文件通常包含大量的数据,使用Python可以轻松地读取、处理和分析Excel数据。Python提供了多种强大的数据处理库,如Pandas和NumPy,可以帮助用户对Exc…

人力资源智能化管理项目(day09:权限应用)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject 搭建页面结构 <template><div class"container"><div class"app-container"><el-button class"btn-add" type"p…

【COMP337 LEC4】

Classifier Evaluation Numerous measures exist (as we will shortly see) to compare the predicted labels by the trained classifier and actual ( target) labels in the test dataset 存在许多度量方法&#xff08;我们很快将会看到&#xff09;来比较训练过的分类器…

10-k8s中pod的探针

一、探针的概念 一般时候&#xff0c;探针的设置&#xff0c;都是为了优化业务时&#xff0c;需要做的事情&#xff1b;属于后期工作&#xff1b; 1&#xff0c;探针的分类 1&#xff0c;健康状态检查探针&#xff1a;livenessProbe 当我们设置了这个探针之后&#xff0c;检查…

6、内网安全-横向移动WmiSmbCrackMapExecProxyChainsImpacket

用途&#xff1a;个人学习笔记&#xff0c;有所借鉴&#xff0c;欢迎指正&#xff01; 前言&#xff1a; 在内网环境中&#xff0c;主机192.168.3.31有外网网卡能出网&#xff0c;在取得该主机权限后上线&#xff0c;搭建web应用构造后门下载地址&#xff0c;利用该主机执行相…

H.264官方手册之帧间预测

一、 框架 只有解码 P和 B类型的宏块时才能调用该过程。 该过程的输出为当前宏块的帧间预测采样点&#xff0c;是一个16x16的亮度采样点 pred(Luma)。以及当ChromaArrayType不等于0时输出 pred(Cb)与pred(Cr) 如果mb_type为B_Skip或者B_Direct_16x16&#xff0c;mbPartIdx的范…

【HarmonyOS】鸿蒙开发之渲染控制——第2.3章

if/eles条件渲染 if的使用方法与javascript&#xff0c;java中使用的if/eles条件渲染使用基本一致。 案例: Entry Component struct IfElseDemo{State isShow:boolean false;build(){Column() {TitleBar({titleBarAttribute: {title: "ifElse使用案例",backShow:…

【图论经典题目讲解】CF786B - Legacy 一道线段树优化建图的经典题目

C F 786 B − L e g a c y \mathrm{CF786B - Legacy} CF786B−Legacy D e s c r i p t i o n \mathrm{Description} Description 给定 1 1 1 张 n n n 个点的有向图&#xff0c;初始没有边&#xff0c;接下来有 q q q 次操作&#xff0c;形式如下&#xff1a; 1 u v w 表示…

【Langchain Agent研究】SalesGPT项目介绍(五)

【Langchain Agent研究】SalesGPT项目介绍&#xff08;四&#xff09;-CSDN博客 上节课&#xff0c;我们分析了一下salesGPT项目里源代码的一些问题&#xff0c;重新写了一个运行方法&#xff0c;换了一个模型并修改了一些源代码开始把项目跑起来了&#xff0c;我们已经…

【leetcode热题】二叉树的层序遍历

难度&#xff1a; 中等通过率&#xff1a; 46.1%题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述 给定一个二叉树&#xff0c;返回其按层次遍历的节点值。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&…

STM32F1 - 中断系统

Interrupt 1> 硬件框图2> NVIC 中断管理3> EXTI 中断管理3.1> EXTI与NVIC3.2> EXTI内部框图 4> 外部中断实验4.1> 实验概述4.2> 程序设计 5> 总结 1> 硬件框图 NVIC&#xff1a;Nested Vectored Interrupt Controller【嵌套向量中断控制器】 管理…

拿捏c语言指针(上)

目录 前言 ​编辑 指针 内存与地址 计算机常见单位 理解编址 取地址&#xff0c;指针变量&#xff0c;解引用 取地址 指针变量 解引用 指针变量大小 指针类型的作用 char*解引用后 指针-整数 应用 void*指针 const修饰指针变量 const修饰普通变量 const修饰指…

自动化测试-RIDE编写自动化脚本

自动化脚本软件测试的必修内容&#xff0c;是自动化测试的核心&#xff0c;脚本的逻辑严谨性、可维护性非常重要&#xff0c;优秀的自动化脚本需要能兼顾用例的正确有效性和自动化测试的效率&#xff0c;本篇文章将介绍如何用RIDE写自动化脚本。我们将深入探讨RIDE的具体用法&a…

相机图像质量研究(22)常见问题总结:CMOS期间对成像的影响--光学串扰

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结&#xff1a;光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结&#xff1a;光学结构对成…

C++:迭代器的封装思想

C&#xff1a;迭代器的封装思想 list迭代器实现反向迭代器实现 本博客将通过实现list的迭代器&#xff0c;以及它的反向迭代器&#xff0c;来帮助大家理解迭代器的底层逻辑&#xff0c;以及封装思想。 list迭代器实现 迭代器是一个遍历容器的工具&#xff0c;其可以通过自增自…

Linux POSIX信号量 线程池

Linux POSIX信号量 线程池 一. 什么是POSIX信号量&#xff1f;二. POSIX信号量实现原理三. POSIX信号量接口函数四. 基于环形队列的生产消费模型五. 线程池 一. 什么是POSIX信号量&#xff1f; POSIX信号量是一种用于同步和互斥操作的机制&#xff0c;属于POSIX&#xff08;Po…

项目管理工具软件Maven趣闻

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Maven这个单词来自于意第绪语&#xff08;Yiddish&#xff09;&#xff0c;这是一种与德语和希伯来语有密切关系的犹太民族语言。在这个语境中&#xff0c;Maven意为“知识的…

ChatGPT高效提问—prompt实践(智能辅导-心理咨询-职业规划)

ChatGPT高效提问—prompt实践&#xff08;智能辅导-心理咨询-职业规划&#xff09; ​ 智能辅导是指利用人工智能技术&#xff0c;为学习者提供个性化、高效的学习辅助服务。它基于大数据分析和机器学习算法&#xff0c;可以针对学习者的学习行为、状态和能力进行评估和预测&a…

Shell - 学习笔记 - 2.15 - Shell关联数组(下标是字符串的数组)

现在最新的 Bash Shell 已经支持关联数组了。关联数组使用字符串作为下标&#xff0c;而不是整数&#xff0c;这样可以做到见名知意。 关联数组也称为“键值对&#xff08;key-value&#xff09;”数组&#xff0c;键&#xff08;key&#xff09;也即字符串形式的数组下标&…

AutoSAR(基础入门篇)10.1-Autosar_Ecum模式管理概述

目录 一、什么是模式管理 二、再谈BswM 1、BswM概述 2、BswM执行流程 三、再谈EcuM 模式管理应该算是我们实践篇中较难的内容了,还有就是诊断那章也比较难。因为模式管理里面可能回涉及到很多的名词,很多的特性,所以博主准 备分个8次左右来讲解这些内容。但是在实际的应…