sapui5sap-fiorisap-basis

How to avoid loading UI5 controls as single modules?


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 DatePicker API, they explained:

Note: The application developer should add dependency to sap.ui.unified library on application level to ensure that the library is loaded before the module dependencies will be required. 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 CSP compliance issues and adds an additional 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 in advance.

So this is 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 until the 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.

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 adding "sap.ui.comp" to the the /sap.ui5/dependencies/libs section of manifest, but was not really helpful.


Solution

  • SmartTable is a huge control that has a direct dependency to the following libraries:

    • "sap.ui.core"
    • "sap.ui.comp"
    • "sap.m"
    • "sap.ui.table"
    • Transitively dependent on:
      • "sap.ui.unified"
      • "sap.ui.layout"

    This can be seen in the source code of the sap.ui.comp.smarttable.SmartTable module.

    Resolution

    1. Ensure that no debug mode, sap-ui-debug, sap-ui-xx-componentPreload or sap-ui-xx-libraryPreloadFiles is active unnecessarily.

    2. Enable asynchronous module loading:

    3. In the app descriptor (manifest.json):

      • Declare all UI5 libs that are used by the app either directly or transitively. Note: unless the app intends to load specific UI5 libs manually, avoid adding { lazy: true }.
      • Enable preloading remote model data.
      {
        // ...
        "sap.ui5": {
          "dependencies": {
            "libs": { // Avoid { lazy: true } unless the app loads the lib manually
              "sap.ui.core": {},
              "sap.m": {},
              "sap.ui.comp": {},
              "sap.ui.table": {},
              "sap.ui.unified": {},
              "sap.ui.layout": {},
              "sap.uxap": {},
              "sap.f": {},
              "sap...": {} 
            },
          },
          "models": {
            "myODataModel": {
              "preload": true,
              //...
    4. After building a new Component-preload.js (or library-preload.js), deploy the optimized bundle to the target system and, if feasible, update the SAPUI5 resources to the latest available patch number from one of the maintained SAPUI5 versions too since the single module load issue could've been also caused by Fiori launchpad.

    5. In an ABAP system scenario:

      1. Refer to the note 3155948 - ABAP SAPUI5 patch version update.

      2. Ensure that the app index is kept up-to-date. See the SAP note 2364579. Otherwise, you might see the following error logged in the browser console:

        "Error in app component <app name>: No descriptor was found".

        Note: the app name should match the /sap.app/id value from manifest.json in terms of case-sensitivity.

      3. Recalculate the app index (C.f. note 2227577) and clear the cache (C.f. note 2319491).

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

    With preload: true in the /sap.ui5/models/<model name> section, the service $metadata document and annotations can be requested earlier, on which the SmartTable depends.


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