当前位置：首页 > article >正文

lazyLoad

article 2024/10/21 11:32:49

   //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>