lazyLoad

//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>
相关推荐
小Dno14 分钟前
diff算法理解第一篇
前端
文心快码BaiduComate4 分钟前
文心快码实测Markdown排版工具开发
前端·后端·程序员
九十一4 分钟前
闭包那点事
javascript
沐知全栈开发4 分钟前
PHP MySQL 插入数据详解
开发语言
杨超越luckly7 分钟前
HTML应用指南:利用GET请求获取全国沃尔沃门店位置信息
前端·arcgis·html·数据可视化·门店数据
渣哥12 分钟前
原文来自于:[https://zha-ge.cn/java/128](https://zha-ge.cn/java/128)
javascript·后端·面试
渣哥13 分钟前
项目写得再多也没用!Spring Bean 的核心概念要是没懂,迟早踩坑
javascript·后端·面试
yuqifang21 分钟前
DevEco Studio工具在打hap包时,Product选项(default,release)和 Build Mode(default,release)区别
前端
朝与暮22 分钟前
《深入浅出编译原理 -- 编译原理总述(一)》
前端·编译原理·编译器
灰太狼大王灬24 分钟前
Chrome 浏览器扩展图片 提取大师
前端·chrome