当前位置：首页 > news >正文

前端性能优化：HMR热更新和预获取加载

news 来源：原创 2025/5/24 18:08:52

最近发现项目开发，有点加载快，有点却是卡机式，甚至刷新导致白屏情况。于是，我找开发和性能优化的方法，找到下面几种。

本文将深入探讨 预获取（Prefetch）、动态导入（Dynamic Import） 和 热模块替换（HMR） 这三个关键技术

1. 预获取（Prefetch）：加速后续页面加载

1.1 什么是预获取？

预获取（Prefetch）是一种性能优化技术，允许浏览器在空闲时提前加载后续页面或功能所需的资源（如 JavaScript 文件）。通过预获取，可以减少用户后续操作的等待时间，提升用户体验。

1.2 Webpack 中的预获取

在 Webpack 打包的应用中，当父 chunk（即当前页面或功能所需的代码块）加载完成后，Webpack 会自动为子 chunk 添加预获取提示（prefetch hint）。浏览器会根据这些提示，在空闲时提前加载子 chunk。

示例场景

假设有一个页面 A，加载了父 chunk A。页面 A 中有一个按钮，点击后会加载页面 B（对应子 chunk B）。Webpack 会在父 chunk A 加载完成后，自动添加如下代码：

<link rel="prefetch" href="chunkB.js">

rel="prefetch"：表示这是一个预获取提示。
href="chunkB.js"：指定需要预获取的资源路径。

预获取的优势

减少延迟：提前加载资源，用户点击按钮时页面 B 的加载速度更快。
提升用户体验：用户感知不到资源加载的等待时间。

2. 动态导入（Dynamic Import）：按需加载模块

2.1 什么是动态导入？

动态导入是 ES6 提供的一种语法，允许在运行时异步加载模块。它返回一个 Promise，当模块加载完成后，Promise 会被解析为模块对象。

2.2 动态导入的两种导出方式

默认导出（export default）：
- 模块对象会包含一个 default 属性，指向默认导出的值。
- 访问默认导出值时，需要通过 module.default。
命名导出（export const foo = 1）：
- 模块对象会直接包含命名导出的属性。

示例代码

假设有一个模块 myModule.js：

// myModule.js
const foo = 'Hello, World!';
export default foo;

在另一个文件中动态导入该模块：

import('./myModule.js').then(module => {// 注意：默认导出值需要通过 module.default 访问console.log(module.default); // 输出: Hello, World!}).catch(error => {console.error('模块加载失败:', error);});

2.3 动态导入的优势

按需加载：只在需要时加载模块，减少初始加载时间。
代码分割：结合 Webpack 等工具，可以实现代码分割，优化性能。

3. 热模块替换（HMR）：提升开发效率

3.1 什么是 HMR？

热模块替换（Hot Module Replacement，HMR）是一种开发工具功能，允许在代码修改后，只替换发生变化的模块，而无需刷新整个页面。这样可以保留应用的状态，提升开发效率。

3.2 HMR 的工作原理

监听文件变化：开发工具（如 Webpack）会监听项目文件的变化。
推送更新：当文件被修改时，开发工具会将变化的模块推送到浏览器。
替换模块：浏览器接收到更新后，用新的模块替换旧的模块。
执行回调：如果模块定义了 HMR 相关的回调（如 module.hot.accept），则会执行这些回调以处理更新逻辑。

3.3 配置 HMR（以 Webpack 为例）

1. 启用 HMR

在 webpack.config.js 中启用 HMR：

const webpack = require('webpack');module.exports = {// 其他配置...devServer: {hot: true, // 启用 HMR},plugins: [new webpack.HotModuleReplacementPlugin(), // 添加 HMR 插件],
};

2. 在代码中处理 HMR

在入口文件中添加 HMR 的逻辑：

if (module.hot) {module.hot.accept('./App', () => {// 当 App 模块更新时，执行此回调render(<App />, document.getElementById('root'));});
}

3.4 HMR 的优势

快速反馈：开发者可以立即看到代码修改的效果。
保持状态：应用的状态不会丢失，提升调试效率。
提高开发效率：减少重复操作（如重新输入表单数据、重新导航到某个页面等）。

4. 立即执行函数表达式（IIFE）：异步初始化

4.1 什么是 IIFE？

IIFE（Immediately Invoked Function Expression）是一种定义后立即执行的函数表达式。它通常用于创建一个独立的作用域，避免污染全局作用域。

4.2 IIFE 的语法

(async () => {await server.start();console.log('dev server 正在运行');
})();

async () => { ... }：定义一个异步函数。
()：立即调用这个函数。

4.3 IIFE 的使用场景

启动开发服务器：在开发工具中，启动本地开发服务器时常用这种模式。
初始化异步任务：在需要立即执行的异步任务中（如加载配置、初始化数据库连接等），IIFE 是一种常见的选择。

总结

预获取（Prefetch）：通过提前加载资源，优化后续页面或功能的加载速度。
动态导入（Dynamic Import）：按需加载模块，减少初始加载时间。
热模块替换（HMR）：提升开发效率，快速反馈代码修改效果。
IIFE：适合异步初始化和避免污染全局作用域。

通过合理使用这些技术，可以显著提升前端应用的性能和开发效率。希望本文对你有所帮助！如果有任何问题，欢迎随时讨论。

前端性能优化：HMR热更新和预获取加载

最近发现项目开发，有点加载快，有点却是卡机式，甚至刷新导致白屏情况。于是，我找开发和性能优化的方法，找到下面几种。本文将深入探讨预获取（Prefetch）、动态导入（Dynamic Import&…...

编程日记 2025/5/24 18:08:52

OpenCV相机标定与3D重建(66)对立体匹配生成的视差图（disparity map）进行验证的函数validateDisparity()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述使用左右检查来验证视差。矩阵 “cost” 应该由立体对应算法计算。 cv::validateDisparity 函数是 OpenCV 库中用于对立体匹配生成的视差图&…...

编程日记 2025/5/24 17:44:56

git reset (取消暂存,保留工作区修改)

出现这种情况的背景：我不小心把node_modules文件添加到暂存区了，由于文件过大，导致不能提交，所以我想恢复之前的状态，但又不想把修改的代码恢复为之前的状态，所以使用这个命令可以只恢复暂存区的状态&#…...

编程日记 2025/5/22 18:19:02

【论文+源码】diffuseq使用扩散模型和diffuseq-v2的序列文本生成序列，并且桥接离散和连续的文本空间，用于加速SEQ2SEQ扩散模型。

这篇论文介绍了一种名为DIFFUSEQ的新型扩散模型，专门针对序列到序列（SEQ2SEQ）文本生成任务进行设计。尽管扩散模型在视觉和音频等连续信号领域取得了成功，但在自然语言处理特别是条件生成方面的适应仍然未被广泛探索。通过广泛的评…...

编程日记 2025/5/24 8:23:26

考研机试题：打印日期

描述给出年分m和一年中的第n天，算出第n天是几月几号。输入描述: 输入包括两个整数y(1<y<3000)，n(1<n<366)。输出描述: 可能有多组测试数据，对于每组数据， 按 yyyy-mm-dd的格式将输入中对应的日期打印出来。 …...

编程日记 2025/5/21 3:20:01

试验的ffmpeg版本 4.1.3 本文使用的config命令 ./configure --prefixhost --enable-shared --disable-static --disable-doc --enable-postproc --enable-gpl --enable-swscale --enable-nonfree --enable-libfdk-aac --enable-decoderh264 --enable-libx265 --enable-libx…...

编程日记 2025/5/17 21:27:51

springboot使用ssl连接elasticsearch

使用es时ssl证书报错 unable to find valid certification path to requested target 1.依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency>2…...

编程日记 2025/5/22 4:30:11

虚拟头节点和双指针解决链表问题（合并，与分解操作，力扣题目为例）

Problem: 21. 合并两个有序链表 Problem: 86. 分隔链表文章目录总览说明题目描述思路复杂度Code总结分析总览说明在解决链表相关的算法题目时较多使用到的技巧就是虚拟头节点、双指针，而题目往往都会涉及到对链表的分解、合并操作，本文选择两个题目将…...

编程日记 2025/5/24 17:08:04

JavaScript系列（38）-- WebRTC技术详解

JavaScript WebRTC技术详解 🎥 今天，让我们深入了解WebRTC（Web Real-Time Communication）技术，这是一种支持网页浏览器进行实时语音对话或视频对话的技术。 WebRTC基础概念 🌟 💡 小知识&…...

编程日记 2025/5/18 7:11:40

分布式理解

分布式如何理解分布式狭义的分布是指，指多台PC在地理位置上分布在不同的地方。分布式系统分布式系**统：**多个能独立运行的计算机（称为结点）组成。各个结点利用计算机网络进行信息传递，从而实现共同的“目标或者任…...

编程日记 2025/5/21 7:34:01

JVM学习指南(48)-JVM即时编译

文章目录即时编译（Just-In-Time Compilation, JIT）概述为什么JVM需要即时编译？即时编译与传统的静态编译的区别JVM中的即时编译器HotSpot VM中的C1和C2编译器编译器的作用和位置即时编译的工作流程代码的加载和解释执行热点代码检测编译优化编译优化技术公共子表达式消除循…...

编程日记 2025/5/15 11:00:11

python http调用视觉模型moondream

目录一、什么是moondream 二、资源地址三、封装了http进行接口请求四、代码解析解释可能的改进一、什么是moondream Moondream 是一个针对视觉生成任务的深度学习模型，专注于图像理解和生成，包括图像标注（captioning）、问题回答（Visual Question Answering，…...

编程日记 2025/5/24 18:04:29

【竞技宝】DOTA2:NAVI junior被ESL取消参赛资格

北京时间1月24日,DOTA2目前有多个赛事的预选赛正在如火如荼的进行之中,其中ESLOne罗利站的预选赛已经结束,参赛正赛的队伍也已经全部产生。除了因EPT积分而拿到直邀资格的PARI、BB、falcons、liquid之外,tundra、NAVI junior、spirit、nigma、XG、talon、SR、HEROIC也通过各赛区…...

编程日记 2025/5/21 10:31:49

Java 在包管理与模块化中的优势：与其他开发语言的比较

在开发复杂的、规模庞大的软件系统时，包管理和模块化设计起着至关重要的作用。它们不仅决定了代码的组织和可维护性，还直接影响到团队协作效率、扩展性和性能。在众多编程语言中，Java 凭借其成熟的生态系统、强类型系统和标准化的包管理机制&…...

编程日记 2025/5/19 21:10:23

如何用数据编织、数据虚拟化与SQL-on-Hadoop打造实时、可扩展兼容的数据仓库？

在大数据技术迅猛发展的背景下，许多人认为传统数据仓库已过时。然而，这种观点忽略了数据仓库的核心价值：统一的数据视图、强大的业务逻辑支撑以及丰富的数据分析能力。在企业数据架构转型中，数据仓库不仅未被淘汰，反而…...

编程日记 2025/5/24 17:24:46

MVCC底层原理实现

MVCC的实现原理了解实现原理之前，先理解下面几个组件的内容 1、当前读和快照读先普及一下什么是当前读和快照读。当前读：读取数据的最新版本，并对数据进行加锁。例如：insert、update、delete、select for update、 sele…...

编程日记 2025/5/22 7:19:29

【Nacos】负载均衡

目录前言一、服务下线二、权重配置三、同一个集群优先访问四、环境隔离前言我们的生产环境相对是比较恶劣的，我们需要对服务的流量进行更加精细的控制.Nacos支持多种负载均衡策略，包括配置权重，同机房，同地域，同环…...

编程日记 2025/5/24 0:39:41

Batch Normalization学习笔记

文章目录一、为何引入 Batch Normalization二、具体步骤1、训练阶段2、预测阶段三、关键代码实现四、补充五、参考文献一、为何引入 Batch Normalization 现在主流的卷积神经网络几乎都使用了批量归一化（Batch Normalization，BN）1&#xf…...

编程日记 2025/5/24 17:30:23

PIC单片机HEX文件格式分析

在调试PIC单片机在bootloader程序时，需要将hex文件转换为bin文件，在转换之前先了解一下hex文件中数据是如何定义的。直接打开一个LED灯闪烁的程序生成的hex文件，芯片型号为PIC18F46K80 可以看到每条数据都是由6部分组成的，下面分…...

编程日记 2025/5/24 16:26:11

【unity游戏开发之InputSystem——07】InputSystem+UGUI配合使用（基于unity6开发介绍）

文章目录一、InputSystem+UGUI配合使用1、官方文档参考2、切换到新的输入模块二、UGUI中的新输入系统输入模块参数相关1、Send Pointer Hover To Parent2、Move Repeat Delay3、Move Repeat Rate4、XR Tracking Origin5、Deselect On Background CLick6、Pointer Behavior7、S…...

编程日记 2025/5/24 17:05:42

RocketMQ 的 Topic 和消息队列MessageQueue信息，是怎么分布到Broker的？怎么负载均衡到Broker的？

目录 1. Topic 和 MessageQueue 的基本概念 1.1 Topic 1.2 MessageQueue 2. Topic 和 MessageQueue 的分布 2.1 Topic 的创建 2.2 MessageQueue 分配到 Broker 2.3 分布规则 3. 负载均衡机制 3.1 Producer 的负载均衡 3.2 Consumer 的负载均衡 3.3 Broker 的负载均衡…...

编程日记 2025/5/17 10:39:48

Qt简单迷宫游戏

目录你将学到你将准备你将改变你将设计你将编程开始界面游玩界面胜利界面其它bug修复你可扩展下一篇博客要说的东西你将学到 Qt中QKeySequence对象的基本创建Qt中QShortcut对象的基本应用Qt中QSoundEffect对象的基本应用你将准备在开始制作Qt简单迷宫游戏之前&#xff…...

编程日记 2025/5/23 0:57:33

Webrtc （1） - Windows 编译

最近项目上遇到webrtc wgc 的几个test case无法通过，与webrtc人员沟通后决定要自行修复一下(因为他们不想管…) 参考文档 https://webrtc.org/support/contributinghttps://chromium.googlesource.com/chromium/src//main/docs/#checking-out-and-building 以上两…...

编程日记 2025/5/24 17:21:10

深圳大学-智能网络与计算-实验一：RFID原理与读写操作

实验目的与要求掌握超高频RFID标签的寻卡操作。掌握超高频RFID标签的读写操作。掌握超高频RFID标签多张卡读取时的防冲突机制。方法，步骤软硬件的连接与设置超高频RFID寻卡操作超高频RFID防冲突机制超高频RFID读写卡操作实验过程及内容一．软硬…...

编程日记 2025/5/24 17:43:30

文献引用指南ChatGPT提示词分享

文献引用指南在学术写作中，准确引用是至关重要的环节。它不仅能够为您的研究提供坚实的学术基础，还能确保您尊重并认可他人的学术成果，从而有效避免抄袭的问题。而ChatGPT在这一方面同样能够为您提供有力的支持。借助ChatGPT，您…...

编程日记 2025/5/24 17:23:03

什么是计算机应用基础知识

计算机应用基础知识是指学习和掌握计算机的基本理论、硬件、软件、网络和应用技能的基础内容。它是为使用计算机进行日常工作、学习和解决实际问题打下的基础。计算机应用基础知识涉及多个领域，主要包括以下几个方面：一、计算机硬件基础计算机硬件组成：了解计算机的基本组…...

编程日记 2025/5/24 17:27:35

SpringBoot集成Flink-CDC，实现对数据库数据的监听

一、什么是 CDC ？ CDC 是Change Data Capture（变更数据获取）的简称。核心思想是，监测并捕获数据库的变动（包括数据或数据表的插入、更新以及删除等），将这些变更按发生的顺序完整记录下来&…...

编程日记 2025/5/23 0:15:15

微信小程序云开发服务端存储API 从云存储空间删除文件

deleteFile 从云存储空间删除文件 const cloud require(wx-server-sdk)exports.main async (event, context) > {const fileIDs [xxx, xxx]const result await cloud.deleteFile({fileList: fileIDs,})return result.fileList }写的资式如有不对，请各位大神多…...

编程日记 2025/5/23 21:33:33

[操作系统] 深入进程地址空间

程序地址空间回顾在C语言学习的时，对程序的函数、变量、代码等数据的存储有一个大致的轮廓。在语言层面上存储的地方叫做程序地址空间，不同类型的数据有着不同的存储地址。下图为程序地址空间的存储分布和和特性： 使用以下代码来验证一下…...

编程日记 2025/5/22 5:50:41

gitlab处理空文件夹的提交或空文件夹提交失败

问题描述厂家发给了我一个压缩包文件，压缩包解压之后本地编译没问题；推送到gitlab之后，再编译就报错了； 问题原因经过分析之后发现，压缩包解压之后存在很多空文件夹；但是gitlab推送的时候，…...

编程日记 2025/5/22 4:30:09

C++ —— 智能指针 unique_ptr （上）

C —— 智能指针 unique_ptr （上） 普通指针的不足普通指针的释放智能指针智能指针 unique_ptr智能指针初始化错误用法get()方法返回裸指针智能指针不支持指针的运算（、-、、- -） 普通指针的不足 new和new [] 的内存需要用delete和…...

编程日记 2025/5/24 15:00:52

ruoyi-vue-pro集成magic-api（图文代码）

目录前言1. 配置依赖2. 集成登录3. 成功展示前言 🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF 原先写过简单的集成：了解 magic-api的基本用法附实战代码 magic-api相关文档推荐阅读：接口鉴权相关的Java代码推荐阅读： java框架零基础从入门到精…...

编程日记 2025/5/19 3:01:03

【线上问题定位处理】及【性能优化】系列文章

目录性能优化性能优化九大服务架构性能优化方式如何进行GC调优如何排查线上系统出现的Full GC MySQL - 性能优化 MySQL - 分库分表大数据查询的处理方案 MySQL优化手段有哪些服务CPU100%问题如何快速定位？服务内存OOM问题如何快速定位？ JVM调优6大步骤线…...

编程日记 2025/5/20 14:32:24

如何解压rar格式文件？8种方法（Win/Mac/手机/网页端）

RAR 文件是一种常见的压缩文件格式，由尤金・罗谢尔（Eugene Roshal）开发，因其扩展名 “rar” 而得名。它通过特定算法将一个或多个文件、文件夹进行压缩，大幅减小存储空间，方便数据传输与备份。然而&#xf…...

编程日记 2025/5/21 6:14:29

GORM 支持的数据库解析

GORM 是一个流行的 Go 语言 ORM（对象关系映射）库，它简化了 Go 与数据库之间的交互。作为一款功能强大的库，GORM 支持多种主流关系型数据库，满足不同开发场景下的需求。本文将探讨 GORM 支持的主要数据库及其特点&#…...

编程日记 2025/5/20 16:42:22

分布式光纤应变监测是一种高精度、分布式的监测技术

一、土木工程领域桥梁结构健康监测主跨应变监测：在大跨度桥梁的主跨部分，如悬索桥的主缆、斜拉桥的斜拉索和主梁，分布式光纤应变传感器可以沿着这些关键结构部件进行铺设。通过实时监测应变情况，能够精确捕捉到车辆荷载、风荷…...

编程日记 2025/5/21 22:33:13

如何在oracle关闭情况下如何修改spfile的参数

如何在oracle关闭情况下如何修改spfile的参数一、问题背景二、处理方案一、问题背景在ORACLE数据库启动状态下通过下列代码修改了最大连接数 alter system set processes2000 scopespfile sid*;关闭了数据库再重新启动提示如下报错： ORA-00838: Specified valu…...

编程日记 2025/5/24 8:23:29

[ Spring ] Spring Cloud Gateway 2025 Comprehensive Overview

文章目录 Spring Gateway ArchitectureProject Level DependencyService CenterService ProviderGateway ServiceLaunch All Service Spring Gateway Architecture Service Center : register and find service providerService Provider : programs that provide actual serv…...

编程日记 2025/5/12 10:18:29