React.lazy() 懒加载

概要

React.lazy() 是 React 16.6 引入的一个功能,用于实现代码分割(code splitting)。它允许你懒加载组件,即在需要时才加载组件,而不是在应用初始加载时就加载所有组件。这种方法可以显著提高应用的性能,尤其是在大型应用中。

基本用法

React.lazy() 仅接受一个函数,该函数必须返回一个动态引入的模块(使用 import()

  • 懒加载组件

假设你有一个名为 MyComponent.js 的组件,你可以这样使用 React.lazy()

import React, { Suspense, lazy } from 'react';// 使用 React.lazy() 懒加载组件
const MyComponent = lazy(() => import('./MyComponent'));const App = () => {return (<div><h1>我的应用</h1><Suspense fallback={<div>加载中...</div>}><MyComponent /></Suspense></div>);
};export default App;
  • 使用Suspense 

 懒加载组件时,必须使用 Suspense 组件来包裹懒加载的组件。Suspense 组件允许你定义一个 fallback 属性,这个属性是组件在加载过程中显示的内容。例如,可以显示一个加载指示器。

例如:如果不使用Suspense包裹组件,有可能遇到这种报错信息:

A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

这个错误提示是因为在处理用户输入(如点击、键盘输入等)时,某个懒加载的组件(使用 React.lazy())被挂起了(suspended),导致 React 需要显示一个加载指示器。而这种情况通常是由于 React 在渲染期间遇到了懒加载组件,但该组件尚未加载完成。(通俗的说,是React使用了lazy之后,会存在一个加载中的空档期,React不知道在这个空档期中该显示什么内容,所以需要我们指定,所以就要使用到Suspense

  • 动态导入

使用动态导入(如 import() 语法)来实现代码分割,使得开发者可以在应用的不同部分按需加载模块,提高了代码的组织性和可维护性

原理解释

代码分割 — 优化 Web 应用性能的一种技术,主要目的是将大型应用程序的 JavaScript 代码拆分成更小的、按需加载的块。

为什么要代码分割?

现在前端项目基本都采用打包技术,比如 Webpack,JS逻辑代码打包后会产生一个 bundle.js 文件,而随着我们引用的第三方库越来越多或业务逻辑代码越来越复杂,相应打包好的 bundle.js 文件体积就会越来越大,因为需要先请求加载资源之后,才会渲染页面,这就会严重影响到页面的首屏加载。

1. 提高加载性能
  • 初始加载时间:当用户首次访问一个大型应用时,加载所有的 JavaScript 文件可能会导致较长的加载时间。通过代码分割,应用只会加载必要的代码,从而减少初始加载的体积。

  • 按需加载:代码分割允许应用在需要时才加载特定的代码块,比如当用户导航到某个特定的页面或触发特定的操作时。这种方式可以显著提高用户体验。

2. 资源优化
  • 减少资源浪费:在大型应用中,用户可能并不会访问所有的功能。通过代码分割,只加载用户实际需要的代码,可以减少不必要的资源消耗和带宽使用。

  • 缓存优化:将代码分割成多个小块也有助于利用浏览器的缓存机制。如果某个小块的代码发生变化,只有该块需要重新加载,而其他未改变的代码块可以继续使用缓存。

3. 更好的用户体验
  • 流畅的导航:通过懒加载(Lazy Loading)技术,可以实现更流畅的导航体验。当用户需要某个页面时,相关的代码可以在后台加载,减少等待时间。

  • 避免闪烁:当用户在应用中进行操作时,代码分割可以确保在加载新内容时不会出现大的延迟,从而增强用户体验。

什么时候应该考虑代码分割?

1. 大型应用
  • 复杂性:如果你的应用功能复杂、组件数量多,或者页面之间的依赖关系复杂,代码分割可以显著改善加载性能。大型应用通常会受益于将代码拆分成更小的块,只在需要时加载。
2. 首次加载时间过长
  • 用户体验:如果用户在首次访问应用时需要等待较长时间才能看到任何内容,那么应该考虑代码分割。通过只加载必要的代码,减少初始加载时间,可以提高用户体验。
3. 使用路由
  • 页面导航:如果你的应用使用了客户端路由(例如 React Router),可以考虑在用户导航到新页面时懒加载相关的页面组件。这种方式可以确保用户只加载他们正在访问的内容。
4. 资源优化
  • 带宽和性能:如果你的应用用户分布在不同的网络环境中,代码分割可以帮助优化资源使用,减少不必要的带宽消耗,尤其是在移动设备上。
5. 特定功能模块
  • 懒加载特性:如果你的应用有某些功能模块并不是所有用户都会使用(例如设置、报告、帮助等),可以将这些模块懒加载,以减少初始加载的负担。
6. 动态内容
  • 根据用户交互加载:如果你的应用的某些部分依赖于用户的交互(例如点击按钮、选择选项等),可以在用户触发这些交互时动态加载相关的代码。
7. 现代前端框架支持
  • 利用框架功能:许多现代前端框架(如 React、Vue、Angular 等)都提供了原生的代码分割和懒加载支持。如果你正在使用这些框架,应该考虑利用它们的功能来实现代码分割。
8. 提高开发效率
  • 团队协作:如果你的团队较大并且在开发大型应用,代码分割可以让不同的团队成员专注于各自的模块,而不必担心整体构建的复杂性。
9. 优化性能监测
  • 分析工具:如果你使用性能监测工具(如 Google Lighthouse 或 Web Vitals)监控应用的加载性能,并发现其评分较低,代码分割可能是一个有效的优化方案

注意:使用React.lazy() 后,组件会被 懒加载,并且会被 打包成一个独立的 chunk(即一个单独的 JavaScript 文件)。这样,只有在该组件被需要时,它才会被异步加载到浏览器中,从而减少初始页面的加载时间和资源消耗。

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

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

相关文章

引入 axios,根据 api 文档生成调用接口

起步 | Axios Docs 安装 axios npm install axios 生成 api 调用接口【可选】 https://github.com/ferdikoomen/openapi-typescript-codegen 安装 npm install openapi-typescript-codegen --save-dev 然后执行生成代码 # http://localhost:8805/api/user/v3/api-docs&a…

Swift 扩展

Swift 扩展 Swift 是一种强大的编程语言&#xff0c;由苹果公司开发&#xff0c;用于iOS、macOS、watchOS和tvOS应用程序的开发。自2014年发布以来&#xff0c;Swift因其易于阅读和编写的语法、现代化的设计以及出色的性能而广受欢迎。本文将探讨Swift的一些关键特性&#xff…

2款使用.NET开发的数据库系统

今天大姚给大家分享2款使用.NET开发且开源的数据库系统。 Garnet Garnet是一款由微软研究院基于.NET开源的高性能、跨平台的分布式缓存存储数据库&#xff0c;该项目提供强大的性能&#xff08;吞吐量和延迟&#xff09;、可扩展性、存储、恢复、集群分片、密钥迁移和复制功能…

ARM-8 定位发布版本 pstree 程序的 main 地址

逆向时如何找到main&#xff0c;如下&#xff1a; 1.readelf -h pstree ELF Header: Magic: 7f 45 4c 46 02 01 01 00 00 00 00 00 00 00 00 00 Class: ELF64 Data: 2s complement, little endian Versi…

13.UE5流星火雨,引导施法技能制作

2-15 流星火雨&#xff0c;引导施法技能制作、随机数_哔哩哔哩_bilibili 目录 1.为流星火雨添加按键映射 2.创建流星火雨的动画蒙太奇 3.实现播放动画蒙太奇的逻辑 ​编辑 4.定义发射一波流星火雨的发射物 5.使用动画通知释放流星火雨 1.为流星火雨添加按键映射 创建名为流…

Zabbix5 通过 Rsyslog 实现设备日志收集分析syslog及监控告警

一、概述 本文档详细描述了如何使用 Zabbix5 和 Rsyslog 实现对设备日志的收集、监控以及在满足特定条件下触发告警的完整流程&#xff0c;包括环境准备、Rsyslog 配置、Zabbix5 配置以及常见问题排查等内容。 二、环境准备 服务器环境 操作系统&#xff1a;CentOS&#xff08;…

开源竞争-利用kimi编程助手搭建小程序(11)

开源竞争&#xff1a; 当你无法彻底掌握技术的时候&#xff0c;你就开源这个技术&#xff0c;让更多的人了解这个技术&#xff0c;培养出更多的技术依赖&#xff0c;你会说&#xff0c;这不就是在砸罐子吗&#xff1f;一个行业里面总会有人砸罐子的&#xff0c;不是你先砸罐子&…

mybatis连接PGSQL中对于json和jsonb的处理

pgsql数据库表字段设置了jsonb格式&#xff1b;在java的实体里使用String或者对象转换会一直提示一个错误&#xff1a; Caused by: org.postgresql.util.PSQLException: ERROR: column "xx" is of type jsonb but expression is of type character varying 需要加一…

Web大型网站的性能测试要求和工具方法

Web大型网站的性能测试要求和工具方法涉及多个层面的考量&#xff0c;旨在确保网站在高并发访问、大数据量处理、复杂交互场景下仍能保持良好的用户体验和系统稳定性。以下是针对大型网站性能测试的主要要求和相应的工具与方法&#xff1a; 性能测试要求 1. 高并发处理能力&…

Java 处理 json 格式数据解析为 csv 格式

Java处理json格式数据解析为csv格式 如果不使用 JSON 工具库&#xff0c;你可以手动解析 JSON 格式字符串并将其转换为 CSV 格式字符串。 以下是一个简单示例&#xff0c;展示如何实现这一功能。 示例代码 下面的示例代码手动处理 JSON 字符串&#xff0c;将其转换为 CSV 格式字…

python+智谱AI-实现钉钉消息自动回复

python智谱AI-实现钉钉消息自动回复 实现了电脑窗口切换&#xff0c;截图识别未读消息&#xff0c;与语言模型交互后&#xff0c;将答案带入到钉钉窗口中。偷个懒&#xff0c;直接贴代码了&#xff0c;后续不断完善注释&#xff0c;如果遇到读不懂的地方&#xff0c;欢迎交流。…

贪心算法day3(最长递增序列问题)

目录 1.最长递增三元子序列 2.最长连续递增序列 1.最长递增三元子序列 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;我们只需要设置两个数进行比较就好。设a为nums[0]&#xff0c;b 为一个无穷大的数&#xff0c;只要有比a小的数字就赋值…

Javascript如何获取指定网页中的内容?

这两天有一个需求&#xff0c;就是通过JS去获取网页的内容&#xff0c;当然&#xff0c;除了今天我要分享的这个方法以外&#xff0c;其实通过Ajax的Get方法也是可以实现这个功能的&#xff0c;但是Ajax就比较麻烦一些了&#xff0c;如果只是单纯的想要获取一下纯内容&#xff…

在CentOS7传统部署wordpress

1 环境准备 所需环境说明CentOS7.9ip地址&#xff1a;10.0.0.7&#xff0c;可以上网PHP72系列软件下面会介绍MySQL数据库暴露端口3306&#xff0c;用户wordpress&#xff0c;库wordpressnginx版本任意wordpres v6.5.2代码下载地址&#xff1a;https://cn.wordpress.org/wordpr…

文献阅读 | Nature Methods:使用 STAMP 对空间转录组进行可解释的空间感知降维

文献介绍 文献题目&#xff1a; 使用 STAMP 对空间转录组进行可解释的空间感知降维 研究团队&#xff1a; 陈金妙&#xff08;新加坡科学技术研究局&#xff09; 发表时间&#xff1a; 2024-10-15 发表期刊&#xff1a; Nature Methods 影响因子&#xff1a; 36.1&#xff0…

vs2022搭建opencv开发环境

1 下载OpenCV库 https://opencv.org/ 下载对应版本然后进行安装 将bin目录添加到系统环境变量opencv\build\x64\vc16\bin 复制该路径 打开高级设置添加环境变量 vs2022新建一个空项目 修改属性添加头文件路径和库路径 修改链接器&#xff0c;将OpenCV中lib库里的o…

GA/T1400视图库平台EasyCVR多品牌摄像机视频平台前端监控摄像头镜头的基础知识

在现代安全监控系统中&#xff0c;摄像机镜头作为捕捉图像的关键组件&#xff0c;其选择和应用直接影响到监控图像的质量和系统的整体性能。随着技术的发展&#xff0c;摄像机镜头的种类和功能也在不断扩展&#xff0c;以适应各种复杂的监控环境和需求。对于相机成像来讲&#…

省级数字经济发展水平数据(2011-2022年)

数字经济是指以数据资源为关键要素&#xff0c;以现代信息网络为主要载体&#xff0c;以信息通信技术融合应用、全要素数字化转型为重要推动力&#xff0c;促进公平与效率更加统一的新经济形态。 2011-2022年省级数字经济发展水平数据&#xff08;&#xff09;.zip资源-CSDN文…

PostGreSQL接入Prometheus

postgres_exporter包 https://github.com/prometheus-community/postgres_exporter/tree/master 启动 [program:postgres] command/opt/proms/postgres_exporter/postgres_exporter environmentDATA_SOURCE_NAME"postgresql://postgres:xxxx-bi.cv02mbuo4ins.us-east-1.…

【WRF模拟】全过程总结:WPS预处理及WRF运行

【WRF模拟】全过程总结:WPS预处理及WRF运行 1 数据准备1.1 嵌套域设置(Customize domain)-基于QGis中gis4wrf插件1.2 静态地理数据1.2.1 叶面积指数LAI和植被覆盖度Fpar(月尺度)1.2.2 地面反照率(月尺度)1.2.3 土地利用类型+不透水面积1.2.4 数据处理:geotiff→tiff(W…