1. 首页
  2. IT资讯

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?

SAP UI5库文件的加载细节探讨

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”.

SAP UI5库文件的加载细节探讨

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.

SAP UI5库文件的加载细节探讨

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 ).

SAP UI5库文件的加载细节探讨

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”.

SAP UI5库文件的加载细节探讨

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.

SAP UI5库文件的加载细节探讨

Press F8 for several times and then we reach this callstack. Click k._boot:

SAP UI5库文件的加载细节探讨

From here I could know these five libraries will be loaded via AJAX.

SAP UI5库文件的加载细节探讨

These five libraries will be loaded one by one in a for loop. And currently the third loop is working on sap.viz.library.

SAP UI5库文件的加载细节探讨

And for this library, if your browser support SVG, it will lead to the repository call for the following files:

SAP UI5库文件的加载细节探讨

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.

SAP UI5库文件的加载细节探讨

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 )

SAP UI5库文件的加载细节探讨

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.

SAP UI5库文件的加载细节探讨

And Chrome will point out the erroneous code position. Just click the hyperlink:

SAP UI5库文件的加载细节探讨

Then it will automatically navigate you to the line of error code. And click the pretty print button:

SAP UI5库文件的加载细节探讨

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.

SAP UI5库文件的加载细节探讨

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库文件的加载细节探讨

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/203109.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code