2023年排名Top 5的 React 延迟加载库!
原创2023-02-24 06:20·高级前端进阶大家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
高级前端进阶
前言
延迟加载是最流行的 React 应用程序优化的方法之一。 它允许用户仅在需要时呈现内容,从而缩短初始加载时间、减少带宽消耗和数据流量。
图片来自 Chameera Dulanga的《Lazy Loading with React–An Overview》
多年来,各种包被引入 React 生态系统以通过延迟加载来优化应用程序。 本文将重点介绍六个在 React 社区中流行的延迟加载库。
1.react-lazyload:支持灵活定制
react-lazyload 可用于延迟加载 React 应用程序中的任何类型的组件。 它是 React 社区中最流行的延迟加载库之一,支持装饰器和服务端渲染。react-lazyload有以下核心特点:
- 高度可配置化,能够自定义组件的功能
- 提供诸如 forceCheck 之类的工具来显示无需调整大小或滚动事件即可显示的隐藏内容
- 支持开箱即用的水平延迟加载
- 只为延迟加载的组件实现两个事件监听器,进一步优化性能
使用方式如下,但是别忘了预先安装:
import React from 'react';
import ReactDOM from 'react-dom';
import LazyLoad from 'react-lazyload';
import MyComponent from './MyComponent';
const App = () => {
return (
<div className="list">
<LazyLoad height={200}>
<img src="tiger.jpg" />
/*开箱即用地支持延迟加载图像,无需额外配置,设置 `height` 更好*/
</LazyLoad>
<LazyLoad height={200} once >
/* 加载此组件后,LazyLoad 将不再关心它了,将其设置为 `true` 如果您担心性能 */
<MyComponent />
</LazyLoad>
<LazyLoad height={200} offset={100}>
/* 该组件将在顶部加载边缘距视口 100 像素,让用户对延迟加载一无所知。 */
<MyComponent />
</LazyLoad>
<LazyLoad>
<MyComponent />
</LazyLoad>
</div>
);
};
ReactDOM.render(<App />, document.body);
如果想让组件默认延迟加载,也可以试试装饰器:
import { lazyload } from 'react-lazyload';
@lazyload({
height: 200,
once: true,
offset: 100
})
class MyComponent extends React.Component {
render() {
return <div>this component is lazyloaded by default!</div>;
}
}
2.react-lazy-load:速度快
react-lazy-load 是一个 React 组件,可用于以可预测的方式延迟加载内容。 它相对较快,具有最小的包大小(压缩后 2.2KB),Gzip压缩后只有1kb。
react-lazy-load具有以下特点
- 自动检测滚动容器,例如带有滚动条的 <div>,因此可以在滚动容器内使用。
- 允许用户设置阈值以使用 offsetVertical、offsetHorizontal、offsetTop、offsetBottom 等配置从视口的任何一侧开始加载内容。
- 支持IE8+。
- 内置了防抖功能。
但是,与 react-lazyload 库相比,该组件的 props 数量非常有限,因此灵活性较低。 主要缺点是它不允许用户为延迟加载的组件应用占位符。基础用法如下:
import React from 'react';
import LazyLoad from 'react-lazy-load';
const MyComponent = () => (
<div>
<LazyLoad height={762}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
</div>
)
下面示例在滚动前加载图像 300px:
const MyComponent = () => (
<div>
<LazyLoad height={762} offset={300}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
</div>
)
下面示例仅当 95% 的图像在视口中时才加载图像(注意必须指定宽度。)。
const MyComponent = () => (
<div>
<LazyLoad height={762} width={400} threshold={0.95}>
<img src='http://apod.nasa.gov/apod/image/1502/HDR_MVMQ20Feb2015ouellet1024.jpg' />
</LazyLoad>
</div>
)
3.react-lazy-load-image-component:兼容 TypeScript
react-lazy-load-image-component 是一个易于使用的库,用于延迟加载任何类型的组件。 它支持 IntersectionObserver,可以确定元素何时离开和进入视口。react-lazy-load-image-component 有以下特点:
- 最重要的是 HOC,trackWindowScroll,它允许组件跟踪窗口滚动位置,而无需为每个元素使用滚动或调整大小事件侦听器。
- 默认情况下,惰性加载组件的偏移量为 100 像素。
- 内置的可见效果(例如模糊、黑白和不透明过渡)有助于改善用户体验
- 支持服务器端渲染、TypeScript
- 默认情况下提供与图像或组件大小相同的占位符,但可以自定义。
import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';
const MyImage = ({ image }) => (
<div>
<LazyLoadImage
alt={image.alt}
height={image.height}
src={image.src}
// 使用普通的 <img> 属性作为props
width={image.width} />
<span>{image.caption}</span>
</div>
);
export default MyImage;
4.react-lazy-images:SEO 或 JS 禁用环境的回退策略
react-lazy-images 是一个灵活的库,它提供组件和实用程序以在 React 中延迟加载图像。 它使用渲染props为调用者提供完全的展示控制。react-lazy-images 有以下特点:
- 使用 IntersectionObserver 和 polyfill 来提高性能。
- 为禁用 SEO 和 JavaScript 的环境提供回退策略。
- 支持服务端渲染。
- 支持背景图片并支持水平滚动。
下面是react-lazy-images的基础使用:
import { LazyImage } from "react-lazy-images";
<LazyImage
src="/img/porto_buildings_large.jpg"
alt="Buildings with tiled exteriors, lit by the sunset."
placeholder={({ imageProps, ref }) => (
<img ref={ref} src="/img/porto_buildings_lowres.jpg" alt={imageProps.alt} />
)}
actual={({ imageProps }) => <img {...imageProps} />}
/>;
5.react-sizeme
react-sizeme需要确保React 组件知道宽度或高度!react-sizeme具有以下特点:
- 超响应组件
- 高性能,便于使用
- 广泛的浏览器支持
- 支持函数组件和类组件类型,打包尺寸精简
下面的示例展示了根据size属性加载不同的子组件的示例:
import React from 'react'
import LargeChildComponent from './LargeChildComponent'
import SmallChildComponent from './SmallChildComponent'
import sizeMe from 'react-sizeme'
function MyComponent(props) {
const { width, height } = props.size
// 读取size属性
const ToRenderChild = height > 600 ? LargeChildComponent : SmallChildComponent
return (
<div>
<h1>
My size is {width}x{height}
</div>
<ToRenderChild />
</div>
)
}
export default sizeMe({ monitorHeight: true })(MyComponent)
6.不同方案开发者数据对比
如下图Github数据所示:react-lazyload 的star数据为5.7K > react-sizeme的star数据为1.9K >
react-lazy-load-image-component的star数据为1.2k > react-lazy-load的star数据为1K > react-lazy-images的star数据为0.3K。因此,从数据上看react-lazyload表现非常亮眼!
下面再看看NPM的下载数据,react-sizeme则明显表现得比react-lazyload亮眼。这从侧面说明了,react-sizeme还是很受开发者青睐的。
7.本文总结
本文主要和大家介绍下2023年Top 5的React 延迟加载库!同时对每一种库的特点,用法做了简单介绍,大家可以根据自己项目需求选择。因为篇幅有限,没有过多展开。如果有兴趣,文末的参考资料提供了优秀文档以供学习。
参考资料
https://www.syncfusion.com/blogs/post/top-5-react-lazy-loading-libraries-for-2022.aspx
https://www.npmjs.com/package/react-lazyload
https://www.npmjs.com/package/react-lazy-load
https://www.npmjs.com/package/react-lazy-load-image-component
https://www.npmjs.com/package/react-lazy-images
https://www.npmjs.com/package/react-sizeme
https://www.syncfusion.com/blogs/post/lazy-loading-with-react-an-overview.aspx
标签:react,lazy,Top,React,2023,组件,import,加载 From: https://www.cnblogs.com/sexintercourse/p/17167195.html