如何处理 bootstrap 的 data-sap-ui-libs 与清单的 sap.ui5/dependencies/libs？

Question

我通常在 sap.ui5/dependencies/libs 下的清单中声明应用程序依赖的所有标准库。

现在我应该在 bootstrap 参数 data-sap-ui-libs 中放入什么相同的库？如果我在 data-sap-ui-libs 中放少/多会有什么影响？它们有何不同？

PS。我在 SAP 的文档中找不到这个，但请证明我错了。 :-)

Answer 1

我会在清单上声明它们。

通过在 data-sap-ui-libs 下的 .html 文件中声明它们，您基本上是在加载 UI5 库之后立即需要这些依赖项 - 甚至在加载组件之前。

通过在您的清单中声明它们，您就是在声明您自己的组件的依赖项。因此，这些依赖项仅在组件初始化之前加载。

由于该组件应该是独立的，因此您的组件不应期望始终以独立模式使用。

Answer 2

引导程序 (data-sap-ui-libs) 在 index.html 中完成。它只需要包含在 index.html.

中引用的库

如果您的代码如下所示：

new sap.m.Shell({
    app: new sap.ui.core.ComponentContainer({
        name: "my.namespace.app",
        height: "100%"
    })
}).placeAt("content");

那么您应该需要以下库：

data-sap-ui-libs="sap.m, sap.ui.core"

如果您的代码如下所示：

sap.ui.require([
    "sap/m/Shell",
    "sap/ui/core/ComponentContainer"
], function(Shell, ComponentContainer) {
    new Shell({
        app: new ComponentContainer({
           name: "my.namespace.app",
           height: "100%"
        })
     }).placeAt("content");
});

您不需要要求任何东西（但它可能会影响您应用的加载时间）。

所有视图中使用的库在manifest.json 中应该是必需的。因此，如果您在您的应用中使用 sap.m，您应该在您的 manifest.json 中要求它，即使您已经在 index.html.

中要求它

这是因为 Component.js 和 manifest.json 是应用程序的默认入口点，而 index.html 只是 Fiori Launchpad 之外的独立应用程序的包装器。

Answer 3

What are the effects if I put less/more in data-sap-ui-libs? How do they differ?

我的建议是从 index.html 中完全删除 data-sap-ui-libs。 特别是 如果应用程序正在处理 OData，请务必尽早检索 $metadata 文档。请参阅以下示例：

index.html

<头>
  <脚本 ID="sap-ui-bootstrap"
    来源="https://ui5.sap.com/<em><version></em>/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_fiori_3"
    data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
    data-sap-ui-async="true"
    data-sap-ui-compatversion="edge"
    data-sap-ui-resourceroots='{ "demo": "./" }'
    data-sap-ui-xx-waitfortheme="init"
  ></script><!-- <strong>否</strong> data-sap-ui-lib -->
</头>
<body id="content" class="sapUiBody">
  <div 风格="height: 100%"
    data-sap-ui-component
    data-name="demo"
    data-height="100%"
  ></div>
</body>

manifest.json

{
  "sap.app": {
    "dataSources": {
      "myODataSource": {
        "uri": "/odata_org/V2/Northwind/Northwind.svc/",
        "type": "OData",
        "settings": {
          "odataVersion": "2.0",
          "localUri": "model/metadata.xml",
          "annotations": [
            "annotation0"
          ]
        }
      },
      "annotation0": {
        "type": "ODataAnnotation",
        "uri": "annotation/annotation0.xml",
        "settings": {
          "localUri": "annotation/annotation0.xml"
        }
      }
    },
    ...
  },
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.67.1",
      "libs": {
        "sap.m": {},
        "sap.ui.table": {},
        "sap.ui.unified": {}
      }
    },
    "models": {
      "": {
        "dataSource": "myODataSource",
        "settings": {
          "preliminaryContext": true,
          "tokenHandling": false
        },
        "preload": true
      }
    },
    ...
  },
  ...
}

结果

如您所见，$metadata 文档与控件库同时获取。这确保了一旦加载库就可以立即请求实体（例如在 $batch 中）。如果库是在 data-sap-ui-libs 中声明的，它们将首先加载，然后 $metadata，然后实体这造成了不必要的瓶颈。

但即使不考虑 OData，我注意到当从 data-sap-ui-libs 中删除库时，页面准备速度会更快一些。无论如何，我会尝试不同的方法并进行性能测量，此外遵循记录在案的性能指南，不管互联网上的人（包括我）怎么说。

TL;DR

仅在以下情况下使用 data-sap-ui-libs ：
1. 该应用根本没有 Component.js。
2. 在创建组件之前访问sap.ui.core以外的库中的模块（例如实例化<strong>sap.m</strong>.Shell 作为 shell 为 ComponentContainer)

否则，完全删除 data-sap-ui-libs 并仅保留 sap.ui5/dependencies/libs - 特别是 如果应用程序应该从 Fiori Launchpad 等应用程序容器启动(FLP) 完全跳过加载 index.html。

如何处理 bootstrap 的 data-sap-ui-libs 与清单的 sap.ui5/dependencies/libs？

How to treat bootstrap's data-sap-ui-libs vs manifest's sap.ui5/dependencies/libs?

sapui5

index.html

manifest.json

结果

TL;DR