jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis Modulepreload Tag Generator

Genereer modulepreload link tags voor ES modules in Vite, Astro en moderne statische sites.

Tool laden...

Wat is Modulepreload Tag Generator?

Modulepreload is een gespecialiseerde preload voor ES-modulescripts. Het begrijpt module-afhankelijkheidsgrafieken en is gebruikelijk in Vite- en Astro-uitvoer.

Snel antwoord

Gebruik modulepreload om ES-module-afhankelijkheden speculatief op te halen, te parsen en te compileren voordat ze nodig zijn. Specifiek voor JavaScript-modulescripts.

Last updated: 2026-05-25

Beperkingen

  • Alleen voor ES-modulescripts (type="module").
  • Browserondersteuning loopt achter op standaard preload.
  • Haalt module op maar voert niet uit. Uitvoering gebeurt bij de scripttag.

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

Zo gebruik je deze tool

  1. Voer het module-scriptpad of de URL in.
  2. Kies same-origin of cross-origin.
  3. De tool voegt het juiste crossorigin-attribuut toe.
  4. Kopieer de tag in de paginakop.

Waarvoor je het kunt gebruiken

  • Modulepreload voor een Vite JavaScript-entrymodule.
  • Preload een gedeelde ES-module chunk voor snelle navigatie.
  • Optimaliseer moduleladen in Astro of SvelteKit.

Gebruik

Praktische voorbeelden

Voorbeeld

Vite vendor chunk

Een Vite-project produceert een vendor chunk. Modulepreload haalt deze vroeg op voor directe navigatie.

Voorbeeld

Astro CDN-modules

Een Astro-site gebruikt modulepreload voor het hoofdscript met crossorigin voor CDN.

Veelgemaakte fouten

  • Standaard preload gebruiken voor ES-modules.
  • Crossorigin vergeten bij cross-origin URLs.
  • Modulepreload toevoegen voor niet-modulescripts.

Verificatie

  1. Controleer of modulescripts vroeg in de waterfall verschijnen in DevTools.
  2. Controleer het Dekkingspaneel of de module wordt gebruikt.

FAQ

Vragen over Modulepreload Tag Generator

Modulepreload voor niet-modulescripts?

Nee. Gebruik standaard preload voor gewone scripts.

Welke browsers ondersteunen modulepreload?

Chrome 66+, Edge 79+, Firefox 115+, Safari 17.2+.

Werkt modulepreload met import maps?

Ja. Modulepreload lost bare specifiers via import maps op.

Verschil met reguliere preload?

Modulepreload parseert de afhankelijkheidsboom en haalt alle statische imports op, niet alleen de enkele resource.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook