我们用 ng serve 本地启动 SAP Spartacus 时,观察到控制台如下的输出:feature-libs_cart_quick-order_public_api_ts.js
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 直接访问如下 url:
http://localhost:4299/electronics-spa/en/USD/
根据关键字 QuickOrder 进行全文搜索,有13个文件包含了 QuickOrder:
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 从搜索结果不难看出,访问 SAP Spartacus 首页时,eager load 即正常加载的 Quick Order 相关的内容,全部来自 Root 入口点里的 module,而这些是很轻量级的实现:
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 点击 quick order 超链接后:
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 触发了一个大小超过 147 KB 的 quick order chunk 的加载:
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 总共2092行,
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 其中包含了重量级的 QuickOrderService 实现:
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 该实现位于需要被延迟加载的 core module 内:
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 同样还有所有的 Component 实现:
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 这些 Component 实现位于同 core 同级的 Components 文件夹内部,
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 位于 QuickOrderModule内部:
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 QuickorderModule 包含两部分: - 包含 Service 实现的 Core Module
- 包含 Component 实现的 Component Module
而 QuickOrderModule 整个,作为需要被延迟加载的 Component,定义在 feature Module 内:
SAP 电商云 Spartacus UI Quick Order 延迟加载的现象分析 下图的语法,保证了包含 core 和 Components module 在内的 QuickOrderModule,能够被 Angular 框架进行延迟加载。
更多Jerry的原创文章,尽在:“汪子熙”: