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>
相关推荐
gopyer1 小时前
180课时吃透Go语言游戏后端开发6:Go语言的循环语句
开发语言·游戏·golang·循环语句
江拥羡橙2 小时前
Vue和React怎么选?全面比对
前端·vue.js·react.js
千码君20162 小时前
React Native:快速熟悉react 语法和企业级开发
javascript·react native·react.js·vite·hook
楼田莉子4 小时前
Qt开发学习——QtCreator深度介绍/程序运行/开发规范/对象树
开发语言·前端·c++·qt·学习
暮之沧蓝4 小时前
Vue总结
前端·javascript·vue.js
木易 士心5 小时前
Promise深度解析:前端异步编程的核心
前端·javascript
im_AMBER5 小时前
Web 开发 21
前端·学习
又是忙碌的一天5 小时前
前端学习day01
前端·学习·html
韩立学长5 小时前
【开题答辩实录分享】以《基于python的奶茶店分布数据分析与可视化》为例进行答辩实录分享
开发语言·python·数据分析
Joker Zxc5 小时前
【前端基础】20、CSS属性——transform、translate、transition
前端·css