React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快

简介: 本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。

一次性加载太多的路由文件会使首次加载的速度很慢,所以我们需要将路由搞成懒加载的形式,用到哪个组件加载哪个组件。庆幸的是React官方已经给我们准备好了插件,也在React库中:

首先 从react这个库中导出lazy、Suspense这两个方法和组件。

import React,{
   Suspense,lazy} from 'react';

router之前的引入方式

import ManageAll from "../pages/Conf/ManageAll";

懒加载的引入当时:lazy函数需要调用

const ManageAll =lazy(()=> import("../pages/Conf/ManageAll"))

最后的操作是在路由
Switch组件外层包裹一层组件 Suspense

 <Suspense fallback={
   <div style={
   {
   display:"none"}}>lodding</div>}>
        <Switch>......Route等路由使用</Switch>
 </Suspense >

fallback属性必须加不加报错:
在这里插入图片描述
意思就是fallback属性需要啥一个dom标签 ,不想要的话我们可以设置css display:none,想要的话我们可以封装一个组件,比如在组件懒加载这段时间来显示一个LOGGING,组件加载完成后,这个会自动隐藏。
这样的话我们每次点击切换一个路由,会单独请求一个包:
在这里插入图片描述
上图是切换了两次的效果。

上版本首页打开时间:
在这里插入图片描述
改成懒加载后:
在这里插入图片描述

目录
相关文章
|
1月前
|
前端开发 API UED
React 懒加载图片 Lazy Image
懒加载是一种优化技术,通过延迟加载不在视口内的图片,减少初始页面加载时间,提升用户体验。本文从基础概念入手,逐步探讨 React 中实现图片懒加载的常见问题、易错点及解决方案,并通过代码案例详细解释。
43 3
|
1月前
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫(Guarded Routes),使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态,实现 `PrivateRoute` 组件进行路由保护,并在 `App.js` 中使用。文章还讨论了常见问题和易错点,提供了处理异步操作的示例,帮助开发者提升应用的安全性和用户体验。
53 1
|
1月前
|
前端开发 API UED
React 按需加载 Lazy Loading
随着 Web 应用复杂度增加,页面加载速度成为影响用户体验的关键因素。React 提供了按需加载(Lazy Loading)功能,通过 `React.lazy` 和 `Suspense` 实现动态加载组件,减少初始加载时间,提升性能。本文从基础概念入手,探讨常见问题、易错点及解决方案,并通过代码示例详细说明。
36 0
|
1月前
|
前端开发 安全 网络安全
React——路由Route
React——路由Route
35 2
React——路由Route
|
2月前
|
资源调度 前端开发 测试技术
React Router 路由管理
【10月更文挑战第10天】本文介绍了 React Router,一个在 React 应用中管理路由的强大工具。内容涵盖基本概念、安装与使用方法、常见问题及解决方案,如路由嵌套、动态路由和路由守卫等,并提供代码示例。通过学习本文,开发者可以更高效地使用 React Router,提升应用的导航体验和安全性。
311 19
|
1月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
2月前
|
缓存 前端开发 UED
React Suspense 懒加载详解
【10月更文挑战第18天】React Suspense 是 React 16.6 引入的新特性,主要用于处理异步数据获取和组件懒加载。本文从 Suspense 的基本概念出发,介绍了其在代码分割和数据获取中的应用,通过具体代码示例展示了如何使用 `React.lazy` 和 `Suspense` 实现组件的懒加载,并探讨了实践中常见的问题及解决方法,帮助开发者提升应用性能和用户体验。
108 1
|
2月前
|
前端开发 网络架构
React 路由
10月更文挑战第11天
37 2
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
77 9
|
2月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。