Technical Articles
A Tip For Improving SAPUI5 Application Loading Performance
introduction:
When developing SAPUI5 application, there is a tip that can improve performance. I’d like to share it with you.
There is one configuration param in the manifast.json file.
sap.ui5.dependencies.libs
"sap.ui5": {
"flexEnabled": false,
"rootView": {
"viewName": "mobileLogin.mobile.view.View1",
"type": "XML",
"async": true,
"id": "View1"
},
"dependencies": {
"minUI5Version": "1.65.6",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
}
If you use the SAP Web IDE to create the SAPUI5 application. In the manifest.json file. you will found the code snippet above.
So How to Improve the Performance by using the param?
Let’s empty the libs params.
"dependencies": {
"minUI5Version": "1.65.6",
"libs": {
}
},
And then run the SAPUI5 template application which created by the SAP Web IDE.
So finally the page loading will send 88 requests, and many of the requests are the SAPUI5 component JavaScript files.
Then we set the libs in the manifast.json file:
"dependencies": {
"minUI5Version": "1.65.6",
"libs": {
"sap.m": {}
}
},
Run the application again:
The network only have 30 requests now, and the time save 3 seconds.
What happen?
Base on the requests we can see we don’t have any request for the SAPUI5 components.And there is a new request “libray-preload.js” come out.
The fully request url is https://webidetesting9875803-i320993trial.dispatcher.hanatrial.ondemand.com/webapp/resources/sap/m/library-preload.js.
Go back to our view.xml page:
<mvc:View controllerName="mobileLogin.mobile.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content></content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
In this page we found that we are use these components are all in sap.m page.
Conclusion:
If we put the libs in the manifest.json file. when the page start loading, it will load the libray-preload.js instead of the component’s own js file. And if are the components’s lib which we used in our code are all defined the lib in the “sap.ui5.dependencies.libs” ,it can help us to save the network request to increasing the loading performance.
Hope you like it.
Regards,
Gary
nice
Thanks, Nice one!
Good one!
Interesting view. However just trying to understand better.
What exactly is this preload of libs doing? is it restricting the load to only sap.m libs? what are we losing by specifically mentioning sap.m in libs load?
If you look at the second screenshot, though it saved 2.5 sec and reduced number of requests, the total amount of data transferred has actually gone up and also the DOM content size has gone up. Have you evaluated the impact of that?
Regards,
Nitin
good
super Gary
Bravo! Gary!
Awesome!
Big thx!
Thanks for the post.
Nice!
Great!!!