React懒加载(Hook版)

React.lazy
单页面（SAP）应用项目体积大了之后首次加载会出现时间过长导致的白屏，其实就是加载页面的时候还加载了一些当前页面根本用不到组件/js文件等。对bundle进行拆分使项目按需加载（懒加载），webpack支持代码拆分（code splitting）
项目最好都要加上

懒加载一般都会搭配React.Suspense使用，使懒加载实现得更加优雅。
因为直接使用React.lazy
const Views = lazy(() => import('../views')) <Views />
直接使用会报错：

这时候使用React.Suspense来配合做个 loading 或者占位符，就不会报错了。
注意：Suspense组件包裹lazy加载的组件

import { lazy, Suspense } from "react"
const TodoList = lazy(() => import('../views/TodoList'))
const Views = lazy(() => import('../views'))

return (
  <>
    <Suspense fallback={<>这里显示加载没完成时显示内同</>}>
      <Views />
    </Suspense>
    <Suspense fallback={<></>}>
      <TodoList />
    </Suspense>
  </>
)