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

翻译自原文：https://medium.freecodecamp.org/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58

文章图片
React 16.6将代码分割(code-splitting)带到了一个新的level。您现在可以在真正需要时加载组件，且无需安装其他依赖库。
什么是代码分割(code-splitting)和懒加载(lazy-loading)？ Webpack是这样定义代码分割的：

"将代码拆分为各种捆绑包，然后按需加载或并行加载的技术。" - 链接

另一种说法是：“按需加载或并行加载”是懒加载，与懒加载相反的是预加载（或立即加载）(eager-loading)。总之，无论你是否使用它，一切都会被加载。
为什么我们要使用代码分割和懒加载？有时我们必须引入大量代码来完成某些功能，这些代码可以是来自第三方依赖库或者自行编写。总之，这些代码会影响主包的大小。
下载几MB文件对于今天的互联网速度来说是小菜一碟，但是我们仍然需要考虑网速较慢或使用移动数据的用户。
（在评论席还补充了：这里不仅仅只影响文件大小，对于添加的JavaScript每一个字节，都会增加内存和CPU使用率。- 相关链接）
它们在React 16.6之前是如何实现的？对于懒加载React组件最流行的库可能是react-loadable
??需要注意的是，在服务端渲染上reactjs.org仍然建议使用可加载组件(Loadable Components)。- 相关链接
使用上，react-loadable和React的新方法非常相似，我将在下文中进行演示。
对于环境配置还需要做什么？让我们看看reactjs.org对此有何看法：

“如果您正在使用Create React App，Next.js，Gatsby或类似的工具，您将拥有一个开箱即用的Webpack配置来打包您的应用程序”
如果不是，您需要自己配置打包文件。例如，请参阅Webpack文档的“安装
和入门”指南。 - reactjs.org

好的，所以需要Webpack，它处理捆绑包的动态导入。
本文将使用create-react-app脚手架生成以下演示案例，所以Webpack已经配置好了，来吧！
Demo 本演示将使用react-pdf。react-pdf是一个很棒的库，用于在浏览器、移动端和服务器上创建PDF文件。一般我们都在服务器上生成PDF，但是如果我们需要在客户端进行，则需要一个成本：包大小。

文章图片
Import cost

我正在使用Visual Studio Code的Import cost插件来展示依赖库的大小。

【如何使用React.lazy和Suspense进行组件延迟加载(翻译)】首先，假设我们的需求是在用户点击按钮时生成PDF文件。

文章图片
其次，如果这是一个很大的web app以及这个功能可能是很小一部分，也许是用户不经常使用的功能。每次页面请求都会加载整个react-pdf代码就变得无意义了。
所以，我们非常需要一个延迟加载的解决方案。
预加载 VS 懒加载展示一个简易的PDFPreview组件

import React from "react"; import { PDFViewer, Document, Page, Text, View } from "@react-pdf/renderer"; import pdfstyles from "./pdfStyles"; // Create Document Component const PDFPreview = ({ title }) => ( {title} This is a text in a generated PDF file. ); export default PDFPreview;

添加样式

import { StyleSheet } from "@react-pdf/renderer"; const styles = StyleSheet.create({ viewer: { padding: 0 },page: { margin: 0, flexDirection: "row", backgroundColor: "#ffffff" }, title: { fontSize: 30, marginBottom: 30 }, section: { margin: 10, padding: 10, flexGrow: 1 } }); export default styles;

预加载让我们看看没有延迟加载的父组件

import React, { Component } from "react"; import PDFPreview from "./PDFPreview"; class App extends Component { state = { name: "", showPDFPreview: false }; handleClick = () => this.setState({ showPDFPreview: true }); handleNameChange = event => this.setState({ name: event.target.value }); render() { const greeting = `Hello ${this.state.name}`; return ( {this.state.showPDFPreview && }); } }export default App;

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

文章图片

文章图片
键入值之后点击按钮生成pdf
无论我们是否点击生成PDF，与其相关的所有代码都包含在应用包内了

文章图片

这是一个开发环境。在打包之后，Size将显著缩小。尽管如此，我们还是没有最佳地分割代码。

懒加载

import React, { Component, Suspense } from "react"; const LazyPDFDocument = React.lazy(() => import("./PDFPreview")); class App extends Component { state = { name: "", showPDFPreview: false }; handleClick = () => this.setState({ showPDFPreview: true }); handleNameChange = event => this.setState({ name: event.target.value }); render() { const greeting = `Hello ${this.state.name}`; return ( {this.state.showPDFPreview && ()}); } }export default App;

我们只做了很小的改动：
第2行替换为：

const LazyPDFDocument = React.lazy(() => import("./PDFPreview"));

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

React.lazy必须通过调用动态的import()加载一个函数，此时会返回一个Promise，并解析(resolve)为一个带有包含React组件的默认导出的模块。 - reactjs.org

因此如果的IE中使用，需要预先使用PolyfillPromise来实现动态import
在第27行，我们使用Suspense，它必须是延迟加载组件的父级(即React.lazy加载的组件只能在组件下使用)。当showPDFPreview设置为true时，LazyPDFDocument开始加载。
在子组件被解析之前，Suspense会显示由fallback属性提供的任何内容，且fallback为必带参数
最终结果如下所示：

我们可以看到0.chunk.js的大小明显低于之前，并且按下按钮时才加载了4.chunk.js和3.chunk.js。
结论每次我们在项目中引入新的依赖项时，我们有责任评估其成本并检查它对主应用包的影响。
如果这个功能是很少使用的，我们完全可以使用按需加载而不会牺牲用户体检。现在React.lazy和Suspense可以出色地帮我们完成这项任务。
Thank you for reading! Please share it with anyone who might find it useful and leave feedback
哦，对了，这些只对web app有必要，对React-Native当然没必要这么做啦！况且，metro尚不支持动态导入。戳metro issues #52