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>