search

SAP / ui5-tooling

An open and modular toolchain to develop state of the art applications based on the UI5 framework
https://sap.github.io/ui5-tooling
Apache License 2.0
465 stars 69 forks source link

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

Open kristian opened 5 years ago

kristian commented 5 years ago

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

BenReim commented 4 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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!