SAP Commerce Cloud (电商云) UI 的懒加载功能

最近工作中处理了 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 的从业者，可以移步这篇文章进行学习。感谢大家的阅读。

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

SAP Commerce Cloud (电商云) UI 的懒加载功能相关推荐

SAP 产品一脉相承的 UI 增强思路，在 SAP Commerce Cloud(电商云) UI 增强实现中的体现
本文首先快速回顾几种 SAP 产品中的 UI 增强思路,然后具体介绍该思路是如何在 SAP Commerce Cloud(电商云) UI 增强中贯彻实施的. Jerry 之前的文章:Jerry 在 2 ...
SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来改变UI显示风格
这是Jerry 2021年的第 19 篇文章,也是汪子熙公众号总共第 290 篇原创文章. 本文分别针对 SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI,介 ...
SAP Commerce Cloud ( 电商云 ) 路由路径的自定义配置与开发
这是Jerry 2021年的第 24 篇文章,也是汪子熙公众号总共第 295 篇原创文章. 最近看到 SAP天天事公众号发布的一篇文章: 基于 SAP Commerce Cloud,老娘舅构建的餐饮 ...
一小时内在本地搭建 SAP Commerce Cloud(电商云)的前后台运行环境
这是Jerry 2021年的第 21 篇文章,也是汪子熙公众号总共第 292 篇原创文章. 最近一段时间, Jerry 陆续把自己在 SAP Commerce Cloud (电商云) 新一代前台页面开 ...
从一个实际的例子出发，谈谈SAP Commerce Cloud电商云的UI自定义开发
昨天 Jerry 读到了 SAP天天事公众号上发布的一篇文章:多家知名企业选择 SAP Commerce Cloud 为客户提供卓越购物体验. SAP 日前宣布,锦江国际旗下的全球酒店供应链平台锦江 ...
iOS开发UI篇—懒加载
iOS开发UI篇-懒加载 1.懒加载基本懒加载--也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了, ...
element ui 树形-懒加载-表格-多选勾选问题
element ui树形表格如下: 它的数据格式为:使用children字段来存放子级数据 tableData: [{id: 1,date: "2016-05-02",name: ...
SAP Fiori里的List是如何做到懒加载Lazy load的
今天一同事问我这个问题:S/4HANA Fiori应用里的列表,一旦Scroll到底部就会自动向后台发起新的请求把更多的数据读取到前台显示. 以Product Master这个应用为例,我点击搜索之后 ...
关于 SAP Spartacus 电商云 UI feature level 的测试步骤
Feature Level 在 app.module.ts 里维护: 测试步骤注册一个新用户并登录. 将产品添加到购物车. 转到购物车页面更新产品数量和结帐. 停止服务器 ./spartacus. ...

SAP Commerce Cloud (电商云) UI 的懒加载功能

SAP Commerce Cloud (电商云) UI 的懒加载功能相关推荐

最新文章

热门文章