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