专栏首页Jerry的SAP技术分享SAP UI5库文件的加载细节探讨

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.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SAP OData性能分析工具

    As mentioned by title, this blog does not introduce the OData trace functionalit...

    Jerry Wang
  • 使用SAP Transaction Launcher将ABAP Webdynpro嵌入到WebClient UI中

    THINK twice why you want to include an ABAP webdynpro component into CRM UI, as ...

    Jerry Wang
  • 如何启用SAP Business by design里的Correction Invoice功能

    Subject: [Tip] How to enable the function Correction Invoice for customer invoic...

    Jerry Wang
  • 语义分割--Global Deconvolutional Networks for Semantic Segmentation

    语义分割 Global Deconvolutional Networks for Semantic Segmentation BMVC 2016 ...

    用户1148525
  • 使用深度强化学习测试三消游戏(CS AI)

    测试视频游戏是制作过程中的关键步骤,需要花费大量时间和资源。一些软件公司正试图使用​​人工智能来替代能够使用人工代理的系统来减少对人力资源的需求。我们研究了使用...

    刘子蔚
  • 【NDN心得】Literature Review on Security of Named Data Networking

    版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/gongxifacai_believe/artic...

    魏晓蕾
  • SAP S/4 HANA新变化-FI:GL总账

    GENERAL LEDGER总账 General Ledger in S/4H is based in the Universal Journal; the l...

    SAP最佳业务实践
  • Codeforces Round #618 (Div. 2)-Non-zero

    这个题是说通过最小的修改次数,是数列和不能为0,乘积不能为0; 那么也即数列中不存在0,如果存在0的一定要改,存在0的只能变成1,那我们考虑变成1之后,的和是...

    风骨散人Chiam
  • NetDP:用于蚂蚁信用支付中的默认预测的工业规模分布式网络表示框架(CS.LG)

    蚂蚁信用支付是蚂蚁商业风险组中的消费信贷服务。与信用卡类似,贷款违约是该信贷产品的主要风险之一。因此,有效的违约预测算法是公司减少损失和增加利润的关键。但是,我...

    蔡小雪7100294
  • golang protobuf 教程

    This tutorial provides a basic Go programmer’s introduction to working with prot...

    mojocn

扫码关注云+社区

领取腾讯云代金券