How to load sapui5 resources in the background

Question

In our application we load a number of SAPUI5 libraries. index.html has the following code to load the SAPUI5 resources

<script src="resources/sap-ui-cachebuster/sap-ui-core.js"
        id="sap-ui-bootstrap"
        data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3,sap.m"
        data-sap-ui-theme="sap_bluecrystal" 
        data-sap-ui-appCacheBuster="./">

</script>

In our web.xml we have mentioned https://sapui5.hana.ondemand.com as the com.sap.ui5.resource.REMOTE_LOCATION to load the resources.

What we are observing is that the application takes a very long time to load for the first time. And network calls give an idea that loading of UI5 resources takes maximum time. Is there a way we can load the UI5 resources faster? or in the background? An advice or a code sample will really be helpful here. Thanks.

Answer 1

You can load UI5 resources asynchronously. Use data-sap-ui-preload="async"

<script src="resources/sap-ui-cachebuster/sap-ui-core.js" id="sap-ui-bootstrap"
         data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3,sap.m"
         data-sap-ui-theme="sap_bluecrystal" 
         data-sap-ui-preload="async"
         data-sap-ui-appCacheBuster="./">

But you must delay the access to the SAPUI5 APIs by using the attachInitEvent method

var oCore = sap.ui.getCore();
oCore.attachInit(function() {
    //do the needful
});

Answer 2

You are trying to load too much at a time :sap.ui.commons,sap.ui.table,sap.ui.ux3,sap.m

Try to load only the essential parts and rest of the parts as async method so user can at least see some action before waiting too long:

Sync

 <script src="resources/sap-ui-cachebuster/sap-ui-core.js" id="sap-ui-bootstrap"
     data-sap-ui-libs="sap.ui.commons,sap.m"
     data-sap-ui-theme="sap_bluecrystal" 
     data-sap-ui-appCacheBuster="./">

ASYNC

 <script src="resources/sap-ui-cachebuster/sap-ui-core.js" id="sap-ui-bootstrap"
     data-sap-ui-libs="sap.ui.table,sap.ui.ux3"
     data-sap-ui-theme="sap_bluecrystal" 
     data-sap-ui-preload="async"
     data-sap-ui-appCacheBuster="./">