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