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:

    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 if applicable:

      • 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.app.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 functional effect, you must preload the lib bundle via sap/ui/core/Lib.load before making use of any module from the lib.
      • Do not instantiate ODataModel manually in JavaScript. Let the framework create the model instance from manifest.json which can optimize the loading behavior such as the $metadata caching supported by ABAP systems (sap-context-token=...). Importent: enable preloading remote model data additionally. With the enabled preload and earlyTokenRequest (V2) / earlyRequests (V4), the service metadata and annotations can be requested earlier in parallel. This allows rendering metadata-driven controls, such as the Smart Table, even earlier.
      {
  "sap.app": {
    "id": "my.app", // namespace (case-sensitive) used in Component.js
    // ...
  "sap.ui5": {
    "dependencies": {
       // Avoid { "lazy": true } unless the app loads it manually on-demand
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.comp": {},
        "sap.ui.table": {},
        "sap.ui.unified": {},
        "sap.ui.layout": {},
        "sap.uxap": {},
        "sap.f": {},
        // ... 
      }
    },
    "models": {
      "myV2ODataModel": {
        "preload": true, // requests $metadata earlier in parallel
        "settings": {
          "earlyTokenRequest": true, // allows handling CSRF token even earlier
          "preliminaryContext": true, // allows sending fewer $batch requests
          //...
      "orMyV4ODataModel": {
        "preload": true,
        "settings": {
          "earlyRequests": true, // requests $metadata earlier in parallel
          // ...

    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. Generate a bundle from your project: make sure that Component-preload.js / library-preload.js is generated in the build process before deployment. As Grunt-based bundle generation is outdated, migrate existing projects to SAP Fiori tools or UI5 Tooling if not done already. Refer to the respective documentation for the bundle generation.

    7. Newer SAPUI5 versions: when starting the app from SAP Fiori launchpad (FLP) with some older SAPUI5 versions, some of the modules can be still loaded separately, or some of the library message bundles can be requested unnecessarily. Either way, if the issue can be observed only in FLP, create a customer ticket to get further help or to request a downport of the fix if it exists.

    8. When starting the app from FLP, make sure that the browser console (F12) 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.

    9. 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.