What happens if a library preload file / library dependencies is not updated in the UI5-manifest?

Question

In the best practices for app developers, the Load Only What You Really Need section is written:

Keep Your Library Dependencies Up To Date
A library preload file, the library styles and text translations are loaded for every library you define in the application descriptor or the OpenUI5 bootstrap. Always define libraries in the manifest and remove all libraries that you do not intend to use in your code.

For instance:

"sap.ui5": {
    "dependencies": {
        "minUI5Version": "1.85.0",
        "libs": {
            "sap.ui.core": {},
            "sap.m": {},
            "sap.ui.layout": {}
        }
    }
    ...
}

My questions:

1. Do I understand it correctly, that in the libs I have to add all the libraries which appear in sap.ui.define([…]) of any controller of the UI5-app?

2. What happens if I forget to add a library here? Is it just excluded from the Component-preload.js and loaded in a non-optimized way or there are more serious disadvantages?

Answer 1

Yes, in order to benefit from performance optimizations, you have to keep the manifest.json section /sap.ui5/dependencies/libs always in sync with the UI5 libraries* (incl. custom ones) that can be identified from the application code and visible in API Reference if the lib is from the framework. I.e. not only "sap.ui.core" and "sap.m" but also, for example, "sap.ui.table" if one of the views contains sap.ui.table.Table.

If you have libraries which don't need to be preloaded immediately on app start but are supposed to be loaded on-demand, you can assign "lazy": true to those libraries, e.g.:

"libs": {
    "sap.ui.core": {},
    "sap.m": {},
    "sap.ui.comp": {
        "lazy": true
    }
}

But that "lazy": true is purely informational. In the app, such libs should be loaded explicitly before they're in use:

// Core required from "sap/ui/core/Core"
await Core.loadLibrary("sap.ui.comp",/*async:*/true);

Further info regarding loadLibrary: https://sdk.openui5.org/api/sap.ui.core.Core#methods/loadLibrary

* In the context of UI5, a "library" is a named bundle of controls, elements, types, interfaces, etc.
List of such libraries can be found at:

• SAPUI5: https://ui5.sap.com/resources/sap-ui-version.json
• OpenUI5: https://sdk.openui5.org/resources/sap-ui-version.json

Adding a single module (e.g. sap/ui/Device) to the /sap.ui5/dependencies/libs section won't work. To see which library the module belongs to, check the "Library" information from the module's namespace page in the API reference.

---

The same applies when working with UI5 tooling.

All libraries required by your project must be listed in the libraries section of the framework configuration:

framework:
  name: OpenUI5
  version: 1.112.0
  libraries:
    - name: sap.ui.core
    - name: sap.m
    - name: sap.ui.table
    - name: ...

Answer 2

The component-preload.js only contains elements of your app, never any UI5 code.

To answer your question, take a look at this small ui5 demo app.

When loading it with:

"sap.ui5": {
    "dependencies": {
        "minUI5Version": "1.108.0",
        "libs": {
            "sap.ui.core": {},
            "sap.m": {}
        }
    }
}

Open the DevTools and take a look at the Network Tab. Because of the references of the libs in the manifest.json, both library-preload.js are loaded before your Component.js.

When you remove:

"sap.ui.core": {},
"sap.m": {}

from the manifest.json and run the app again, then you can see that all UI5 elements are loaded one-by-one after your component.js. This just slows down your app.