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

杀马特。学长 韩版系。学妹 提交于 2021-02-19 06:11:36

问题


I usually declare all standard libraries that the application depends on in the manifest under sap.ui5/dependencies/libs.

Now what should I put in the bootstrap argument data-sap-ui-libs, the same libraries? What are the effects if I put less / more in data-sap-ui-libs? How do they differ?

PS. I couldn't find this in SAP's documentation, but please proof me wrong. :-)


回答1:


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

My recommendation is to remove data-sap-ui-libs from index.html altogether. Especially if the app is dealing with OData, it's important to retrieve the $metadata document as early as possible. See the example below:

index.html

<head>
  <script id="sap-ui-bootstrap"
    src="https://ui5.sap.com/<version>/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><!-- No data-sap-ui-lib -->
</head>
<body id="content" class="sapUiBody">
  <div style="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
      }
    },
    ...
  },
  ...
}

Result

As you can see, the $metadata document is being fetched in parallel with the control libraries. This ensures that entities can be requested right away (e.g. in $batch) as soon as the libs are loaded. If libs were declared in data-sap-ui-libs, they'd be loading first, then the $metadata, and then the entities which creates an unnecessary bottleneck.

But even without considering OData, I noticed the page gets ready a bit faster when the libs are removed from data-sap-ui-libs. Anyhow, I'd try different approaches and do performance measurements, in addition to following documented performance guidelines, regardless of what people on the internet say (including me).


TL;DR

  • Use data-sap-ui-libs only if:
    1. The app has no Component.js at all.
    2. Modules from libraries other than sap.ui.core are accessed before creating the component (E.g. instantiating sap.m.Shell as a shell for the ComponentContainer)
  • Otherwise, remove data-sap-ui-libs altogether and maintain sap.ui5/dependencies/libs only - Especially if the app is supposed to be launched from an app container such as Fiori Launchpad (FLP) which skips loading index.html altogether.



回答2:


The bootstrapping (data-sap-ui-libs) is done in the index.html. It only needs to contain the libs which are referenced in the index.html.

If your code looks like this:

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

Then you should require the following libs:

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

If your code looks like this:

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");
});

You don't need to require anything (but it may affect loading time of your app).


All libraries that are used in the views should be required in the manifest.json. So if you use sap.m in your app you should require it in your manifest.json, even if you've already required it in the index.html.

This is because the Component.js and the manifest.json are the default entry points for an app and the index.html ist just a wrapper for standalone apps outside of a Fiori Launchpad.




回答3:


I would kept them declared on the manifest.

By declaring them on your .html file under the data-sap-ui-libs, you are basically requiring those dependencies right after the UI5 lib is loaded - even before your component is loaded.

By declaring them on your manifest, you are declaring the dependencies for your own component. So, those dependencies are only loaded before the initialization of your component.

As the component should be isolated, you component should not expect to be always used in a standalone mode.



来源:https://stackoverflow.com/questions/55952720/how-to-treat-bootstraps-data-sap-ui-libs-vs-manifests-sap-ui5-dependencies-lib

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!