SAP UI5库文件的加载细节探讨
In every UI5 application we declare usage on libraries like sap.ui.commons via “data-sap-ui-libs”.
Have you ever thought about how does the logic work? Since we only declare the NAME of libraries here, how, when, and where are these libraries loaded from repository when your UI5 application is launched?
Requirement
One colleague asked me how this works under the hood. He would like to know how to explore it by himself.
First attempt in Chrome
I have launched my UI5 application, I could already see the resource files for the corresponding above four declared libraries under the folder “resources”.
and observe from Network tab, our application html page is always loaded from repository first, and then the sap-ui-core.js, followed by all the other libraries.
I would assume it is sap-ui-core.js which issues the subsequent call to load the declared libraries from repository.
The proof is, I could find totally 27 AJAX calls in this big file ( 18697 lines ).
The question is: how to find the place to issue library load calls in an efficient way?
Approach1: use XHR breakpoint ( as usual )
Enable XHR Breakpoint, and type your application url in Chrome and press enter key. The breakpoint will be triggered for loading ui core library. Click callstack “jQuery.sap.preloadModules”.
type “m” in Watch Expressions tab, and then you can see the url for “library-preload.json”. This AJAX call generates the very entry in Network tab in the third screenshot of this document.
Press F8 for several times and then we reach this callstack. Click k._boot:
From here I could know these five libraries will be loaded via AJAX.
These five libraries will be loaded one by one in a for loop. And currently the third loop is working on sap.viz.library.
And for this library, if your browser support SVG, it will lead to the repository call for the following files:
And again you would see the url of each file in AJAX call, and know that the AJAX is actually done in a synchronous way.
So finally I could see the following files are fetched from repository, which are corresponded to the jQuery.sap.require method call in the previous screenshot ( line 93 ~ line 105 )
Approach2: A far more efficient way
If you have known that sap-ui-core.js uses the same code to fetch your application js code and sap UI standard library, you could find the place of this call in a more efficient way.
Deliberately generates a syntax error in your application view and launch the application.
And Chrome will point out the erroneous code position. Just click the hyperlink:
Then it will automatically navigate you to the line of error code. And click the pretty print button:
After pretty print format, you will see the line of code which raises the syntax error ( line 8136 ). And in line 8114, the AJAX call is just what we have found via approach1.
Although this document contains no actual development skills for UI5, it tries to demonstrate how to explore the fundamental of UI5 via Chrome by yourself. Hope it would be useful for your daily troubleshooting when developing UI5 applications.
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关文章
- SAP UI5 SimpleForm M 和 L 型表单的 label 和 input 分配讲解
- SAP UI5 sap.ui.layout.Grid 控件宽度百分比的设置原理
- 在 SAP Fiori Launchpad 里给需要执行的 SAPGUI 事物码配置系统别名
- 七大场景,带你玩转SAP ECN
- 使用 SAP UI5 OData API 读取单条 order 数据的办法
- 关于 SAP Gateway 响应头部 Last Modified 字段的赋值逻辑
- SAP Gateway 里的 REST 概念
- 如何使用 SAP OData 服务向 ABAP 服务器上传文件试读版
- SAP UI5 加载本地并不存在的 PDF 文件的错误处理
- SAP MM SPED输出报错-No authorization for delivery from shipping point US##-之对策
- SAP QM Quality Certificate系列3
- 关于 SAP UI5 接口 sap.ui.core.IAsyncContentCreation 的问题讨论
- SAP UI5 响应式表格 sap.m.Table 根据不同宽度的屏幕动态决定显示或隐藏 Column 的实现源代码讲解试读版
- SAP UI5 的数据绑定语法概述
- 关于 SAP Enterprise Portal 的前后端技术栈
- SAP Emarsys 和 SAP Spartacus 的集成
- 关于 SAP ABAP OData 服务响应里的 d,results 和 __metadata 这几个字段的作用
- SAP播放本地视频及音频(仅限于window MediaPlayer可播放文件)详解编程语言
- SAP后台Job数据保存在表TBTCP/TBTCO中详解编程语言
- SAP ABAP 输出Excel文件实例—-现金流量表输出—-(备忘)详解编程语言
- SAP PI Proxy2File详解编程语言
- SAP MM模块常用表总结详解编程语言
- SAP MM 评估类型 评估类别详解编程语言
- ABAP写数据到SAP服务器文件并读取详解编程语言
- SAP 标准教材和自学方法详解编程语言
- SAP在Linux上安装(sap安装linux)
- 对比SAP VS Oracle: 哪个更适合你?(sap与oracle)
- 系统Oracle公司收购SAP系统开启新的商业时代(Oracle公司sap)
- Oracle从SAP抽取数据的简单方法(oracle从sap抽数)
- 跨界合作新模式 Oracle与SAP实现合并(oracle与sap合并)
- 聘请高级Oracle与SAP顾问,拓展业务潜力(oracle sap顾问)