Search code examples
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

  • Smart Table 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. Debug mode should not be active: check whether the "Debug Sources" option, sap-ui-debug, sap-ui-xx-componentPreload, or sap-ui-xx-libraryPreloadFiles is enabled.

    2. HTML document:

      • Make use of data-sap-ui-onInit="module:.../.../..." in place of inline scripts.
      • Only if the project has no Component.js or requires non-core UI5 modules (e.g. sap/m/Shell) before the Component loads, declare dependent library preloads:
        data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout,..."

    3. Register the descriptor: if your project has manifest.json, ensure that your Component metadata contains manifest: "json".

      return UIComponent.extend("my.Component", {
  metadata: {
    manifest: "json",
    interfaces: [ "sap.ui.core.IAsyncContentCreation" ],
  },
  // ...
});

    4. 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 }.
        If you would like to keep lazy: true, which is purely informational and has no direct effect on the UI5 runtime, you must preload the lib bundle via sap.ui.core.Lib.load before making use of any module from the lib.
      • Enable preloading remote model data. 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.
      {
  // ...
  "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,
        //...

    5. I18n:

      • When accessing a translated i18n text, ensure that the i18n key really exists in the *.properties file. Otherwise, a fallback request will be sent unnecessarily.
      • Ensure that supportedLocales are defined. Since UI5 Tooling v4.0, the supportedLocales are filled automatically at runtime and build time.
      • In library development: if the library project doesn't come with its own i18n resources, set false to /sap.ui5/library/i18n to avoid any unnecessary request to messagebundle.properties that ends up in 404.

    6. Build the bundle (Component-preload.js / library-preload.js), deploy it to the target system, and 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 the Fiori launchpad stack. If the issue still persists here, create a customer ticket with the component CA-FLP-FE-COR.

    7. In an ABAP system scenario:

      1. Follow the note 3155948 - ABAP SAPUI5 patch version update to ensure in the first place that the patch number of the maintained SAPUI5 release is up-to-date.

      2. When starting the app from the launchpad, make sure that the browser console does not report:

        "Error in app component <case-sensitive app ID>: No descriptor was found".

        If the error cannot be resolved, create a customer ticket with CA-UI5-ABA-AIDX.

      3. Recalculate the app index (Cf. 2227577, 2364579), and clear the cache (Cf. 2319491).

    8. Enable asynchronous module loading:

    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.

    To learn more, see Best Practices for Developers.