React中组件懒加载的使用

为什么要使用懒加载

减少了应用启动时间，页面的加载速度变快，提升用户体验

懒加载

页面首次打开，不加载在路由中设置为懒加载的组件，只有用户在实际使用中，使用到了这个组件，才会开始加载

实现代码

  import React, { lazy } from "react"import { Navigate } from "react-router-dom"import Home from "@/views/Home"
//   import About from "@/views/About"const About = lazy(()=>import("../views/About"))//懒加载组件的写法，外边需要套一层Loading的提示加载组件//提取出懒加载写法的共有之处，传递参数使用，避免代码冗余const withLoadingComponent = (comp:JSX.Element) =>(<React.Suspense fallback={<div>Loading······</div>}>{comp}</React.Suspense>)const routes = [{path:'/',element:<Navigate to="/home" />},{path:'/home',element:<Home/>},{path:'/about',element:withLoadingComponent(<About/>)}]export default routes

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！