讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

使用 Reactlazy 进行代码分割：增强应用程序的性能

聖光之護

发布时间：2024-12-19 21:42:24

920人浏览过

来源于php中文网

原创

使用 reactlazy 进行代码分割：增强应用程序的性能

React 代码分割：React.lazy 的应用

优化 React 应用性能的关键技术之一是代码分割，即将 JavaScript 代码拆分成更小的块。React 提供了 React.lazy 这一内置方法，可在组件级别实现代码分割，按需动态加载应用的不同部分。

React.lazy 与代码分割的协同工作机制

动态导入: 使用 ES6 的 import() 语法动态加载组件。
更小的包体积: 将应用拆分成更小的包，缩短初始加载时间。
异步加载: 组件仅在需要时异步加载。

语法

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    加载中...

}> ); }

React.lazy: 用于动态导入组件。
Suspense: 在组件加载期间提供备用 UI。

示例 1：React.lazy 实现基本代码分割

无代码分割

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    
      主应用
      
    
  );
}

export default App;

此方法中，HeavyComponent 与主应用打包在一起，即使并非立即需要。

使用代码分割

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    
      主应用
      加载中...}>

); } export default App;

现在，HeavyComponent 仅在渲染时加载，减小了初始包大小。

示例 2：路由中的代码分割

代码分割与 React Router 完美配合，实现路由组件的动态加载。

方科销售分析系统

“方科”为仿代码站ERP系列品牌，仿代码站专注于应用型程序制作，提倡“仿客”概念，仿功能而不仅仅是改代码，所有的代码都应当自行编写，争取超过原有程序。销售分析系统为仿代码站站长根据多年店铺经营经验原创制作，能够为小型店铺的进货提供有效数据支持。根据本系统的数据，可以得出一段时间内的耗货量，有助于减少货物积压所造成的不必

下载

import React, { Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Contact = React.lazy(() => import("./Contact"));

function App() {
  return (
    
      页面加载中...

}> } /> } /> } /> ); } export default App;

优势：

每个路由组件（Home、About、Contact）仅在访问对应路由时加载。

示例 3：延迟加载多个组件

通过逻辑拆分，在一个应用中延迟加载多个组件。

import React, { Suspense, useState } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  return (
    
      
      

      加载中...}>
        {showA && }
        {showB && }

); } export default App;

React.lazy 的错误处理

React 未提供针对导入失败的内置错误处理。可以使用 错误边界 来处理这种情况。 (此处省略错误边界示例代码，与原文一致)

代码分割最佳实践

按路由或功能拆分: 将应用分成逻辑块，例如路由或主要功能。
最小化备用 UI: 使用轻量级备用 UI，例如加载指示器。
监控包体积: 使用 Webpack Bundle Analyzer 等工具识别大型组件。
避免过度分割: 平衡块数量与性能；过多的块会增加 HTTP 请求。

增强代码分割的工具

Webpack: 支持动态导入以进行代码分割。
Vite: 提供快速构建和自动代码分割。
React Router: 支持与基于路由的延迟加载轻松集成。
React Loadable: 第三方库，增强对延迟加载的控制。

总结

使用 React.lazy 进行代码分割是提升应用性能的有效方法。通过动态加载组件，可以减少初始加载时间，提升用户体验。结合 Suspense 和适当的错误处理，它为构建高效、可扩展的 React 应用提供了强大的解决方案。

javascript数据可视化怎么做_d3.js和chart.js怎么选【教程】

javascript异步编程是什么_回调函数如何工作【教程】

javascript怎样处理异步操作_promise如何使用【教程】

如何用javascript操作Canvas进行绘图？【教程】

为什么Async_Await简化了javascript异步编程【教程】

数码产品性能查询

该软件包括了市面上所有手机CPU，手机跑分情况，电脑CPU，电脑产品信息等等，方便需要大家查阅数码产品最新情况，了解产品特性，能够进行对比选择最具性价比的商品。

下载

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

559

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

437

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

776

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

479

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

554

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

1091

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

659

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

554

2023.09.20