React.Lazy Suspense React懒加载

用 bundle 把整个项目打包成一个 js 当然好，可以减少请求数量

但是有的时候打包出来的文件过大也是不好的

React.lazy 可以实现懒加载防止最终打包的东西过大

// Before:
import OtherComponent from './OtherComponent';

// After:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
// 注意是import('./OtherComponent')，不是 import 'OtherComponent'，是调用 import 函数！
// 也不是 () => { import('./OtherComponent') }，而是返回这个值！

这样，需要渲染这个组件的时候才会加载这个包

渲染的时候由于是惰性渲染，所以得包一层 <Suspense> 组件

<Suspense> 组件的意义是，在渲染前“等待”数据、脚本等内容，在此过程中显示另一种内容（比如说 Loading）

const OtherComponent = React.lazy(() => import('./OtherComponent'));
...
<Suspense fallback={<div>Loading...</div>}>
  <OtherComponent />
</Suspense>;