search

lhapaipai / symfony-vite-dev

Monorepo for symfony-vite development
https://symfony-vite.pentatrion.com
Other
19 stars 19 forks source link

Use modulepreload when adding Link header for module scripts #22

Closed andyexeter closed 1 month ago

andyexeter commented 3 months ago

This is a bit of a change to the work done in #16.

After reading https://web.dev/articles/modulepreload#why_doesnt_link_relpreload_work_for_modules I realised we don't need to add the crossorigin attribute, we can just use modulepreload instead of preload and let the browser take care of anything CORS related.

This also fixes an issue with dependency scripts with rel=modulepreload added here:

https://github.com/lhapaipai/symfony-vite-dev/blob/39b2bc83ee03f477dd4135e4fb7de7bf2e88fb3e/src/vite-bundle/src/Service/EntrypointRenderer.php#L260

These dependency scripts have rel=modulepreload but no type=module, so the work done in #16 wasn't adding the crossorigin attribute for these.

I didn't want to commit this directly to main, I'd like your review first please @lhapaipai

netlify[bot] commented 3 months ago

Deploy Preview for cosmic-bubblegum-aa631a canceled.

Name Link
Latest commit 3baf03ce6eafbc6fafa2603bf2b07d575ad62190
Latest deploy log https://app.netlify.com/sites/cosmic-bubblegum-aa631a/deploys/662f717cdb11f30008fdb9af
andyexeter commented 2 months ago

@lhapaipai thanks for your review.

It looks like preload: link-tag only adds Javascript dependencies as link rel="modulepreload", rather than all styles and scripts as preload: link-header does.

For example, with preload: link-header I get this Link headed in my responses:

Link: </build/assets/vue-DwW5BF1l.js>; rel="modulepreload"; as="script",</build/assets/app-DBI_OpU3.js>; rel="modulepreload"; as="script",</build/assets/app-BMIoN6mP.css>; rel="preload"; as="style"

But when I use link-tag, I just get the following:

<link rel="stylesheet" href="/build/assets/app-BMIoN6mP.css">
<link rel="modulepreload" href="/build/assets/vue-DwW5BF1l.js">
<script type="module" src="/build/assets/app-DBI_OpU3.js"></script>

So it doesn't seem to have any effect on the main app-DBI_OpU3.js script - we do not preload this in anyway.

Based on this, I am not sure what you are asking me to change with regard to link-tag configurations?

I have added the crossorigin attribute back in to Link headers as this can still be necessary (for use-credentials for example).