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的原创文章，尽在："汪子熙":