cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Async preload of libraries described in manifest file of the Component.

evgeny_turovsky
Participant

on ‎05-12-2020 8:23 AM

0 Kudos

Hi experts!

During researching of the SAP UI5 bootstrap process, there are two parameters for asynchronous loading process:

data-sap-ui-async=true / false
data-sap-ui-preload="auto / async / sync"

So, data-sap-ui-preload="async" parameter as I understood, can activate async preload only for libraries which declared in

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

And it's OK. In DevTools I see this async preload. ui5loader-dbg uses it's async function "loadJSResourceAsync".

If I set data-sap-ui-async=true parameter, this parameter does the same as data-sap-ui-preload="async" parameter for bootstrap libs, but it works for other modules as well.

So, my bootstrap uses data-sap-ui-async=true parameter.

I expected that libriaries from manifest-file of my Component should loading asynchronously but no..

manifest.json has, for example, four libs which I want to preload, but in DevTools I see Sync loading..

...
"sap.ui5": {
 "dependencies": {
   "minUI5Version": "1.30.00",
   "libs": {
     "sap.tnt": {},
     "sap.gantt": {},
     "sap.fileviewer": {},
     "sap.ndc": {}
   }
 }

Look at this picture

And the ui5loader-dbg uses it sync function as well: requireSync.

What am I missing?

Best regards, Evgeny T.

Show replies
Show replies
boghyon
Product and Topic Expert
Product and Topic Expert
‎05-12-2020 4:21 PM
0 Kudos

Could you share the whole index.html? With which UI5 version was the app launched? Generally, it would be nice if the question could contain an mcve so that readers can reproduce the issue.

evgeny_turovsky
Participant
‎05-12-2020 6:50 PM
0 Kudos

App was launched with the 1.77.2 version.

Below is the code which was without async loading of libraries which was declared in manifest.json of Component.js.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>        

  </head>
  <body class="sapUiBody sapUiSizeCompact" id="content">
    <div id="content"></div>
  </body>

  <script type="text/javascript">
    function compLoad() {
      new sap.ui.core.ComponentContainer({
          name: "InitTest",
          settings : {
            id : "initTest"
          }
        }).placeAt("content");
    }
  </script>
  <script id="sap-ui-bootstrap"
          type="text/javascript"
          src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
          data-sap-ui-resourceRoots='{"InitTest": "./"}'
          data-sap-ui-theme="sap_fiori_3"
          data-sap-ui-onInit="compLoad"
          data-sap-ui-libs="sap.m"
          data-sap-ui-async=true>
  </script>
</html>

manifest.json

{
  "sap.app": {
    "id": "InitTest",
    "type": "application",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },

  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.30.00",
      "libs": {
        "sap.tnt": {},
        "sap.gantt": {}
      }
    },
    "rootView": {
      "viewName": "InitTest.view.Main",
      "type": "XML",
      "async": true,
      "id": "app"
    }
  }
}

Component.js

sap.ui.define([
  "sap/ui/core/UIComponent"
], function (UIComponent) {
  "use strict";
  return UIComponent.extend("InitTest.Component", {
     metadata : {
      manifest: "json"
     },
     init : function () {
        UIComponent.prototype.init.apply(this, arguments);
     }
  });
});
boghyon
Product and Topic Expert
Product and Topic Expert
‎05-21-2020 12:49 PM
0 Kudos

Did the answer below help?

Answer

Accepted Solutions (0)

Answers (2)

Answers (2)

boghyon
Product and Topic Expert
Product and Topic Expert
‎05-12-2020 9:33 PM
0 Kudos

When instantiating the ComponentContainer manually, its constructor option "manifest" needs to have either a truthy value or the path of it (e.g. "somewhere/manifest.json"). According to the API reference:

> To activate a fully asynchronous loading behavior of components and their dependencies, [...] the manifest property needs to be set to a 'truthy' value, e.g. true or a URL to the manifest location.

In your case, it was undefined which led to synchronous requests.

Anyhow; since version 1.58, the module sap/ui/core/ComponentSupport can be used instead, which allows creating a ComponentContainer without an inline-script and with predefined settings, enabling CSP support, manifest first, and asynchronous approach. Sample: https://embed.plnkr.co/16J1TFICxbqETCzaxuZ0

For more information, check the API reference.

___

PS: you might want to remove data-sap-ui-libs="sap.m" if the app is component based. See data-sap-ui-libs vs manifest's dependencies.libs.

Show replies
Show replies
evgeny_turovsky
Participant
‎05-12-2020 12:08 PM
0 Kudos

I could load libraries of Component asynchronously only so:

I added in ComponentContainer constructor parameter manifest: "./manifest.json" 

<script type="text/javascript">
 function compLoad() {
   new sap.ui.core.ComponentContainer({
     name: "InitTest",
     settings : {
       id : "initTestBlabla"
     },
     manifest: "./manifest.json"
   }).placeAt("content");
 }
 </script>
 <script id="sap-ui-bootstrap"
         type="text/javascript"
         src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
         data-sap-ui-theme="sap_fiori_3"
         data-sap-ui-onInit="compLoad"
         data-sap-ui-libs="sap.m,sap.tnt"
         data-sap-ui-async=true>
 </script>

As a result, manifest.json of the Component was loaded before Component.js and all of libriaries from manifest.json was loaded asynchroniously:

Show replies
Show replies
Ask a Question