1

OpenUI5 documentation suggests starting work by using a library loaded from CDN:

<script id="sap-ui-bootstrap"
    type="text/javascript"
    src="https://openui5.hana.ondemand.com/1.42.6/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_belize"
    data-sap-ui-libs="sap.m,sap.ui.table"></script>

Unfortunately, this approach means load cascading 4 scripts on startup:

  • sap-ui-core.js
  • sap/ui/core/library.js (why ?)
  • sap/m/library.js
  • sap/ui/table/library.js

Is there way to bundle this four libraries into one script file?

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Sławomir Osoba
  • 11
  • 1
  • UI5 is not a simple library like jQuery but a complex framework. Putting all in one file would mean a single file with a size of probably 100 MB or more. This is why controls (e.g. Buttons, Tables, Layouts) are divided into individual libraries. The framework then loads these libraries depending on your needs. – Marc Sep 10 '19 at 10:48
  • What are you trying to achieve? In reality the browser will be loading more files as well as the above - some may be additional js files. Its not clear what your real concern is - most web pages load a significant number of files including scripts. Could you perhaps clarify further? – Bernard Sep 10 '19 at 12:56
  • Five necessary files: sap-ui-core.js, sap/ui/core/library-preload.js, sap/m/library-preload.js, sap/ui/table/library-preload.js and sap/ui/unified/library-preload.js have a size 1,28 MB not 100 MB. – Sławomir Osoba Sep 12 '19 at 06:11
  • @Bernard Im using webpack and my application has finally only one js and one css file. But OpenUI5 give me additionality 5 http requests. – Sławomir Osoba Sep 12 '19 at 06:51
  • Does the answer below help? Or what is missing? I could extend the answer if it's needed – Boghyon Hoffmann Feb 04 '21 at 10:13

1 Answers1

0

Unfortunately, this approach means load cascading multiple scripts on startup:

The cascading behavior is mostly due to missing an option that tells the framework to load UI5-libraries and other modules asynchronously. In order to fix it, please add the following attribute too:

data-sap-ui-async="true" // available since 1.58.2 --> Replaces preload="async" *
data-sap-ui-preload="async" // for 1.58.1 and below

* Prerequisite: Is Your Application Ready for Asynchronous Loading?

Is there way to bundle these four libraries into one script file?

Yes; with a self-contained build (e.g. ui5 build self-contained --all ), you can reduce the size of your application as well as number of requests by bundling the required modules into a single file sap-ui-custom.js

enter image description here

In the above screenshot, for example, sap-ui-custom.js contains only the required modules from sap.ui.core-, sap.m-, sap.ui.table-, and sap.ui.unified-library, in addition to application related resources such as the controllers, views, etc..

See openui5-sample-app and the UI5 tooling for official documentation.

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170