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>
相关推荐
前端小万1 分钟前
一次紧急的现场性能问题排查
前端·性能优化
一只乔哇噻4 分钟前
java后端工程师进修ing(研一版 || day41)
java·开发语言·学习·算法
钮钴禄·爱因斯晨13 分钟前
深入剖析LLM:从原理到应用与挑战
开发语言·人工智能
excel17 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手18 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360220 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep20 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo22 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
六点半88829 分钟前
【C++】C++11 篇二
开发语言·c++
DDDDDDDRDDR37 分钟前
C++容器:list
开发语言·c++·stl