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的原创文章，请关注公众号"汪子熙":