最近工作中處理了 SAP Commerce Cloud (電商云) UI 的一個(gè)懶加載 (Lazy Load) 功能的問題，這里把自己學(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ù)語為 chunk. 在貪婪加載模式下，所有視圖實(shí)現(xiàn)代碼合并成的單一代碼塊，通常稱為 main chunk. 在用戶瀏覽器訪問應(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)用的部分視圖和首屏加載無關(guān)，而是用戶打開應(yīng)用首頁后，需要點(diǎn)擊某些鏈接，跳轉(zhuǎn)之后才能打開。為了減少應(yīng)用的首屏加載時(shí)間，我們可以考慮將這部分視圖采用懶加載的方式，分別進(jìn)行 build，從而生成多個(gè) chunk, 并按需被瀏覽器加載。

下面用 SAP Commerce Cloud (電商云) 為例來具體說明。

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

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

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

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

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

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

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

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

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

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

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

SAP Commerce Cloud 的 UI 渲染如下：

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

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

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

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

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

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

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

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

總結(jié)

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

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