注：Spartacus 推薦客戶盡量使用 feature 級別的 lazy load，而非 Component 級別的 lazy load.

后者的具體實現步驟：

app 文件夾下新建一個 cms-components 文件夾，再建一個 product 子文件夾。

依次創建三個文件。

使用下列語法對 JerryProductImageComponent 進行延遲加載：

providers: [provideDefaultConfig(<CmsConfig>{cmsComponents: {ProductImagesComponent: {component: () => import('./jerry-product-images.component').then(m => m.JerryProductImagesComponent)},},}),]

并且注意在應用程序其他位置，均不能出現對 JerryProductImagesComponent 的靜態引用。

再把上圖的 JerryProductImagesModule 放到 app module 的 imports 區域即可。

在 package.json 的 scripts 區域里新增一條指令：

“build:ssr:dev”: “ng build && ng run jerryssr:server”,

運行 yarn build:ssr:dev，觀察到我們想延遲加載的 Component 已經成功被單獨制作成了一個 chunk 文件：

命令行 ng run jerryssr:serve-ssr 啟動應用：

當訪問到 product 明細頁面時，觀察到此時才觸發 jerry-product-images-component.js 的加載，說明 Component 的延遲加載實現成功了。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP 电商云 Spartacus UI Component 级别的延迟加载实现(Lazy Load)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。