How to reduce sequential requests in SAPUI5?

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.

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 with multiple eager and lazy dependencies such as "sap.ui.core", "sap.m", "sap.ui.mdc", "sap.ui.comp", "sap.ui.table", "sap.ui.fl" etc. This can be seen in the source code of the SmartTable and the sap.ui.comp's manifest.json.

Same with the sap.m library having lazy dependency to the sap.ui.unified due to the sap.m.DatePicker, the sap.ui.comp library (which includes SmartTable) cannot load all its lazy dependencies upfront either. The remaining dependencies must be handled by the application.

Additionally, SAPUI5 loading single modules sequentially or even synchronously without bundles can have many causes, as shown below.

Resolution

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.
Let the UI5 modules load asynchronously. Follow the guidance How to avoid "Synchronous XMLHttpRequest on the main thread" warning in UI5?
Register the descriptor: if your project has manifest.json, ensure that your Component metadata contains manifest: "json". Additionally, include the marker interface "sap.ui.core.IAsyncContentCreation" to enable creating the component's content asynchronously.
```
return UIComponent.extend("my.app.Component", {
  metadata: {
    manifest: "json", // connect with the existing manifest.json
    interfaces: [ "sap.ui.core.IAsyncContentCreation" ]
  },
  // ...
});
```

manifest.json / .library / preload:

Ensure that all dependent UI5 libs and components are declared in the manifest section /sap.ui5/dependencies. In library development, dependencies can be defined in /<library>/<dependencies>/ n <dependency> (Sample .library).

⚠️ Avoid { "lazy": true } unless you explicitly load the dependency on demand. "lazy": true is purely informational and does not load the dependent bundle automatically. If you keep it, or if there is no manifest at runtime, ensure you preload the lazy dependencies manually upfront.

Either way, dependencies should be preloaded before accessing their modules.
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.

Example:

{
  "sap.app": {
    "id": "my.app", // case-sensitive namespace 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": {},
        "my.lib.on.demand": { "lazy": true },
        // ... 
      }
    },
    "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
          // ...

// Core required from "sap/ui/core/Core"
await Core.loadLibrary("my.lib.on.demand", true); // deprecated since 1.119

// Lib required from "sap/ui/core/Lib"
await Lib.load({ name: "my.lib.on.demand" }); // available since 1.118

Remove unnecessary requests:
- When accessing a translated i18n text, ensure the i18n key really exists in the *.properties file to prevent fallback requests.
- Ensure that supportedLocales are defined in manifest. Migrate to UI5 Tooling v4.0 or higher to fill the supportedLocales automatically at runtime and build time.
- In library development: if the library project doesn't come with its own i18n resources or CSS styles, ensure that false is set to /sap.ui5/library/i18n in manifest and noLibraryCSS in library.js accordingly to avoid unnecessary requests to messagebundle*.properties and library.css.
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.
Newer SAPUI5 versions: especially 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. If possible, try one of the newer SAPUI5 releases.
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.

Contact SAP support:

if the error "No descriptor found" cannot be resolved from your side.
if the above guidelines are not followed in SAP-maintained code to raise the issue.
if the issue can be observed only in FLP despite using the same SAPUI5 version in development time. At runtime, you can view the version with Ctrl+Shift+Left Alt/Option+P.

To learn more, see Best Practices for Developers.