signed

QiShunwang

“诚信为本、客户至上”

四个库提高你的React应用程序的性能

2021/6/3 14:21:56   来源:

在本文中,我们将介绍一些可用于为您的React应用程序提高性能的库。当我们谈论Java框架和性能时,我们通常会谈论以下两件事之一 - 启动性能或UI性能。在本文中,我们主要讨论启动性能(页面加载等),但是当我们讨论列表中的最后一个库时,我们将简要介绍UI性能。

React LazyLoad

您可以用来改善应用程序性能的策略之一是延迟加载资产,这就是React LazyLoad的用武之地。我在最近的一个项目中使用了这个库,这很容易实现。

第一步是将库添加到您的项目中(通过npm或yarn)并将其导入到您要使用它的文件中。然后,如果您想延迟加载图像,例如,您只需简单地将其包装在下面的图像中即可:

注意这offset={100}一点。这告诉LazyLoad库在视图的100像素内开始加载图像。在图像可见之前加载图像为用户提供了很好的体验。当然,您可以将该数字调整为适用于您的应用程序的任何数字,但太大并且会失去一些好处。

除了图像之外,您还可以延迟加载组件。默认情况下,延迟加载组件有点多,但它仍然非常简单。

如果由于某种原因,这个库不适合你,但是你仍然对延迟加载感兴趣,那么react-lazy-load库是一个很好的选择。

React Loadable

代码拆分建立在不需要加载资产直到需要它们的想法上。不过,我们正在讨论Java文件。基本思想是将代码分割成一堆单独的文件。只有给定页面所需的文件才会被加载,从而减少了需要下载,解析和运行的Java数量。当您点击应用程序时,新视图或路线所需的文件将根据需要动态加载。这是一个光鲜的想法。

直到最近,这在React中完成了很大的痛苦,特别是在进行服务器渲染时。最受欢迎的React代码拆分库是由James Kyle编写的React Loadable。尽管更多地涉及服务器渲染的实现,但基本用法很简单:

React应用中的捆绑包大小可能会相当大,并且使用像React Loadable这样的库是将它们缩小到最小的一种非常有效的方法。

我使用的另一个代码分割库是react-async-component,您可以在React starter kit中看到它的演示。

想要学习web前端的同学,可以参考成都web前端培训班提供的学习大纲;

Preact

是的,我实际上建议您不要使用React来提高React应用的性能。但这就是为什么Preact首先存在的原因。它比React小得多,易于替代。虽然它是一个完全不同的UI库,但Preact与React具有相同的API。当preact-compat与它一起使用时,您可以与其他可能使用的React库兼容(有些可能无需使用compat即可运行)。

Google的Addy Osmani 的案例研究中,Treebo酒店将Preact换成了Preact,并在互动时间方面提高了15%。由于近年来有如此多的案例研究表明,即使在性能方面进行了适度的改进,Preact绝对值得考虑。

InfernoJS

另一个可以为应用程序提供显着性能提升的React替代品是Inferno。它也具有与React相同的API。而且,就像Preact一样,它还有一个辅助库,inferno-compat可以与React生态系统几乎完全兼容。

让Inferno独一无二的是,它不仅会让你在启动性能上超过React,而且在UI性能上也会更快。以下是Inferno,Preact和React的UI基准测试结果。

我想提请你注意几组数字。我们在JS Init Time下看到每个库的值。Inferno和Preact在这个指标上的速度都比React快,而Preact的整体速度最快。这是因为在3KB时,它是三者中最小的。然而,在第一次渲染的时候,我们看到Inferno远远领先于其他两个库。那是因为Inferno 真的很快。尽管Preact的初始化时间更短,但第一次渲染时,Inferno早已消失。

这是一个有趣的例子,说到启动性能时,库的规模并不是整个故事。因此,虽然它没有像Preact那样被提及,但Inferno是React的一个梦幻般的替代品,可以为您的应用提供巨大的速度提升。

最后...

当然,这些库并不是您可以用来为您的React应用程序提供帮助的唯一库,但它们是我的最爱。我还需要提及的是,在Preact和Inferno中添加“compat”模块将会影响UI性能并为您的包大小添加一点点。如果您有兴趣从这些库中获得最大收益,请将“compat”留出(或用作网桥)并进行相应调整。