关于前端:AbovetheFold-Loading-加载机制在-Spartacus-Storefront-里的应用

Angular 利用默认状况下，Component 组件总是被踊跃渲染，不论组件是否在用户的 viewports 中。这可能对性能带来负面影响，但能够通过评估视口与组件来进行优化—— View ports 内（或左近）的所有组件都应该加载，其余组件能够提早。

作为提早加载的一个踊跃的副产物，咱们将看到组件外部数据的提早加载。

上面一些例子：

• 产品评论只会在出现产品评论组件时加载（因为标签或滚动）
• 只有在应用 hamburger menu 时才会加载手机上的导航数据
• 初始视口外的旋转木马幻灯片被推延，直到用户 rotate 到它们为止。

这推延了产品 / 组件数据以及横幅 / 产品图像的加载。

留神：

1. 在 SSR 中，咱们必须跳过提早加载，因为残缺的 SSR 响应应该被索引。
2. 须要 CSS 来确保布局（插槽）应用的初始空间占用相当大的空间，以确保组件在初始视口之外。

[外链图片转存失败, 源站可能有防盗链机制, 倡议将图片保留下来间接上传 (img-e9Z1b2ph-1679300242720)(https://upload-images.jianshu.io/upload_images/2085791-f49f68…)]

above-the-fold 在默认的 Spartacus Storefront 中处于 disabled 状态。也就是说，在挪动视图中关上开发工具和店面，在加载残缺店面后，当关上汉堡包菜单时，没有进行额定的后端 API 调用（即导航组件）。

如何开启 deferred loading 性能

在 app.module.ts 中进行配置：

deferredLoading: {
  strategy: DeferLoadingStrategy.DEFER,
  intersectionMargin: '50px',
}

在挪动视图中关上开发工具和店面，验证在加载残缺店面后，当关上汉堡包菜单时，会针对导航、语言和货币进行额定的 API 调用。

这是预期的行为，因为在不关上导航的状况下不须要这些。

从 app.module.ts 中删除 JsonLdBuilderModule 并验证产品评论数据的后端调用，仅在关上 PDP 上的评论选项卡时生成。这是因为 JsonLdBuilderModule 会在 SSR 或开发模式下加载评论。