Skip to Content
Technical Articles
Author's profile photo Gary Long

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

Assigned Tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Daniel Chen
      Daniel Chen

      nice

      Author's profile photo Zayidu A
      Zayidu A

      Thanks, Nice one!

      Author's profile photo FAZAL BASHEER
      FAZAL BASHEER

      Good one!

      Author's profile photo Nitin Mahajan
      Nitin Mahajan

      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

       

      Author's profile photo Javier Andres Caceres Moreno
      Javier Andres Caceres Moreno

      good

      Author's profile photo Ray Lv
      Ray Lv

      super Gary

      Author's profile photo Min Zhuo
      Min Zhuo

      Bravo! Gary!

      Author's profile photo Wei Shen
      Wei Shen

      Awesome!

      Author's profile photo Dominik Meier
      Dominik Meier

      Big thx!

      Author's profile photo ranganath muddeerappa
      ranganath muddeerappa

      Thanks for the post.

       

       

      Author's profile photo Jerome Zhao
      Jerome Zhao

      Nice!

      Author's profile photo James Gs
      James Gs

      Great!!!