预取懒加载组件

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

科里·豪斯今天发布了以下推文。

Cory 指出了CRA中一个可以预取惰性组件的功能，但我了解到了将其应用到项目中的方法。

设想

假设你正在构建一个客户信息收集网站。

当用户接到电话时，

由于网站很小（因为非必要代码被拆分（延迟加载）），用户可以快速加载初始客户页面。

验证用户（确认用户是否访问了正确的客户页面）期间，会预留一些时间来预取惰性组件，例如用于填写客户信息的选项卡、模态确认框等。

典型的工作流程如下：

1. 用户搜索客户
2. 客户页面加载速度很快（由于代码拆分，初始网站规模较小）
3. 用户与客户确认是否加载了正确的页面（提供预取所需的空闲时间）
4. 在空闲时间，会加载一些非必要的内容（加载时不需要立即加载的内容），例如模态框或选项卡中的表单。
5. 用户可以收集客户数据并快速录入。

想法

因此，这对于需要输入或查找大量数据的 LOB（业务线）应用程序来说尤其有效。

我能想到的例子有：

1. 用户输入界面- 用户在此确认正确的客户页面，同时加载其他表单/模态框或非必要但必需的组件。
2. 仪表盘- 视口外的图表会延迟加载但预先加载（用户分析顶部图表时，视口外的其他图表会有足够的时间在此期间被预先加载）。
3. 任何主从页面——例如）一个包含大量图片并使用模态框显示详细信息的网站，例如：
   • Unsplash
   • Pixabay
4. 导航菜单- 顶级菜单立即加载，鼠标悬停时显示的菜单项会延迟加载但预先获取。

图片来源：使用 Imgflip Meme Generator创建