jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

Free Modulepreload Tag Generator

Build rel='modulepreload' link tags with the correct crossorigin attribute. Designed for modern JavaScript module workflows in Vite, Astro, SvelteKit, and vanilla ES module projects.

Loading tool...

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.

quickAnswer

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.

Last updated: 2026-05-25

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.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Enter the module script path or URL.
  2. Choose whether the module is same-origin or cross-origin.
  3. The tool adds the correct crossorigin attribute for the selected origin type.
  4. 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.

Use cases

Practical examples

example

Vite vendor chunk preloading

A Vite project outputs a vendor chunk that multiple pages use. Modulepreload fetches it early so navigation between pages feels instant.

example

Astro site with CDN-hosted modules

A static site built with Astro uses modulepreload for the main entry script with crossorigin for CDN hosting.

Common mistakes

  • Using standard preload instead of modulepreload for ES modules.
  • Forgetting crossorigin on cross-origin module URLs.
  • Adding modulepreload for non-module scripts.

verification

  1. Open Chrome DevTools Network panel and verify module scripts fetched via modulepreload appear early in the waterfall.
  2. Check the Coverage panel to confirm the module is being used and not fetched unnecessarily.

FAQ

Questions about Modulepreload Tag Generator

Can I use modulepreload for non-module scripts?

No. Use standard preload for regular scripts. Modulepreload is specifically designed for ES module dependency graphs.

Which browsers support modulepreload?

Chrome 66+, Edge 79+, Firefox 115+, Safari 17.2+. It is safe as a progressive enhancement.

Does modulepreload work with import maps?

Yes. Modulepreload resolves bare specifiers through import maps just like ES module imports do. If you preload a module that uses bare specifiers, the browser follows the import map to resolve dependencies. Preloaded modules and their dependency graph are fetched and compiled ahead of time, so they execute without delay when imported.

What is the difference between modulepreload and regular preload for ES modules?

Modulepreload is specifically designed for ES module dependency graphs. Unlike regular preload, it not only fetches the target module but also parses its dependency tree and fetches all static imports. Regular preload only fetches the single specified resource. Use modulepreload for JavaScript modules and regular preload for other resource types like fonts, images, and non-module CSS.

Related tools

More html tools

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool

Also try

Also try

Seo

AI Crawler robots.txt Builder

Build a robots.txt policy for AI crawlers. Choose from open, selective, or strict presets and block specific AI training bots while allowing search engines.

Open tool