在本文中,我们将讨论如何通过仅加载用户在任何时间点需要的 JavaScript、减少他们在页面加载时必须下载和执行的代码量以及使应用程序交互速度更快。😎 很酷不是吗?
我们将使用 React.lazy 和 Suspense 来延迟加载复杂组件(例如 KendoReact 的 StockChart),直到单击按钮。
了解动态导入
我们可以在用户与应用程序交互时逐渐发送较小的包,而不是在初始页面加载时发送包含应用程序所有代码的大包。为此,我们将依赖称为动态导入的现代 JavaScript 功能。动态导入返回一个承诺,一旦所需的模块通过网络传输,并由 JavaScript 引擎解析和执行,该承诺将得到解决。
静态导入如下所示:
import {
concat } from "./utils";
console.log(concat("A"