Angular应用默认情况下，无论组件是否在用户的视口中，组件组件总是积极呈现。这可能会对性能产生负面影响，但可以通过评估视口与组件来优化-应加载视口内（或附近）的所有组件，而其他组件可以延迟。作为延迟加载的一个积极的副产品，我们将看到组件内部的数据延迟加载。以下是一些示例：产品评论仅在呈现产品评论组件时加载（因为选项卡或滚动）移动设备上的导航数据仅在使用汉堡菜单时加载初始视口外的轮播幻灯片被推迟，直到用户旋转到它们停止。这会延迟加载产品/组件数据以及横幅/产品图像。注意：在SSR中，我们必须跳过延迟加载，因为应该对完整的SSR响应进行索引。需要CSS来确保布局（插槽）使用的初始空间占用相当大的空间，以确保组件位于初始视口之外。【外链图片传输失败，源站可能有防盗链接机制，建议保存图片直接上传（img-e9Z1b2ph-1679300242720）（https://upload-images.jianshu.io/upload_images/2085791-f49f68...)]默认的SpartacusStorefront中禁用了首屏。也就是说，在移动视图中打开开发工具和店面后，加载完整店面后，打开汉堡菜单时不会进行额外的后端API调用（即导航组件）。如何开启延迟加载功能在app.module.ts中配置：deferredLoading:{strategy:DeferLoadingStrategy.DEFER,intersectionMargin:'50px',}在移动端打开开发工具和storefront，验证加载完完整的storefront后，当打开显示汉堡菜单时，会为导航、语言和货币进行额外的API调用。这是预期的行为，因为在不打开导航的情况下不需要这些。从app.module.ts中删除JsonLdBuilderModule并验证产品评论数据的后端调用，仅在打开PDP上的评论选项卡时生成。这是因为JsonLdBuilderModule在SSR或开发模式下加载注释。
