如何延迟加载你的 React 应用程序
在本文中，我们将讨论如何通过仅加载用户在任何时间点需要的 JavaScript、减少他们在页面加载时必须下载和执行的代码量以及使应用程序交互速度更快。😎 很酷不是吗？
我们将使用 React.lazy 和 Suspense 来延迟加载复杂组件（例如 KendoReact 的 StockChart），直到单击按钮。
了解动态导入
我们可以在用户与应用程序交互时逐渐发送较小的包，而不是在初始页面加载时发送包含应用程序所有代码的大包。为此，我们将依赖称为动态导入的现代 JavaScript 功能。动态导入返回一个承诺，一旦所需的模块通过网络传输，并由 JavaScript 引擎解析和执行，该承诺将得到解决。
静态导入如下所示：
import { concat } from "./utils";
console.log(concat("A", "B", "C"));
动态导入看起来像这样：
import("./utils").then(utils => {
console.log(utils.concat("A", "B", "C"));
});
像 Create React App 和 webpack 这样的工具了解我们试图用这些动态导入做什么，并将为这些延迟加载的包输出单独的 JavaScript 文件。如果我们自己配置 webpack，花一些时间阅读 webpack 有关代码分割的文档可能是个好主意
使用 React.lazy 和 Suspense 进行延迟加载
从版本 16.6 开始，React 包含一个内置的 React.lazy 函数，可以使用动态导入轻松地将应用程序拆分为延迟加载的组件。
你可以这样转：
import StockChartContainer from "./StockChartContainer";
进入这个：
const StockChartContainer = lazy(() => import("./StockChartContainer"));
当我们第一次尝试渲染它时，React 将自动加载包含 StockChartContainer 组件的包。
我们希望将这个惰性组件包装在 Suspense 组件中，这将允许我们在加载内容时显示一些后备内容。让我们看看它是什么样子的。
例子
在此示例中，我们将加载一个包含 KendoReact 的 StockChart 的复杂组件，但仅在用户单击按钮后才加载。这样我们就可以避免向用户发送超出初始加载所需的代码。
我们将存储状态来跟踪我们的复杂组件是否需要显示：
class App extends Component {
constructor(props) {
super(props);
this.state = {
showChart: false
};
}
}
然后，我们将实现一个 handleClick 函数，该函数将在用户单击按钮时切换状态：
class App extends Component {
// ...
handleClick = () => {
this.setState(prevState => ({
showChart: !prevState.showChart
}));
};
}
现在我们只需要把它们放在 render 方法中：
const StockChartContainer = lazy(() => import("./StockChartContainer"));
class App extends Component {
// ...
render() {
const { showChart } = this.state;
const buttonText = showChart ? "Hide Stock Chart" : "Show Stock Chart";
const chartComponent = showChart ? <StockChartContainer /> : null;
const loadingComponent = <div>Loading...</div>;
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Stock Chart</h1>
<div className="App-button">
<Button primary={true} onClick={this.handleClick}>
{buttonText}
</Button>
</div>
</header>
<div className="App-chart">
<Suspense fallback={loadingComponent}>{chartComponent}</Suspense>
</div>
</div>
);
}
}
结论
如果我们向用户发送过多的 JavaScript，我们将使浏览器的主线程变得繁忙，并且它将无法响应用户交互。我们的应用程序在初始页面加载时不需要的延迟加载组件将有助于减少浏览器必须执行的工作量，这将缩短我们的交互时间，并为我们的用户提供更好的体验，尤其是那些在移动设备上。React.lazy 和 Suspense 让它变得如此简单，我们真的没有借口！
关注我的博客，您将在其中获得提示、技巧和挑战，以保持您的技能敏锐。记得关注我哦！
- 点赞
- 收藏
- 关注作者
评论（0）