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

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

React LazyLoad

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

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

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

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

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

React Loadable

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

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

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

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

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”留出（或用作网桥）并进行相应调整。