为什么要使用懒加载
减少了应用启动时间,页面的加载速度变快,提升用户体验
懒加载
页面首次打开,不加载在路由中设置为懒加载的组件,只有用户在实际使用中,使用到了这个组件,才会开始加载
实现代码
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