Above-the-Fold Loading 加载机制在 Spartacus Storefront 里的应用

简介: Above-the-Fold Loading 加载机制在 Spartacus Storefront 里的应用

Angular 应用默认情况下,Component 组件总是被积极渲染,不管组件是否在用户的 viewports 中。 这可能对性能带来负面影响,但可以通过评估视口与组件来进行优化—— View ports 内(或附近)的所有组件都应该加载,其他组件可以延迟。


作为延迟加载的一个积极的副产物,我们将看到组件内部数据的延迟加载。


下面一些例子:


产品评论只会在呈现产品评论组件时加载(因为标签或滚动)

只有在使用 hamburger menu 时才会加载手机上的导航数据

初始视口外的旋转木马幻灯片被推迟,直到用户 rotate 到它们为止。

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


注意:


在 SSR 中,我们必须跳过延迟加载,因为完整的 SSR 响应应该被索引。

需要 CSS 来确保布局(插槽)使用的初始空间占用相当大的空间,以确保组件在初始视口之外。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9Z1b2ph-1679300242720)(https://upload-images.jianshu.io/upload_images/2085791-f49f68677e865dee.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]


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 或开发模式下加载评论。




相关文章
|
12月前
|
存储 对象存储
Spartacus 添加 PWA 应用到 home 的实现原理分析
Spartacus 添加 PWA 应用到 home 的实现原理分析
|
API 开发者
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
|
前端开发 JavaScript CDN
关于 fontawesome 库在 Spartacus 项目中的应用
关于 fontawesome 库在 Spartacus 项目中的应用
|
缓存 前端开发 JavaScript
基于 Spartacus 的 Angular Storefront 性能优化建议
基于 Spartacus 的 Angular Storefront 性能优化建议
|
12月前
|
JavaScript
TypeScript 对象解构操作符在 Spartacus 实际项目开发中的应用
TypeScript 对象解构操作符在 Spartacus 实际项目开发中的应用
|
搜索推荐 JavaScript 前端开发
Spartacus 开源项目给 SAP Commerce Cloud Storefront 共享的一些有用的特性介绍
Spartacus 开源项目给 SAP Commerce Cloud Storefront 共享的一些有用的特性介绍
|
12月前
|
安全
Spartacus Storefront 里如何在 SmartEdit 访问环境下暂时禁用 Early login
Spartacus Storefront 里如何在 SmartEdit 访问环境下暂时禁用 Early login
|
JSON 数据格式
Spartacus 应用 i18n 里如何启用中文显示
Spartacus 应用 i18n 里如何启用中文显示
|
前端开发 安全 API
Above-the-Fold Loading 加载机制在 Spartacus Storefront 里的应用
Above-the-Fold Loading 加载机制在 Spartacus Storefront 里的应用
下一篇
无影云桌面