React - 路由 lazyLoad 的使用（路由懒加载）

• lazy是React提供的懒（动态）加载组件的方法，React.lazy()
• 路由组件代码会被分开打包，能减少打包体积、延迟加载首屏不需要渲染的组件
• 依赖内置组件Suspense标签的fallback属性，给lazy加上loading指示器组件
• Suspense目前只和lazy配合实现组件等待加载指示器的功能

1. 引入所需依赖

   import { lazy, Suspense } from "react";
   import { NavLink, Route, Routes } from "react-router-dom";
   

2. 通过 React的lazy函数配合import()函数动态加载路由组件，路由组件代码会被分开打包

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

3. 依赖内置组件Suspense标签的fallback属性，给lazy加上loading指示器

   {/* 路由链接 */}
   <NavLink className="list-group-item active" to="/about">
     About
   </NavLink>
   <NavLink className="list-group-item active" to="/home">
     Home
   </NavLink>
   

   {/* 注册路由 */}
   <Suspense fallback={<h1>loading.....</h1>}>
     <Routes>
       <Route path="/about" element={<About />} />
       <Route path="/home" element={<Home />} />
     </Routes>
   </Suspense>
   

   Suspense的fallback属性可以是一个组件，该组件的引入不需要使用lazy()，直接引入即可

   import Loading from "./Loading";
   

   <Suspense fallback={<Loading />}>
    <Routes>
      <Route path="/about" element={<About />} />
      <Route path="/home" element={<Home />} />
    </Routes>
   </Suspense>