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

posted on 2023-03-01 10:27 漫思阅读(264) 评论(0) 编辑收藏举报

刷新页面返回顶部

漫思

2023年排名Top 5的 React 延迟加载库！

2023年排名Top 5的 React 延迟加载库！

前言

1.react-lazyload：支持灵活定制

2.react-lazy-load：速度快

3.react-lazy-load-image-component：兼容 TypeScript

4.react-lazy-images：SEO 或 JS 禁用环境的回退策略

5.react-sizeme

6.不同方案开发者数据对比

7.本文总结

参考资料

导航

公告