CSS files are not bundled for self-contained build (multiple CSS files are loaded for each library)

[kristian]

Expected Behavior

One CSS file for the whole self-contained build should be loaded, based on the theme selected.

Current Behavior

Multiple CSS files (per library) are loaded separately by the browser, causing some performance degragation.

Steps to reproduce the issue

1. Build & serve the sample app self-contained
2. Check network trace to see, that more than one CSS file is loaded

Context

• OS/Platform: Windows
• Node.js Version: 10.11.0
• npm Version: 6.4.1
• Browser (if relevant): Chrome Dev.
• Other information: Tested on 1.59.0

Affected components

• ui5-builder
• ui5-server
• ui5-cli
• ui5-fs
• ui5-project
• ui5-logger

[BenReim]

CSS bundling might not only be helpful in terms of performance, but also in regards to enabling caching mechanisms.

Currently its seems as that there is no straight-forward way of caching and invalidating resources files with a self-contained build. With a self-contained build, the core resource files can not be invalidated using a cachebuster concept as it was formally possible when UI5 Core resources were being loaded from a CDN.

If the tooling would allow to produce CSS bundles, a hash or version could be attached to the file name sap-ui-custom.x234dff.css and on-demand updating of invalide CSS resources files would be possible.

[ddsultan]

@kristian, thanks for sharing first of all.

@RandomByte, is this problem also relevant for ui5 theme CSS files when built with self-contained flag?

[RandomByte]

@ddsultan from my understanding Kristian is referring to exactly those files. I.e. the library.css files of the respective theme of all libraries used by the application. For example: https://ui5.sap.com/resources/sap/m/themes/sap_belize/library.css

Which CSS files are you referring to exactly?

[kristian]

I reported this issue two years ago, but as I am referring specifically to applications, so I think I referred to the theming CSS files when multiple libraries are in use. @RandomByte you might can think about parsing the sap-ui-libraryPreloadCss prameter from index.html and if no app managed preload is used (no leading !), you can merge the theme libraries in the order they appear. If you are interested, look into my gulpfile.js and you should find code, which you likely be able to copy literally 1:1! 🙂 Hope this helps!