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的原創文章，盡在：“汪子熙”: