react路由懒加载lazyLoad

react路由懒加载lazyLoad

懒加载是指在项目中浏览器第一次加载项目时，如果不使用懒加载技术，则第一次浏览器加载项目时进行读取并下载所有路由组件资源，所以当组件很多时，就会造成浏览器卡死状态；如果使用了懒加载技术，那么每当跳转一个路由，才会吧此路由对应的组件进行下载读取资源并渲染，所以渲染性能就比较好。

路由组件的lazyLoad

看例子：

// 引入lazy函数，懒加载函数，以及要配合Suspense组件一起使用才能实现懒加载
import { lazy, Suspense } from "react"
import { Routes, Route, Link } from "react-router-dom"
// 注意：loading加载页面不能用懒加载方式引入
import Loading from "./component/Loading"
// 不使用懒加载引入组件，不推荐
// import Home from './pages/Home' //引入Home组件
// import About from './pages/About'
// 使用懒加载引入About组件,es6模块导入语法import也可以是函数方式引用
const About = lazy(() => import("./pages/About"))
const Home = lazy(() => import("./pages/Home"))

export default function App() {
    return (
        <div>
            <h1>react Router!</h1>
            <div>
                <div className='nav'>
                    {/* Link组件会后会被渲染成a标签，to属性渲染成href属性 */}
                    <div>
                        <Link to="/home">点我展示home</Link>
                    </div>
                    <div>
                        <Link to="/about">点我展示about</Link>
                    </div>
                </div>
                <div>
                    {/* 在实现懒加载时，必须使用Suspense将路由组件包裹路由子组件 */}
                    {/* fallback值的是在还没有成功加载路由组件时，会先执行fallback的内容，然后当加载完毕之后才会渲染路由子组件 */}
                    <Suspense fallback={<Loading />}>
                        {/* 必须要用Routes组件包裹，在react5中使用switch组件，这两个组件功能类似，都用来包裹Route路由子组件。Switch的作用是当path匹配到一个component之后，将不会再想下继续匹配，提高了程序效率 */}
                        <Routes>
                            {/* 注册路由 */}
                            {/* 在react-router6中，使用element关键字，在react-router5中使用component，注意区别！ */}
                            <Route path='/home' element={<Home />}></Route>
                            <Route path='/about' element={<About />}></Route>
                            <Route path='/' element={<Home />}></Route>
                        </Routes>
                    </Suspense>
                </div>
            </div>
        </div >
    )
}