react.lazy懒加载缩短白屏时间

最近在写业务代码，项目文件打包后在高速3g状态下需要5s+的时间，这个速度还是有些优化的空间。

控制台中显示打包出来的js库文件相对来说较大， 使用webpack打包分析库webpack-bundle-analyzer查看打包项目中所使用的的富文本库braft占用空间过大。然而在项目首屏页面中还不需要富文本内容，所以将使用React.lacy和React.Suspense对富文本框架进行分包和懒加载来减少白屏时间，加快加载速度。

// 优化前：同步导入和使用组件，其中<BaseCpn />中含有富文本输入库
import BaseCpn from './BaseCpn';
export default () => <BaseCpn />

// 优化后：
import { lazy, Suspense } from 'react';
// 使用 lazy 对组件进行懒加载
const BaseCpn = lazy(() => import(/* webpackChunkName: 'BaseCpn'*/ './BaseCpn'));
export default () => (
// 未请求到 BaseCpn组件时，将显示fallback中的组件
<Suspense fallback={<div>Loading...</div>}>
  <BaseCpn />
</Suspense>
)

看将富文本懒加载后的结果，将首屏时间5s+缩减到4s+ 富文本内容被分离出去，减少了首屏需要传输的文件体积，缩减白屏时间