Loading apps from esm.sh is very slow

[karimsa]

Looks like esm.sh does not use edge caching, but rather relies on client-side caching. Not doing so is really slowing down app loads from esm.sh.

For example: my-ext in the example project builds in 200ms, but when it imports a sass file (and therefore the sass library from esm.sh), it takes about 4s.

[ije]

For example: my-ext in the example project builds in 200ms, but when it imports a sass file (and therefore the sass library from esm.sh), it takes about 4s.
esm.sh does use edge cache actually. can you please share the link i can check? thanks

[karimsa]

Hey, @ije! Thanks for the comment.

The specific issue we are facing is for invalid files / loading TS. When loading TS/TSX off your CDN, they don't seem to get transpiled, so all the imports are still relative. To get around this, we implement our own node resolution algorithm to resolve the imports. However, esm.sh specifically asks for 404s (or I guess it is throwing a 500 for some reason) to not be cached, even for immutable URLs:

$ curl -iL --head https://esm.sh/react/foobar

HTTP/2 302 
date: Fri, 17 Mar 2023 07:08:47 GMT
location: https://esm.sh/react@18.2.0/foobar
access-control-allow-origin: *
cache-control: public, max-age=600
vary: Origin
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=TC4ngQH2qpYQ5d9KcUcwJS7316cU6PlowNjeSzjCtRr0i8tXvKWWhVGSQs0E5YhtoTRBoZujlWdoSd7a%2FWydPfPRoapSnoFiwt%2B5jQII5TYgrpsP5%2FjBfR%2F0abjBIka1fvdQLJU%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 7a93681a9d18a20e-YYZ
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400

HTTP/2 500 
date: Fri, 17 Mar 2023 07:08:47 GMT
content-type: application/javascript; charset=utf-8
content-length: 354
cf-ray: 7a93681b6e9ca20e-YYZ
cache-control: private, no-store, no-cache, must-revalidate
vary: Origin
cf-cache-status: DYNAMIC
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=DByGZb3Ip9GBwII9SKv2q8k8kElYBETtcrzjZ9ZanURLyqHZfMpfGEbsOAZ6smT49DCyEZrmOzOuNtcjBgKhVSONomayRNzH8TvBbFkqCCgWjWQacmQNQbKX8ZgKxy9zX9oFOy4%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
alt-svc: h3=":443"; ma=86400, h3-29=":443"; ma=86400

From my understanding, this should be safe to cache at the edge since react v18.0.2 did not have a file called 'foobar', and package releases are immutable.

Of course native transpilation of TS & TSX from esm.sh would also fix this - but I understand that JSX might be out of scope for your project.

[ije]

I see. there is a plan to add support for ts/jsx transpiler