add preload tag to css files

[pwang-esri]

Expected behavior

load main.css using preload <link rel="preload" href="style.css" as="style"> instead of <link rel="stylesheet" href="style.css">

this will also get rid of the lighthouse waring:

[andygup]

Good suggestion, if there's a way to make it the default with an option to use old style script loading might be better. preload is not supported in IE11 or in Firefox by default and both are currently supported browsers for the 4.x JS API.

[tomwayson]

@pwang-esri

I am not opposed to this, but I want to understand your use case better.

I looked into this a while ago, but I came to the conclusion that adding rel="preload" is not helpful if you are using esri-loader to lazy load the CSS (i.e. loadModules(['esri/Map'], { css: true });. This is because the CSS is not loaded until immediately before the map needs to be rendered.

So are you premtively calling loadCss() once the page has rendered in order to pre-load the CSS?

[tomwayson]

I wonder if we should be providing a way to use rel="preload" for the the script too, like this: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content#Scripting_and_preloads

[pwang-esri]

@tomwayson Now we are loading css before we load the map. But it would be nice if we can call loadCss once the page is rendered to preload css.

[oevans]

Any update on this one?

[tomwayson]

I'm not actively working on this. I'm not even totally sure what the ask is. Could you provide more detail about exactly what this means?

Now we are loading css before we load the map.

Ideally show the code.

And then propose the new esri-loader API you'd like to see that would achieve the same (or equivalent) output.

[andygup]

Closing since this package is scheduled for deprecation at 4.29.