如果 UI5 清单中未更新库预加载文件/库依赖项会怎样?

在应用程序开发人员的最佳实践中, Load Only What You Really Need 部分是这样写的:

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

例如:

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

我是否理解正确,在 libs 中我必须添加 UI5 应用程序的任何控制器的 sap.ui.define([…]) 中出现的所有库?如果我忘记在此处添加库会怎样?它只是从 Component-preload.js 中排除并以非优化方式加载还是有更严重的缺点?

stack overflow What happens if a library preload file / library dependencies is not updated in the UI5-manifest?
原文答案
author avatar

接受的答案

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:

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 corresponding API reference page:

Screenshot of UI5 sap.ui.Device API reference header info


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.108.0
  libraries:
    - name: sap.ui.core
    - name: sap.m
    - name: sap.ui.table
    - name: ...

答案:

作者头像

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.

相关问题