共计 1630 个字符，预计需要花费 5 分钟才能阅读完成。
最近工作中解决了 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 的原创文章，尽在：” 汪子熙 ”:
