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. :-)
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.
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_horizon"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
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.108.4",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.table": {},
"sap.ui.unified": {}
}
},
"models": {
"": {
"dataSource": "myODataSource",
"settings": {
"preliminaryContext": true,
"tokenHandling": false
},
"preload": true
}
},
"...": "..."
},
"...": "..."
}
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 already a bit faster when the libs are removed from data-sap-ui-libs. In general, try different approaches and do performance measurements, in addition to documented performance guidelines, and regardless of what people say (including me).
data-sap-ui-libs only if:
Component.js at all.sap.ui.core are accessed before creating the component (E.g. instantiating sap.m.Shell as a shell for the ComponentContainer)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 SAP Fiori launchpad (FLP) which skips loading index.html altogether.See also What happens if a library preload file / library dependencies is not updated in the UI5-manifest?
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.
