路由组件的lazyLoad

1、lazyLoad

    1.引入lazy和Suspense

        import React, { Component,lazy,Suspense} from 'react'

    2.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
         const Login = lazy(()=>import('@/pages/Login'))
    
    3.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
    <Suspense fallback={<h1>loading.....</h1>}>
        <Switch>
            <Route path="/xxx" component={Xxxx}/>
            <Redirect to="/login"/>
        </Switch>
    </Suspense>

参考链接：

尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩_bilibili