最近工作中處理了 SAP Commerce Cloud (電商云) UI 的一個(gè)懶加載 (Lazy Load) 功能的問(wèn)題，這里把自己學(xué)到的東西做個(gè)記錄。

UI 懶加載，有時(shí)又稱惰性加載，延遲加載，是和貪婪加載 (Eager Load) 截然相反的一種 UI 組件加載策略。

假設(shè)一個(gè)應(yīng)用的 UI 由 A，B，C 若干視圖組成，采用貪婪加載，則所有視圖的實(shí)現(xiàn)代碼，在 build 階段會(huì)被合并到一個(gè)代碼塊中，在 UI 加載領(lǐng)域里，這種代碼塊的術(shù)語(yǔ)為 chunk. 在貪婪加載模式下，所有視圖實(shí)現(xiàn)代碼合并成的單一代碼塊，通常稱為 main chunk. 在用戶瀏覽器訪問(wèn)應(yīng)用的任何一個(gè)視圖，比如視圖 A 時(shí)，包含了該應(yīng)用所有視圖實(shí)現(xiàn)代碼的 main chunk 會(huì)被瀏覽器加載。當(dāng)應(yīng)用的規(guī)模趨于復(fù)雜時(shí)，采用貪婪加載模式 build 而成的 main chunk 尺寸也隨之變大，會(huì)影響應(yīng)用的首屏加載時(shí)間。

假設(shè)一個(gè)應(yīng)用的部分視圖和首屏加載無(wú)關(guān)，而是用戶打開(kāi)應(yīng)用首頁(yè)后，需要點(diǎn)擊某些鏈接，跳轉(zhuǎn)之后才能打開(kāi)。為了減少應(yīng)用的首屏加載時(shí)間，我們可以考慮將這部分視圖采用懶加載的方式，分別進(jìn)行 build，從而生成多個(gè) chunk, 并按需被瀏覽器加載。

下面用 SAP Commerce Cloud (電商云) 為例來(lái)具體說(shuō)明。

Jerry 之前的文章?從一個(gè)實(shí)際的例子出發(fā)，談?wù)?SAP Commerce Cloud (電商云) 的 UI 自定義開(kāi)發(fā)?曾經(jīng)提到了購(gòu)物車頁(yè)面的自開(kāi)發(fā)場(chǎng)景。

這個(gè)購(gòu)物車頁(yè)面，需要用戶成功加載 Commerce Cloud 首頁(yè)后，點(diǎn)擊右上角的購(gòu)物車圖標(biāo)才能夠顯示：

然而默認(rèn)情況下，該購(gòu)物車的自開(kāi)發(fā)組件，MyCartComponent，還是被默認(rèn)打包到 main chunk 內(nèi)。我們可以用文本編輯器，打開(kāi)名為 main-es2015.js 的main chunk 查看其內(nèi)容。

下圖是自開(kāi)發(fā) MyCartComponent 的 TypeScript 實(shí)現(xiàn)：

被 Angular 編譯器編譯成 JavaScript 代碼后，其對(duì)應(yīng)代碼能夠在 main-es2015.js 里找到：

運(yùn)行時(shí)，盡管客戶僅僅訪問(wèn)了 SAP Commerce Cloud 首頁(yè)，沒(méi)有點(diǎn)擊購(gòu)物車，然而因?yàn)橘?gòu)物車自開(kāi)發(fā)組件遵循的默認(rèn)貪婪加載模式，因此其實(shí)現(xiàn)代碼仍然被包含在了 main chunk 里，隨首屏一并加載。

下面我們就來(lái)試試，用懶加載模式，來(lái)加載SAP Commerce Cloud (電商云) 的自開(kāi)發(fā)組件。

因?yàn)榍耙黄恼?#xff0c;我們已經(jīng)使用了自開(kāi)發(fā)購(gòu)物車作為例子，本文就換一個(gè)例子來(lái)闡述。

SAP Commerce Cloud (電商云) 頁(yè)面上這種能夠通過(guò)點(diǎn)擊，跳轉(zhuǎn)到產(chǎn)品明細(xì)頁(yè)面的圖片控件，稱之為 Banner，當(dāng)然也是能夠定制開(kāi)發(fā)的：

比如我新建了一個(gè) Lazy Banner Component，里面啥邏輯都沒(méi)有，就打印一行硬編碼的 I am lazy 的字符串：

在app.module.ts 里啟用我自開(kāi)發(fā)的 LazyBanner 組件之后：

SAP Commerce Cloud 的 UI 渲染如下：

現(xiàn)在更改代碼，以懶加載的方式，啟用自開(kāi)發(fā)組件 LazyBanner 的加載：

通過(guò)比較兩種加載模式的代碼能發(fā)現(xiàn)，利用 Angular 動(dòng)態(tài) import 語(yǔ)句，阻止了 builder 將 LazyBanner 組件的實(shí)現(xiàn)打包到 main chunk 的行為。

執(zhí)行 ng build, 這次就能發(fā)現(xiàn)，LazyBanner 組件的實(shí)現(xiàn)已經(jīng)和 main chunk 分開(kāi)進(jìn)行打包了，生成了一個(gè)單獨(dú)的 chunk：

該 LazyBanner 組件生成的 chunk 的 JavaScript 源代碼如下：

而在運(yùn)行時(shí)，通過(guò) Chrome 開(kāi)發(fā)者工具，我們也能觀察到，LazyBanner 組件對(duì)應(yīng)的 chunk，是和 main chunk 分開(kāi)進(jìn)行加載的。

在實(shí)際項(xiàng)目實(shí)施過(guò)程中，如果一個(gè)自開(kāi)發(fā)組件的規(guī)模過(guò)于龐大，并且和首屏加載邏輯無(wú)關(guān)，則可考慮通過(guò)懶加載的方式，將其同 main chunk 剝離開(kāi)，從而減少首屏加載時(shí)間。

另外，SAP UI5 也同樣支持懶加載機(jī)制，SAP UI5 的從業(yè)者，可以移步這篇文章進(jìn)行學(xué)習(xí)。感謝大家的閱讀。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP Commerce Cloud (电商云) UI 的懒加载功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。