0.0

如果没有使用懒加载时，页面的第一次加载就会把所有组件都加载到缓存中—导航栏中的每一个，设置了路由跳转但是还没有点击跳转的组件都要使用缓存加载。当数量过多时，就势必会影响首页的加载速度，带来不好的用户体验，这时就可以通过懒加载来解决这个问题。

使用

引入lazy

需要引入 react 中的一个 lazy 函数
import React, { Component,lazy } from 'react'
lazy 是一个 高阶函数，即他的参数要传入一个函数。

使用 lazy

  1. // import Home from './Home'
  2. // import About from './About'
  3. const Home = lazy(() => import("./Home"));
  4. const About = lazy(() => import("./About"));

此时就会让导航栏的两个组件实行懒加载，但此时仍未能够使用，会报错。

引入 Suspense

还要引入一个 suspense
import React, { Component,lazy,Suspense } from 'react'

使用 Suspense

  1. import Loading from "./Loading";
  2. ...
  3.     {/* <Suspense fallback={<h1>Loading...</h1>}> */}
  4.     <Suspense fallback={<Loading/>}>
  5.   {/* 注册路由 */}
  6.   <Route path="/about" component={About} />
  7.   <Route path="/home" component={Home} />
  8. </Suspense>

使用 Suspense 标签将注册的路由包裹住，且在其中传入一个参数—一个虚拟DOM或是一个组件。
因为使用懒加载后，各个组件是在点击之后才开始加载的。当网速状况较差或是什么情况导致网页加载速度过慢，总不能给用户看一个空白页半天吧，会出现这个给用户看以提高用户体验。这个Loading组件则必须要是正常引入而不能是懒加载引入。原因也不用我过多解释了吧。

效果

现在就能愉快地使用懒加载了~
在浏览器的开发者工具中设置网速更易看到效果哦
image.png