如何使用React.lazy和Suspense进行组件延迟加载

Posted xiaoniaohhl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用React.lazy和Suspense进行组件延迟加载相关的知识,希望对你有一定的参考价值。

#javascript

如何使用React.lazy和Suspense进行组件延迟加载

 

技术图片

作者:Boris Sever

React 16.6将代码分割带到了一个新的水平。您现在可以在真正需要时加载组件,而无需安装其他库。

什么是代码分裂和延迟加载?

Webpack将代码分割定义为:

“将代码拆分为各种捆绑的技术,然后可以按需加载或并行加载”。来源 ]

另一种说法是:“按需加载或并行加载 ”是延迟加载
与懒惰加载相反的是急切加载无论您是否使用它,所有内容都会被加载。

为什么我们要使用代码分割和延迟加载?

有时我们必须引入大量代码来覆盖某些功能。此代码可以导入第三方依赖项或自行编写。然后,此代码会影响主包的大小。

下载几MB对于今天的互联网速度来说是小菜一碟。我们仍然需要考虑互联网连接速度慢或使用移动数据的用户。

怎么在React 16.6之前完成?

可能是最流行的React组件延迟加载库 react-loadable.

react-loadable如果您的应用程序在服务器上呈现,reactjs.org仍然建议这一点很重要来源 ]

react-loadable实际上与React的新方法非常相似。我将在下面的演示中展示这一点。

设置需要什么?

让我们看看reactjs.org对此有何看法:

“如果您正在使用Create React AppNext.jsGatsby或类似的工具,您将拥有一个开箱即用的Webpack设置来捆绑您的应用程序。
如果你不是,你需要自己设置捆绑。例如,请参阅Webpack文档中的“ 安装入门”指南。“ 
- reactjs.org

好的,所以需要Webpack,它处理捆绑包的动态导入。

使用Create React App.And 生成以下演示。在这种情况下,Webpack已经配置好,我们准备好了。

DEMO

对于本演示,我们将使用react-pdfreact-pdf是一个很棒的库,用于在浏览器,移动设备和服务器上创建PDF文件。我们可以在服务器上生成PDF,但如果我们宁愿在客户端进行,则需要一个成本:捆绑大小。

技术图片进口成本
我正在使用Visual Studio Code的导入成本扩展来查看所用库的大小。

假设我们的要求是在用户点击按钮时生成PDF文件。

技术图片

现在,这是一个只有一个用例的简单表单。尝试想象一个巨大的网络应用程序,这是一小部分可能性。也许用户不经常使用此功能。

让我们把自己置身于那种境地。PDF生成并不经常使用,并且为每个页面请求加载整个代码没有意义。

我将尝试展示我们如何开发一个延迟加载的解决方案,如果没有它。

渴望VS懒人加载展示

对于这两种情况,我们将使用一个从中导入依赖项的组件react-pdf并呈现一个简单的PDF文档。

这里没什么了不起的。我们进口PDFViewer DocumentPageTextViewreact-pdf这些都用在组件的render方法中PDFPreview

PDFPreview只收到一个proptitle顾名思义,它在新生成的PDF文件中用作标题。

pdfStyles.js看起来像这样:

渴望加载

让我们首先看看没有延迟加载的父组件如何看起来像:

在浏览器中呈现以下视图:

技术图片

我们一起来看看代码吧:

在第2行,我们导入PDFPreview组件。

在第6行,我们使用默认值初始化状态。name是一个用作PDF文件中标题的字段,而field PDFPreview是一个显示或隐藏的布尔值PDFPreview

现在,让我们跳转到render方法并检查将呈现的内容。

在第19和25行,我们渲染一个输入和一个按钮。当用户输入输入时,name状态会发生变化。

然后,当用户单击“生成PDF”时,showPDFPreview设置为true该组件重新呈现并显示该PDFPreview组件。

技术图片

即使我们PDFPreview仅使用用户点击,所有与之相关的代码都包含在应用包中:

技术图片
这是一个开发环境。在生产中,尺寸将显着缩小。尽管如此,我们还是没有最佳地分割代码。

懒加载

我们只做了很小的改动,让我们通过它们。

第2行替换为:)
const LazyPDFDocument = React.lazy(() => import("./PDFPreview");

让我们看看React文档对React.lazy的看法:

React.lazy采用必须调用动态的函数import()这必须返回一个Promise解析为具有default包含React组件导出的模块
- reactjs.org

在第27行,我们使用Suspense,它必须是延迟加载组件的父级。showPDFPreview设置为true时,LazyPDFDocument开始加载。

在子组件被解析之前,Suspense显示提供给fallbackprop的任何内容

最终结果如下:

技术图片

我们可以看到0.chunk.js的权重显着低于之前,并且按下按钮时加载了4.chunk.js3.chunk.js

结论

每次我们在项目中引入新的依赖项时,我们的责任是评估其成本并检查它对主要组合的影响。

然后我们不得不问这个功能很少被使用,我们可以按需加载它而不会牺牲用户体验。

如果答案是肯定的,那么React.LazySuspense真正帮助我们完成这一任务。

 

转载文章来源:
https://medium.freecodecamp.org/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58

以上是关于如何使用React.lazy和Suspense进行组件延迟加载的主要内容,如果未能解决你的问题,请参考以下文章

使用 React Suspense 和 React.lazy 子组件进行 Jest/Enzyme 类组件测试

使用 React.lazy、Suspense 和 react-router-dom 进行代码拆分不起作用

如何在 Gatsby 中使用 React.lazy

React.lazy和Suspense组合实现组件懒加载

React中异步模块api React.lazy和React.Suspense

React.lazy和React.Suspense异步加载组件