Checking in on CDNs... #9487

Quafadas · 2024-07-15T11:12:03Z

Quafadas
Jul 15, 2024

Hi SAP community,

I just wanted to check in and see if this blogpost is still the "state-of-the-art" in respect of serving out of a CDN;
https://community.sap.com/t5/technology-blogs-by-sap/getting-started-with-ui5-web-components-in-2021/ba-p/13514144?

As it's a little old now.

I decided that I did want to try and load SAP webcomponents out of a CDN directly in browser, and found I could go quite far, seemingly quite simply specifying the import I wanted;

import * as Title from "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/Title.js";

And then giving the browser an import map.

    <script type="importmap">
      {
        "imports": {
          "@ui5/webcomponents-localization/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
          "@ui5/webcomponents/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
          "@ui5/webcomponents-theming/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
          "@ui5/webcomponents-icons/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
          "@ui5/webcomponents-base/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
          "@sap-theming/": "https://cdn.jsdelivr.net/npm/@[email protected]/",
          "@types/openui5/": "https://cdn.jsdelivr.net/npm/@types/[email protected]/",
          "@types/jquery/": "https://cdn.jsdelivr.net/npm/@types/jquery/",
          "lit-html": "https://cdn.jsdelivr.net/npm/lit-html",
          "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html/"
        }
      }
    </script>

There are things I like about this approach, as I'm an increasing fan of CDNs. As far as I can tell, it actually works quite well, until one hits localisation. As soon as I try and include a DatePicker for example, my bootleg strategy falls apart;

with the bottom two errors being the relevant ones. I'm not 100% clear what's happening,I guess ESModules don't like loading JSON. My quesions are then;

Is this localisation problem something I could work around myself via an import map or preload?
Is it still essentially the case that "don't use a CDN" is the prevailing advice?
Are there any plans to ... change number 2 :-)?

If I was "determined" to avoid the use of a bundler ... then ... I'd have to use a bundler anyway (!) to "vendor" the dependancy, then I could serve the dep myself without the bundler in the toolchain?

This is to some extent a curiosity question; I've seen some webcomponent libraries make very effective use of CDNs so wanted to check in on it here - not wildly important... but would be cool.

pskelin · 2024-07-18T07:30:19Z

pskelin
Jul 18, 2024
Maintainer

Hi @Quafadas
I have a working solution for you further down, but first on the CDN vs bundle question - it all boils down to performance in the end.

Main reason - performance

I used your example with import maps from CDN, importing the DatePicker only results in 288 separate requests. While they are fast (20-30 ms each), transitive imports get discovered only when a file is processed. So the last imported file (uniqueSort.js) starts downloading at 368 ms after the page load. This means you import DatePicker, it downloads fast, some new imports are discovered, they download fast, more imports are discovered, and so on until the last import is discovered by the client at 368 ms after starting. The bundler is doing this transitive dependency resolution at build time, so it knows all files that are included.

For comparison, I download a bundle from this project:
https://github.com/ui5-community/ui5-webcomponents-bundle/
https://ui5-community.github.io/ui5-webcomponents-bundle/assets/bundle.esm-c6e32f57.js
see actual file here if hash changes:
https://ui5-community.github.io/ui5-webcomponents-bundle/assets/bundle.esm.js

It downloads for ~100 ms which is faster because it has only one request, it contains all components (roughly 7x bigger download than the DatePicker CDN one). So I imagine if I add all imports in the CDN case it will become much much worse than the bundle.

This is the main reason we recommend a bundler is used for our project - the sheer amount of modules means it will always be slower than a bundle.

Second reason - configuration-less

As you will see from the workaround below, the framework needs to know where the static assets are. The only way to make this work without a configuration is to ship the framework code with imports and let the bundler copy the assets and write correct urls

We ship an import like this:

case "ar": return (await import("../assets/cldr/ar.json")).default;

The bundler will copy the JSON file in the output folder and rewrite the import like this:

case "ar": return (await import("./ar-ac153a33.js")).default;

For the CDN case, the correct url will be:

case "ar": return (await (await fetch("https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ar.json")).json());

As you see, we can't put the jsdelivr.net part in our code, neither the @1.24.7. This has to come from the app and needs to be an additional configuration step. We had this in the beginning (a function that the app can set a path and the the framework reads it), but this makes the framework harder to use (you have to pass a configuration before other imports) and it is only needed for a case we don't recommend for performance reasons anyway. Using a bundler solves both problems anyway.

A way forward would be to use the dynamic json imports when they are supported by all browsers (currently firefox does not support it) and all bundlers (currently vitejs bundler fails with these imports as it makes a JS file but the browser expects a JSON)

// future when supported eveywhere
case "ar": return (await import("../assets/cldr/ar.json", { with: { type: "json"} })).default;

Workaround

And now a working example if you really want to make a productive app (all kinds of assets) via CDN, which I believe will be slower than a bundle when you get a realistic number of imports

<!DOCTYPE html>
<html>

<head>
    <script type="importmap">
        {
            "imports": {
                "@ui5/webcomponents-localization/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
                "@ui5/webcomponents/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
                "@ui5/webcomponents-theming/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
                "@ui5/webcomponents-icons/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
                "@ui5/webcomponents-base/": "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/",
                "@sap-theming/": "https://cdn.jsdelivr.net/npm/@[email protected]/",
                "@types/openui5/": "https://cdn.jsdelivr.net/npm/@types/[email protected]/",
                "@types/jquery/": "https://cdn.jsdelivr.net/npm/@types/jquery/",
                "lit-html": "https://cdn.jsdelivr.net/npm/lit-html",
                "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html/"
            }
        }
  </script>
</head>

<body class="button1auto">
    <script type="module">
        // @ts-nocheck
import { registerLocaleDataLoader } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
const availableLocales = ["ar", "ar_EG", "ar_SA", "bg", "ca", "cnr", "cs", "da", "de", "de_AT", "de_CH", "el", "el_CY", "en", "en_AU", "en_GB", "en_HK", "en_IE", "en_IN", "en_NZ", "en_PG", "en_SG", "en_ZA", "es", "es_AR", "es_BO", "es_CL", "es_CO", "es_MX", "es_PE", "es_UY", "es_VE", "et", "fa", "fi", "fr", "fr_BE", "fr_CA", "fr_CH", "fr_LU", "he", "hi", "hr", "hu", "id", "it", "it_CH", "ja", "kk", "ko", "lt", "lv", "ms", "mk", "nb", "nl", "nl_BE", "pl", "pt", "pt_PT", "ro", "ru", "ru_UA", "sk", "sl", "sr", "sr_Latn", "sv", "th", "tr", "uk", "vi", "zh_CN", "zh_HK", "zh_SG", "zh_TW"];
const importCldrJson = async (localeId) => {
    switch (localeId) {
        case "ar": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ar" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ar.json")).json());
        case "ar_EG": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ar_EG" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ar_EG.json")).json());
        case "ar_SA": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ar_SA" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ar_SA.json")).json());
        case "bg": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-bg" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/bg.json")).json());
        case "ca": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ca" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ca.json")).json());
        case "cnr": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-cnr" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/cnr.json")).json());
        case "cs": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-cs" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/cs.json")).json());
        case "da": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-da" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/da.json")).json());
        case "de": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-de" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/de.json")).json());
        case "de_AT": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-de_AT" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/de_AT.json")).json());
        case "de_CH": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-de_CH" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/de_CH.json")).json());
        case "el": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-el" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/el.json")).json());
        case "el_CY": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-el_CY" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/el_CY.json")).json());
        case "en": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en.json")).json());
        case "en_AU": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en_AU" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en_AU.json")).json());
        case "en_GB": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en_GB" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en_GB.json")).json());
        case "en_HK": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en_HK" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en_HK.json")).json());
        case "en_IE": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en_IE" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en_IE.json")).json());
        case "en_IN": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en_IN" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en_IN.json")).json());
        case "en_NZ": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en_NZ" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en_NZ.json")).json());
        case "en_PG": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en_PG" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en_PG.json")).json());
        case "en_SG": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en_SG" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en_SG.json")).json());
        case "en_ZA": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-en_ZA" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/en_ZA.json")).json());
        case "es": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-es" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/es.json")).json());
        case "es_AR": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-es_AR" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/es_AR.json")).json());
        case "es_BO": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-es_BO" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/es_BO.json")).json());
        case "es_CL": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-es_CL" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/es_CL.json")).json());
        case "es_CO": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-es_CO" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/es_CO.json")).json());
        case "es_MX": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-es_MX" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/es_MX.json")).json());
        case "es_PE": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-es_PE" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/es_PE.json")).json());
        case "es_UY": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-es_UY" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/es_UY.json")).json());
        case "es_VE": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-es_VE" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/es_VE.json")).json());
        case "et": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-et" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/et.json")).json());
        case "fa": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-fa" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/fa.json")).json());
        case "fi": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-fi" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/fi.json")).json());
        case "fr": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-fr" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/fr.json")).json());
        case "fr_BE": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-fr_BE" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/fr_BE.json")).json());
        case "fr_CA": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-fr_CA" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/fr_CA.json")).json());
        case "fr_CH": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-fr_CH" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/fr_CH.json")).json());
        case "fr_LU": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-fr_LU" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/fr_LU.json")).json());
        case "he": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-he" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/he.json")).json());
        case "hi": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-hi" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/hi.json")).json());
        case "hr": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-hr" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/hr.json")).json());
        case "hu": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-hu" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/hu.json")).json());
        case "id": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-id" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/id.json")).json());
        case "it": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-it" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/it.json")).json());
        case "it_CH": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-it_CH" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/it_CH.json")).json());
        case "ja": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ja" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ja.json")).json());
        case "kk": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-kk" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/kk.json")).json());
        case "ko": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ko" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ko.json")).json());
        case "lt": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-lt" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/lt.json")).json());
        case "lv": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-lv" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/lv.json")).json());
        case "ms": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ms" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ms.json")).json());
        case "mk": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-mk" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/mk.json")).json());
        case "nb": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-nb" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/nb.json")).json());
        case "nl": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-nl" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/nl.json")).json());
        case "nl_BE": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-nl_BE" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/nl_BE.json")).json());
        case "pl": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-pl" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/pl.json")).json());
        case "pt": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-pt" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/pt.json")).json());
        case "pt_PT": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-pt_PT" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/pt_PT.json")).json());
        case "ro": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ro" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ro.json")).json());
        case "ru": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ru" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ru.json")).json());
        case "ru_UA": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-ru_UA" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/ru_UA.json")).json());
        case "sk": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-sk" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/sk.json")).json());
        case "sl": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-sl" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/sl.json")).json());
        case "sr": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-sr" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/sr.json")).json());
        case "sr_Latn": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-sr_Latn" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/sr_Latn.json")).json());
        case "sv": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-sv" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/sv.json")).json());
        case "th": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-th" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/th.json")).json());
        case "tr": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-tr" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/tr.json")).json());
        case "uk": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-uk" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/uk.json")).json());
        case "vi": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-vi" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/vi.json")).json());
        case "zh_CN": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-zh_CN" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/zh_CN.json")).json());
        case "zh_HK": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-zh_HK" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/zh_HK.json")).json());
        case "zh_SG": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-zh_SG" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/zh_SG.json")).json());
        case "zh_TW": return (await (await fetch(/* webpackChunkName: "ui5-webcomponents-cldr-zh_TW" */ "https://cdn.jsdelivr.net/npm/@ui5/[email protected]/dist/generated/assets/cldr/zh_TW.json")).json());
        default: throw "unknown locale";
    }
};

const importAndCheck = async (localeId) => {
    const data = await importCldrJson(localeId);
    if (typeof data === "string" && data.endsWith(".json")) {
        throw new Error(`[LocaleData] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the "Assets" documentation for more information.`);
    }
    return data;
};
availableLocales.forEach(localeId => registerLocaleDataLoader(localeId, importAndCheck));
//# sourceMappingURL=LocaleData.js.map
    </script>
    <script type="module">
        import "@ui5/webcomponents/dist/DatePicker.js";
    </script>
    <ui5-button>can focus</ui5-button>
    <ui5-date-picker></ui5-date-picker>
</body>

</html>

Final remark

You would have to do this for all kinds of assets (themes, i18n) and for all packages (main, fiori)

The recommendation still remains - use a bundler for productive usage, and use CDN for a quick prototype without a bundler. The bundler barrier is really low these days and the performance benefit is a must.

Edit: the community project I referenced above is a mix: it is a bundle and hosted on CDN
https://github.com/ui5-community/ui5-webcomponents-bundle/

There is still a problem with it - you get all components in the bundle and you app surely uses less, but at least you don't have to specify an import map and it is easier to use. Still its purpose is for a snippet-like code sharing or quick prototype rather than productive usage and there are no versions here, just 1.24

4 replies

Quafadas Jul 18, 2024
Author

So firstly : wow. This is an utterly next level answer and very much appreciated. Thankyou 🙏 .

Your answer presents the implied challenges very clearly - I certainly respect them and would submit to the recommendations.

I used your example with import maps from CDN, importing the DatePicker only results in 288 separate requests. While they are fast (20-30 ms each), transitive imports get discovered only when a file is processed. So the last imported file (uniqueSort.js) starts downloading at 368 ms after the page load.

This is a point of great interest for me. I agree that this is case on "first load". However, my understanding (I could be wrong), is that if the version requested is pinned, for example to @1.24.7, the CDN pulls a quite spectacular trick; it sends a bunch of headers that tells the browser "this artifact is immutable, don't contact me about this again. Ever."

The second time you load the page, I believe the browser respects that and loads the entire UI5 module graph straight out of memory. In the network tools, I see these 288 requests - but second time - it looks like they are fake requests - they all take 0ms (memory cache) and the browser actually never even bothers issuing a fetch to the CDN.

... I'm sort of noodling around with this to see where it takes me - the hypthesis is that this "advantage" (it's hard to compete with 0!) may persist user-side. To be clear, this is a hypothesis I'm testing - I'm not asking you too :-)... It is a horrid thing to be insatiably curious!

The recommendation still remains - use a bundler for productive usage, and use CDN for a quick prototype without a bundler. The bundler barrier is really low these days and the performance benefit is a must.

Understood. Thankyou 🙏 .

Edit: the community project I referenced above is a mix: it is a bundle and hosted on CDN
https://github.com/ui5-community/ui5-webcomponents-bundle/

I'll check this out :-), thanks for the pointer.

A way forward would be to use the dynamic json imports when they are supported by all browsers (currently firefox does not support it) and all bundlers (currently vitejs bundler fails with these imports as it makes a JS file but the browser expects a JSON)

This sounds really cool - although I guess it might take some time for those projects to move 😆 ... I shan't hold my breath, but is there a ticket I could watch, just in case?

Quafadas Jul 18, 2024
Author

P.S I checked your workaround and it really works. Pretty amazing stuff.

pskelin Aug 7, 2024
Maintainer

Hi @Quafadas
thanks for the nice words :)

Your point about cached files taking 0ms made me recheck an old finding we had - the browser spins up a separate JS context for each script that it loads, even from cache. We had made measurements, where loading the same amount of code in one bundle vs 500 separate modules, the modules case was more than 1 second slower exactly because the browser has CPU and memory overhead per module (something like 20-30ms adding up to more than a second)

I couldn't find the original issue we reported to Google Chrome, but made a new measurement, and to my surprise, a bundle vs hundreds of modules give the exactly same lighthouse performance score.

What is more, the individual modules case (CDN case) had a much faster initial paint. Probably when modules are loaded individually, the browser can render one of them much faster while loading the rest instead of waiting till the whole bundle is processed.

In any case, this will be highly variable depending on number of modules loaded, the CDN location and the DOM generated by the application. It is best if applications test before deciding bundle vs. CDN. But there is no reason to forbid the CDN use case, so we have made a second entry point that can be used to load assets when using CDN.

You can check this PR for details: #9651
In a nutshell, assets can be loaded in two ways and it is up to developers to choose which one they want:

// [existing] works with bundlers only, uses dynamic import and points to a JSON in the source
import "@ui5/webcomponents/dist/Assets.js"
// [new] works with CDN and bundlers, uses fetch and import.meta.url
import "@ui5/webcomponents/dist/Assets-fetch.js"

Thanks for poking around, I hope this enhancement makes the framework better to use.

Quafadas Aug 7, 2024
Author

Wow - that’s really cool!

I think the pr could have been a mislink - I found this one on a quick inspection of the repo though.

#9591

I shall be excited to try it out when I get the chance 😻.

Also - thank you for being willing to re check the assumption. It is to your credit - I think not everyone would have done that 🙏.

Quafadas · 2024-08-23T09:52:32Z

Quafadas
Aug 23, 2024
Author

@pskelin I'm excitedly taking 2.2.0-rc.2 for a spin, and I want to check expectations.

From what I can tell, the CDN case works - I see no browser errors when using Assets-fetch.js, which is awesome.
The "bundler" case continues to work with Assets.js.

My final test was that I was hoping that the bundler case, would also work, with Assets-fetch.js, - which is how I read your comment above. With Assets-fetch I think the bundler works for assets which aren't dependant on localisation, but gives errors for those which do.

Concretely, here's my simple app.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
  </head>
  <body>
    <script type="module">
      import "@ui5/webcomponents/dist/Assets-fetch.js";
      import "@ui5/webcomponents/dist/Button.js";
      import "@ui5/webcomponents/dist/DatePicker.js";
    </script>
    <div id="app">
      <ui5-button>can focus</ui5-button>
      <ui5-date-picker></ui5-date-picker>
    </div>
  </body>
</html>

And here's the package.json import.

  "dependencies": {
    "@ui5/webcomponents": "2.2.0-rc.2"
  }

I see this in the browser console.

The Button loads fine, but the DatePicker not. If I switch the import to Assets.js I see the DatePicker renders, and console is clean. In the first instance, I'd like to check whether my expectation here is correct?

Secondly, could it be that I'm missing an import?

If I haven't messed up somehow, and the expectation is correct, then I would register an issue and a little repro?

6 replies

Quafadas Aug 26, 2024
Author

Hmmm, I used vite. It sounds like I've mucked something up. I'll have another look and publish the (trivial) project in the next hours if I can't figure it out.

Quafadas Aug 26, 2024
Author

https://github.com/Quafadas/my-vite-project

pskelin Aug 26, 2024
Maintainer

now I see the difference - I tried the build and serving the dist folder everything works, whereas you are running the dev command and it breaks.

I managed to reproduce this, and to me it looks like a vitejs bug - the files are resolved to URLs such as

http://localhost:5174/node_modules/.vite/assets/i18n/messagebundle_en_GB.json

but the dev server treats this as an application URL and returns the HTML page of the application, so the json content fails to be parsed.

I managed to get it working by adding the following vite.config.js file

export default {
  optimizeDeps: {
    exclude: ['@ui5/webcomponents'],
  },
};

I'll open a bug in the vitejs repo as this should work the same for build and dev

pskelin Aug 26, 2024
Maintainer

vitejs/vite#17949

I have used your repository as a reproduction, could you please leave it like this without any additional fixes?

Quafadas Aug 26, 2024
Author

Of course 🙏. Thankyou so much again.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checking in on CDNs... #9487

{{title}}

Replies: 2 comments 10 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Checking in on CDNs... #9487

Quafadas Jul 15, 2024

Replies: 2 comments · 10 replies

pskelin Jul 18, 2024 Maintainer

Main reason - performance

Second reason - configuration-less

Workaround

Final remark

Quafadas Jul 18, 2024 Author

Quafadas Jul 18, 2024 Author

pskelin Aug 7, 2024 Maintainer

Quafadas Aug 7, 2024 Author

Quafadas Aug 23, 2024 Author

Quafadas Aug 26, 2024 Author

Quafadas Aug 26, 2024 Author

pskelin Aug 26, 2024 Maintainer

pskelin Aug 26, 2024 Maintainer

Quafadas Aug 26, 2024 Author

Quafadas
Jul 15, 2024

Replies: 2 comments 10 replies

pskelin
Jul 18, 2024
Maintainer

Quafadas Jul 18, 2024
Author

Quafadas Jul 18, 2024
Author

pskelin Aug 7, 2024
Maintainer

Quafadas Aug 7, 2024
Author

Quafadas
Aug 23, 2024
Author

Quafadas Aug 26, 2024
Author

Quafadas Aug 26, 2024
Author

pskelin Aug 26, 2024
Maintainer

pskelin Aug 26, 2024
Maintainer

Quafadas Aug 26, 2024
Author