react懒加载(lazy,suspense)

187 阅读1分钟

1 . React.lazy()

 懒惰加载的目的是使网页首次加载变快,方法是将代码划分成若干chunk, 用户最不可能访问到的页面优先使用 lazy loading, 根据访问到的路径实时按需加载相应的代码。这样,用户不需要一开始就下载大量的代码,因为其中一些代码可能不需要用到。

lazy()函数,参数为一个函数,返回一个 import 语句。

  • import 一个 react 组件!!!

1049.png

2 . < Suspense > 组件

在加载异步组件显示之前先显示的内容

  • fallback 属性
    • 接受任何在组件加载过程中你想展示的 React 元素。