//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(()=>import('@/pages/Login'))
//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={<h1>loading.....</h1>}>
<Switch>
<Route path="/xxx" component={Xxxx}/>
<Redirect to="/login"/>
</Switch>
</Suspense>
切记loading组件,不能用lazy的形式引入
方法1,引入一个加载中的样式组件
import React, { Component, lazy, Suspense } from 'react'
import Loading from './loading'
const About = lazy(() => import('./About'))
<Suspense fallback={<Loading></Loading>}>
<About></About>
</Suspense>
方法2,引入一个样式
import React, { Component, lazy, Suspense } from 'react'
const About = lazy(() => import('./About'))
<Suspense fallback={<h1>加载中......</h1>}>
<About></About>
</Suspense>
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » lazyLoad
发表评论 取消回复