Skip to Content

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

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.

async-1.png (22.2 kB)
async-2.png (30.4 kB)
Add a comment
10|10000 characters needed characters exceeded

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

  • 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);
         }
      });
    });
  • Did the answer below help?

Related questions

2 Answers

  • Posted on May 12 at 11:08 AM

    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:


    async-3.png (42.0 kB)
    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on May 12 at 08:33 PM

    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.

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.