React 组件懒加载

只有不断学习和成长，才能适应这个快速变化的世界。

1. 懒加载

1.1 React 懒加载

React 中懒加载 Lazy 与 Suspense 需要搭配使用。

React.lazy 定义：

React.1azy 函数能让你像渲染常规组件一样处理动态引入的组件。其实就是懒加载。

为什么代码要分割？

当你的程序越来越大，代码量越来越多。一个页面上堆积了很多功能，也许有些功能很可能都用不到，但是一样下载加载到页面上，所以这里面肯定有优化空间。就如图片懒加载的理论。

实现原理？

当 webpack 解析到该语法时，它会自动地开始进行代码分割（Code Splitting），分割成一个文件，当使用到这个文件的时候这段代码才会被异步加载。

解决方案？

在 React.1azy 和常用的三方包 react-1oadab1e（路由懒加载），都是使用了这个原理，然后配合 webpack 进行代码打包拆分达到异步加载，这样首屏渲染的速度将大大的提高。由于 React.1azy 不支持服务端渲染，所以这时候 react-1oadable 就是不错的选择。

1.2 Lazy 和 Suspense 使用

// 当使用到的时候才进行导入
const NewComponent = React.lazy(()=>import('./component/NewComponent'))

<Suspense fallback={<div>正在加载中</div>}>
  <NewComponent></NewComponent>
<Suspense>

1.3 第三方库 react-loadab1e 使用