Open karimsa opened 1 year ago
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
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.
I see. there is a plan to add support for ts/jsx transpiler
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 fromesm.sh
.For example:
my-ext
in theexample
project builds in 200ms, but when it imports a sass file (and therefore the sass library from esm.sh), it takes about 4s.