訂閱專欄
最近工作中處理了 SAP Commerce Cloud (電商雲) UI 的一個懶加載 (Lazy Load) 功能的問題，這裡把自己學到的東西做個記錄。
UI 懶加載，有時又稱惰性加載，延遲加載，是和貪婪加載 (Eager Load) 截然相反的一種 UI 元件加載政策。
假設一個應用的 UI 由 A，B，C 若幹視圖組成，采用貪婪加載，則所有視圖的實作代碼，在 build 階段會被合并到一個代碼塊中，在 UI 加載領域裡，這種代碼塊的術語為 chunk. 在貪婪加載模式下，所有視圖實作代碼合并成的單一代碼塊，通常稱為 main chunk. 在使用者浏覽器通路應用的任何一個視圖，比如視圖 A 時，包含了該應用所有視圖實作代碼的 main chunk 會被浏覽器加載。當應用的規模趨于複雜時，采用貪婪加載模式 build 而成的 main chunk 尺寸也随之變大，會影響應用的首屏加載時間。
假設一個應用的部分視圖和首屏加載無關，而是使用者打開應用首頁後，需要點選某些連結，跳轉之後才能打開。為了減少應用的首屏加載時間，我們可以考慮将這部分視圖采用懶加載的方式，分别進行 build，進而生成多個 chunk, 并按需被浏覽器加載。
下面用 SAP Commerce Cloud (電商雲) 為例來具體說明。
Jerry 之前的文章 從一個實際的例子出發，談談 SAP Commerce Cloud (電商雲) 的 UI 自定義開發 曾經提到了購物車頁面的自開發場景。
這個購物車頁面，需要使用者成功加載 Commerce Cloud 首頁後，點選右上角的購物車圖示才能夠顯示：
然而預設情況下，該購物車的自開發元件，MyCartComponent，還是被預設打包到 main chunk 内。我們可以用文本編輯器，打開名為 main-es2015.js 的main chunk 檢視其内容。
下圖是自開發 MyCartComponent 的 TypeScript 實作：
被 Angular 編譯器編譯成 JavaScript 代碼後，其對應代碼能夠在 main-es2015.js 裡找到：
運作時，盡管客戶僅僅通路了 SAP Commerce Cloud 首頁，沒有點選購物車，然而因為購物車自開發元件遵循的預設貪婪加載模式，是以其實作代碼仍然被包含在了 main chunk 裡，随首屏一并加載。
下面我們就來試試，用懶加載模式，來加載SAP Commerce Cloud (電商雲) 的自開發元件。
因為前一篇文章，我們已經使用了自開發購物車作為例子，本文就換一個例子來闡述。
SAP Commerce Cloud (電商雲) 頁面上這種能夠通過點選，跳轉到産品明細頁面的圖檔控件，稱之為 Banner，當然也是能夠定制開發的：
比如我建立了一個 Lazy Banner Component，裡面啥邏輯都沒有，就列印一行寫死的 I am lazy 的字元串：
在app.module.ts 裡啟用我自開發的 LazyBanner 元件之後：
SAP Commerce Cloud 的 UI 渲染如下：
現在更改代碼，以懶加載的方式，啟用自開發元件 LazyBanner 的加載：
通過比較兩種加載模式的代碼能發現，利用 Angular 動态 import 語句，阻止了 builder 将 LazyBanner 元件的實作打包到 main chunk 的行為。
執行 ng build, 這次就能發現，LazyBanner 元件的實作已經和 main chunk 分開進行打包了，生成了一個單獨的 chunk：
該 LazyBanner 元件生成的 chunk 的 JavaScript 源代碼如下：
而在運作時，通過 Chrome 開發者工具，我們也能觀察到，LazyBanner 元件對應的 chunk，是和 main chunk 分開進行加載的。
在實際項目實施過程中，如果一個自開發元件的規模過于龐大，并且和首屏加載邏輯無關，則可考慮通過懶加載的方式，将其同 main chunk 剝離開，進而減少首屏加載時間。
另外，SAP UI5 也同樣支援懶加載機制，SAP UI5 的從業者，可以移步這篇文章進行學習。感謝大家的閱讀。