sapui5 - How to load sap.ui.comp.smarttable.SmartTable faster?

Question

In SAPUI5 when you add a sap.m.DatePicker to your app for the first time it takes some seconds to load the required files and open the date picker. In the API they explained:

Note: The sap.ui.unified.Calendar is used internally only if the DatePicker is opened (not used for the initial rendering). If the sap.ui.unified library is not loaded before the DatePicker is opened, it will be loaded upon opening. This could lead to a waiting time when the DatePicker is opened for the first time. To prevent this, apps using the DatePicker should also load the sap.ui.unified library.

So this it the solution they suggest for making the loading of DatePicker faster.

When I use sap.ui.comp.smarttable.SmartTable it takes at least 10 to 15 seconds for the first time that user can see the app.

Actually it loads a huge number of individuals JavaScript files. Here is a small part of the files that are loaded.

Now the question is, Is there anyway to make this loading faster?

I tried the following code in the dependencies of manifest but was not helpful.

"sap.ui.comp": {
    "minVersion": "1.52.1"
}

Answer 1

SmartTable is a huge control that has dependencies to the following libraries:

• "sap.ui.core"
• "sap.m"
• "sap.ui.comp"
• "sap.ui.table" which, again, depends on ..
• "sap.ui.unified"

This can be seen in the dependency list of the module.

Try preloading those libraries beforehand asynchronously:

1. If you can control the bootstrap config, add data-sap-ui-async="true" (or data-sap-ui-preload="async" if UI5 version < 1.58.2).

2. And in the app descriptor (manifest.json), declare the dependent libs and enable preloading remote model data:

   {
     ...
     "sap.ui5": {
       "dependencies": {
         "libs": {
           "sap.ui.core": {},
           "sap.m": {},
           "sap.ui.comp": {},
           "sap.ui.table": {},
           "sap.ui.unified": {}
         },
       },
       "models": {
         "myODataModel": {
           "preload": true,
           ...

This should load the table faster since its dependencies don't need to be loaded on-demand and synchronously anymore which avoids freezing the UI thread of the browser.

And with the preload: true, the service $metadata document and annotations can be requested earlier on which the SmartTable depends.

---

For other performance related best-practices, see Performance Checklist.