react之懒加载lazyLoad

最新推荐文章于 2024-08-04 13:48:15 发布

琴～～

最新推荐文章于 2024-08-04 13:48:15 发布

阅读量645

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/123016230

版权

react之懒加载lazyLoad

路由组件的懒加载lazyLoad

import {lazy, Suspense} from 'react'
//1、通过React的lazy函数配合import()函数动态加载路由组件 ===》 路由组件代码会被分开打包
const Login = lazy(() => import('@/pages/Login'))

//2、通过<Suspense>指定在加载得到路由打包前显示一个自定义loading界面
<Suspense fallback = {<h1>loading...</h1>}>
 <Switch>
   <Route path = "/xxx" component = {xxx} />
   <Redirect to = '/login' />
 </Switch>
</Suspense>