什么是 SAP UI5 的 Component-preload.js, 什么是Minification和Ugification
SAP UI5 基于 MVC 架构,一个典型的 SAP UI5 工程包含了 controller,view,component和 html 这几种不同类型的资源文件:
这种资源文件细粒度的拆分,其优点是每个文件职责清晰,符合开发人员对 MVC 传统架构的认识,因而在项目开发过程中,有助于SAP UI5 开发人员,在正确的位置编写正确的代码。
然而,开发结束后,切换到生产模式运行时,这种拆分方式会给SAP UI5的性能造成一些消极的影响。
每个资源文件需要一个单独的网络请求去加载。
以 Jerry 的一个用于SAP UI5学习的脚手架应用,没有任何后台API的依赖 为例,其加载的网络请求如下图所示:
和很多其他的前端框架一样,SAP UI5 也引入了 bundling 机制,将这些单独的开发资源,打包成一个整体,文件名为 component-preload.js.
Component-preload.js绝不是简单地将SAP UI5项目工程里各个文件的内容单纯地拼接出来。在内容拼接基础上,还施加了Minification和Ugification的过程。
Minification:删除代码中的注释和空行,空白,以减小最终生成的Component-preload.js的尺寸。
Ugification:代码混淆,将原始代码中的变量名转换成单个字符,从而进一步减少Component-preload.js的尺寸。
看一个 SAP UI5 Component-preload.js的具体例子。
在SAP UI5项目文件里缺少Component-preload.js时,我的UI5脚手架应用,总共发起了43个网络请求,页面加载时间为 11.95秒:
而通过 SAP UI5 打包工具生成Component-preload.js后,加载该应用一共用了32个网络请求,减少了11个请求,页面加载时间减少到10秒。
最后,SAP UI5 的 Component-preload.js 文件如何生成呢?网络上提供了很多工具,Jerry 这篇文章介绍了我觉得相对来说步骤比较简单的一种办法:
更多Jerry的原创文章,尽在:“汪子熙”:
相关文章
- 给 SAP Commerce Cloud Storefront 设置 endpoint
- 关于 SAP UI5 所有控件的共同祖先 - sap.ui.base.ManagedObject
- JS跳转代码_js中跳转页面路径
- ”大国核芯 云端打造“ SAP 专精特新系列芯片电子城市论坛-成都站
- [ChatGPT 勘误] SAP UI5 的 sap.ui.base.Object
- SAP ABAP CDS view Association 引入的缘由
- SAP ABAP CDS view 里 INNER JOIN 和 Association 的区别
- js 数组去除重复数据-5 个提升你 JS 编码水平的实例
- SAP QM 不常用功能之Source Inspection
- SAP 云平台从 Neo 到 Multi-Cloud 的演化历史
- SAP QM 源检验流程研习
- get两个js小技能——JS截取视频第一帧&图片转Base64
- SAP 快速报表详解编程语言
- SAP采购申请审批记录增强详解编程语言
- SAP系统内如何查询特定时间内某个Tcode都修改了什么-AUT10详解编程语言
- SAP ABAP常见错误记录之三:Enhancement category for table missing / for include or subtype missing详解编程语言
- SAP用户权限控制设置及开发详解编程语言
- SAP-MM:物料采购订单的客制化开发与对应打印/预览的配置详解编程语言
- Version Management in SAP ABAP详解编程语言
- 数据库解决方案如何使用SAP创建Redis数据库(sap怎么创建redis)
- Oracle中使用JS变量管理数据(oracle使用js变量)
- 探索 Oracle 与 SAP 技术的开发可能性(oracle sap开发)
- js延迟加载改变JS的位置加快网页加载速度
- js获取当前地址JS获取当前URL的示例代码