React 组件懒加载

发布时间 2023-12-04 19:32:05作者: 背包の技术

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

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 使用