1.将路由组件进行懒加载
- 将
import Div1 from './components/div1'
import Div2 from './components/div2'
替换为
const Div1 = lazy(() => import("./components/div1"));
const Div2 = lazy(() => import("./components/div2"));
- 其中lazy来自react包
import React, { Component, lazy, Suspense } from "react";
2.将Route组件包裹
<Suspense fallback={<h1>加载中,请等待…………</h1>}>
<Route path="/a" component={Div1} />
<Route path="/b" component={Div2} />
</Suspense>
- Suspense组件来自react包
- Suspense组件的fallback值为当懒加载未加载出来的时候所展示的组件