What is Modulepreload Tag Generator?
Modulepreload is a specialized preload for ES module scripts. Unlike standard preload, modulepreload understands module dependency graphs. It is commonly used in Vite and Astro output. It needs the correct crossorigin attribute for cross-origin modules.
Quick answer
Use modulepreload to speculatively fetch, parse, and compile ES module dependencies before they are needed. It works like preload but is designed specifically for JavaScript module scripts.
Limitations
- modulepreload is only effective for ES module scripts (type='module'). It does not apply to classic scripts.
- Browser support lags behind standard preload. Firefox added support in 115+, Safari in 17.2+.
- modulepreload fetches the module but does not execute it. Execution still happens when the module script tag is encountered.
How to use this tool
- Enter the module script path or URL.
- Choose whether the module is same-origin or cross-origin.
- The tool adds the correct crossorigin attribute for the selected origin type.
- Copy the tag into the page head before other module scripts.
What you can use it for
- Add modulepreload for a Vite-built JavaScript entry module.
- Preload a shared ES module chunk for faster page transitions.
- Optimize module loading on a static site built with Astro or SvelteKit.