React项目路由懒加载lazy、Suspense，使第一次打开项目页面变快

一次性加载太多的路由文件会使首次加载的速度很慢，所以我们需要将路由搞成懒加载的形式，用到哪个组件加载哪个组件。庆幸的是React官方已经给我们准备好了插件，也在React库中：

首先 从react这个库中导出lazy、Suspense这两个方法和组件。

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

router之前的引入方式

import ManageAll from "../pages/Conf/ManageAll";

懒加载的引入当时：lazy函数需要调用

const ManageAll =lazy(()=> import("../pages/Conf/ManageAll"))

最后的操作是在路由
Switch组件外层包裹一层组件 Suspense

 <Suspense fallback={<div style={{display:"none"}}>lodding</div>}>
        <Switch>......Route等路由使用</Switch>
 </Suspense >

fallback属性必须加不加报错：

意思就是fallback属性需要啥一个dom标签 ，不想要的话我们可以设置css display:none，想要的话我们可以封装一个组件，比如在组件懒加载这段时间来显示一个LOGGING，组件加载完成后，这个会自动隐藏。
这样的话我们每次点击切换一个路由，会单独请求一个包：

上图是切换了两次的效果。

上版本首页打开时间：

改成懒加载后：