search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.47k stars 254 forks source link

[UI5]: sap.ui.webc.main and sap.ui.webc.common: Multiple resources loaded one-by-one instead of preloaded #8020

Closed swendlandt closed 1 month ago

swendlandt commented 6 months ago

Bug Description

This issue is reproducible if the sap.ui.web.main or sap.ui.webc.common are included as preloaded libraries.

For example go to the example https://ui5.sap.com/#/entity/sap.ui.webc.main.List/sample/sap.ui.webc.main.sample.ListBasic and load the page with Chrome Dev Tools Network Tab enabled.

There are multiple files from the "/thirdparty" folder loaded one-by-one. They should be part of the library-preload for performance reasons. Some are even loaded 3 times with different versions. Examples: https://ui5.sap.com/resources/sap/ui/webc/common/thirdparty/theming/generated/themes/sap_fiori_3/parameters-bundle.css.js

https://ui5.sap.com/resources/sap/ui/webc/main/thirdparty/generated/themes/sap_fiori_3/parameters-bundle.css.js

https://ui5.sap.com/resources/sap/ui/webc/common/thirdparty/icons/decline.js

https://ui5.sap.com/resources/sap/ui/webc/common/thirdparty/icons/v4/decline.js

https://ui5.sap.com/resources/sap/ui/webc/common/thirdparty/icons/v5/decline.js

Affected Component

No response

Expected Behaviour

JS resources should be part of the library-preload

Isolated Example

https://ui5.sap.com/#/entity/sap.ui.webc.main.List/sample/sap.ui.webc.main.sample.ListBasic

Steps to Reproduce

  1. Open https://ui5.sap.com/#/entity/sap.ui.webc.main.List/sample/sap.ui.webc.main.sample.ListBasic
  2. Load and page and check network requests

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.20.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Organization

SAP

Declaration

vladitasev commented 6 months ago

Hi @swendlandt

The bundling philosophy is different for the "sap.ui.webc.*" libraries, compared to the classic (non-web-components-based) libraries such as sap.m

  1. Optional assets (themes, languages, illustrations) etc. are never bundled for the "sap.ui.webc.main" and "sap.ui.webc.fiori" libraries, so it's normal to see these as individual requests.

  2. Icons have special rules due to the nature of their implementation in UI5 Web Components, respectively OpenUI5 integration.

Here are the rules for the "sap.ui.webc.common" package where the icons are:

        sections:
          - mode: preload
            filters:
              - "sap/ui/webc/common/"
              - "sap/ui/webc/common/**/manifest.json"
              - "!sap/ui/webc/common/.library"
              - "!sap/ui/webc/common/*-preload.js"
              - "!sap/ui/webc/common/designtime/"
              - "!sap/ui/webc/common/**/*.designtime.js"
              - "!sap/ui/webc/common/**/*.support.js"
              - "!sap/ui/webc/common/thirdparty/icons/**/*.js"
              - "sap/ui/webc/common/thirdparty/icons/AllIcons.js"
              - "sap/ui/webc/common/thirdparty/icons/Assets.js"
              - "sap/ui/webc/common/thirdparty/icons/generated/**/*.js"
              - "!sap/ui/webc/common/thirdparty/icons/generated/assets/i18n/*.js"
              - "sap/ui/webc/common/thirdparty/icons/json-imports/**/*.js"
              - "!sap/ui/webc/common/thirdparty/icons-tnt/**/*.js"
              - "sap/ui/webc/common/thirdparty/icons-tnt/AllIcons.js"
              - "sap/ui/webc/common/thirdparty/icons-tnt/Assets.js"
              - "sap/ui/webc/common/thirdparty/icons-tnt/generated/**/*.js"
              - "!sap/ui/webc/common/thirdparty/icons-tnt/generated/assets/i18n/*.js"
              - "sap/ui/webc/common/thirdparty/icons-tnt/json-imports/**/*.js"
              - "!sap/ui/webc/common/thirdparty/icons-business-suite/**/*.js"
              - "sap/ui/webc/common/thirdparty/icons-business-suite/AllIcons.js"
              - "sap/ui/webc/common/thirdparty/icons-business-suite/Assets.js"
              - "sap/ui/webc/common/thirdparty/icons-business-suite/generated/**/*.js"
              - "!sap/ui/webc/common/thirdparty/icons-business-suite/generated/assets/i18n/*.js"
              - "sap/ui/webc/common/thirdparty/icons-business-suite/json-imports/**/*.js"
              - "!sap/ui/webc/common/thirdparty/theming/generated/themes/**/parameters-bundle.css.js"
              - "!sap/ui/webc/common/thirdparty/theming/generated/assets/**/*.js"

As you can see, this rule: - "!sap/ui/webc/common/thirdparty/icons/**/*.js" explicitly excludes individual icons from being bundled (since the ".json.js" containing all icons is: "sap/ui/webc/common/thirdparty/icons/AllIcons.js"). As an unfortunate side effect, web components that import individual icons (such as the ones you've seen) cause these individual network requests. In the future we might scan the code, determine which icons are used by the components internally, and adapt the filter rules to specifically include these, but this would be a very minimal optimization nonetheless, so we haven't spent much time on it.

I'd like to also ask whether you're using these libraries productively, or you just noticed the network requests by chance? These are still "experimental", but if you're interested in them, we'd like to find out more about your use case and how we can support you

Regards, Vladi

swendlandt commented 6 months ago

Hi @vladitasev,

you can also reproduce individual request when accessing https://emea.cockpit.btp.cloud.sap/cockpit. Then I saw that this is also reproducable with the UI5 sample.

Do you have a recommendation how we should handle this at the moment? Should we import AllIcons.js or should we leave it as is?

Best regards Simon

vladitasev commented 1 month ago

Closing as the sap.ui.webc.* libraries are now officially deprecated as of the latest OpenUI5 release.