SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析

我们用 ng serve 本地启动 SAP Spartacus 时，观察到控制台如下的输出：feature-libs_cart_quick-order_public_api_ts.js

直接访问如下 url：

http://localhost:4299/electronics-spa/en/USD/

根据关键字 QuickOrder 进行全文搜索，有13个文件包含了 QuickOrder：

从搜索结果不难看出，访问 SAP Spartacus 首页时，eager load 即正常加载的 Quick Order 相关的内容，全部来自 Root 入口点里的 module，而这些是很轻量级的实现：

点击 quick order 超链接后：

触发了一个大小超过 147 KB 的 quick order chunk 的加载：

总共2092行，

其中包含了重量级的 QuickOrderService 实现：

该实现位于需要被延迟加载的 core module 内：

同样还有所有的 Component 实现：

这些 Component 实现位于同 core 同级的 Components 文件夹内部，

位于 QuickOrderModule内部：

QuickorderModule 包含两部分：

包含 Service 实现的 Core Module
包含 Component 实现的 Component Module

而 QuickOrderModule 整个，作为需要被延迟加载的 Component，定义在 feature Module 内：

下图的语法，保证了包含 core 和 Components module 在内的 QuickOrderModule，能够被 Angular 框架进行延迟加载。

更多Jerry的原创文章，尽在：“汪子熙”:

SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析相关推荐

SAP 电商云 Spartacus UI Quick Order 主页的实现
存货单位(英語:stock keeping unit,SKU/ˌɛsˌkeɪˈjuː/),也翻译为库存单元,是一個會計學名詞,定义为库存管理中的最小可用单元,例如纺织品中一个SKU通常表示规格.颜色. ...
SAP 电商云 Spartacus UI Quick Order 对应的 CMS 内容
UPDATE ContentPage;$contentCV[unique=true];uid[unique=true];masterTemplate(uid,$contentCV);label ;;q ...
SAP 电商云 Spartacus UI quick order 搜索结果的索引设置实现
实现方法:focusNextChild. 在 Quick Order 搜索结果页面里,客户可以通过键盘的上下箭头,选择想要添加的 product: 第一次触发时,值为 null: 如果值为 null, ...
SAP 电商云 Spartacus UI Quick Order 的路由和 CMS 实现
如下图高亮区域所示: root config 包含了敲击多少个字符后,触发 product 搜索的配置: import { Injectable } from '@angular/core'; imp ...
SAP 电商云 Spartacus UI quick order 产品 live search 的实现
我们在如下图输入框里输入至少三个字符后,就会触发一个向 Commerce 后台的 product 搜索动作: form 事件的数据源就是 this.form.valueChanges. 从语义上讲,每 ...
SAP 电商云 Spartacus UI Quick order 产品搜索结果页面的显示逻辑
这个结果列表,其实一直存在 form 里的,只不过不是一直 visible 而已. 什么时候显示这个 product list 呢? 当搜索结果命中的 product 个数大于1,或者 this.no ...
SAP 电商云 Spartacus UI CI e2e-cypress.sh 脚本文件分析
(1) yarn install (2) 进到 storefrontapp-e2e-cypress 目录再次 yarn install (3) yarn build:libs 脚本命令: cypres ...
SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子
如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...

SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析

SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析相关推荐

最新文章

热门文章