jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas HTML

Gratis Generador de etiquetas modulepreload

Genera etiquetas link modulepreload para modulos ES en Vite, Astro y sitios estáticos modernos.

Cargando herramienta...

Qué es Generador de etiquetas modulepreload?

Modulepreload es una precarga especializada para scripts de modulo ES. A diferencia de preload estandar, modulepreload comprende los grafos de dependencia de modulos. Se usa comunmente en la salida de Vite y Astro. Necesita el atributo crossorigin correcto para modulos de origenes cruzados.

Respuesta rápida

Use modulepreload para obtener, analizar y compilar especulativamente las dependencias de modulos ES antes de que se necesiten. Funciona como preload pero esta disenado especificamente para scripts de modulo JavaScript.

Last updated: 2026-05-25

Limitaciones

  • Modulepreload solo es efectivo para scripts de modulo ES (type='module'). No aplica a scripts clasicos.
  • La compatibilidad del navegador esta por detras del preload estandar. Firefox agrego soporte en 115+, Safari en 17.2+.
  • Modulepreload obtiene el modulo pero no lo ejecuta. La ejecucion aun ocurre cuando se encuentra la etiqueta del script del modulo.

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

Cómo usar esta herramienta

  1. Ingrese la ruta o URL del script del modulo.
  2. Elija si el modulo es del mismo origen o de origen cruzado.
  3. La herramienta agrega el atributo crossorigin correcto segun el tipo de origen seleccionado.
  4. Copie la etiqueta en el head de la pagina antes de otros scripts de modulo.

Para qué puedes usarla

  • Agregar modulepreload para un modulo de entrada JavaScript construido con Vite.
  • Precargar un fragmento de modulo ES compartido para transiciones de pagina mas rapidas.
  • Optimizar la carga de modulos en un sitio estatico construido con Astro o SvelteKit.

Casos de uso

Ejemplos prácticos

Ejemplo

Precarga de fragmento vendor de Vite

Un proyecto de Vite genera un fragmento vendor que usan multiples paginas. Modulepreload lo obtiene anticipadamente para que la navegacion entre paginas se sienta instantanea.

Ejemplo

Sitio Astro con modulos alojados en CDN

Un sitio estatico construido con Astro usa modulepreload para el script de entrada principal con crossorigin para alojamiento en CDN.

Errores comunes

  • Usar preload estandar en lugar de modulepreload para modulos ES.
  • Olvidar crossorigin en URLs de modulo de origen cruzado.
  • Agregar modulepreload para scripts que no son modulos.

Verificación

  1. Abra el panel Network de Chrome DevTools y verifique que los scripts de modulo obtenidos via modulepreload aparezcan temprano en la cascada.
  2. Revise el panel Coverage para confirmar que el modulo se esta utilizando y no se obtiene innecesariamente.

FAQ

Preguntas sobre Generador de etiquetas modulepreload

Puedo usar modulepreload para scripts que no son modulos?

No. Use preload estandar para scripts regulares. Modulepreload esta disenado especificamente para grafos de dependencia de modulos ES.

Que navegadores admiten modulepreload?

Chrome 66+, Edge 79+, Firefox 115+, Safari 17.2+. Es seguro como mejora progresiva.

Modulepreload funciona con import maps?

Si. Modulepreload resuelve especificadores desnudos a traves de import maps, igual que las importaciones de modulos ES. Los modulos precargados y su grafo de dependencias se obtienen y compilan anticipadamente, por lo que se ejecutan sin demora cuando se importan.

Cual es la diferencia entre modulepreload y preload regular para modulos ES?

Modulepreload esta disenado especificamente para grafos de dependencia de modulos ES. A diferencia de preload regular, no solo obtiene el modulo objetivo sino que tambien analiza su arbol de dependencias y obtiene todas las importaciones estaticas. Preload regular solo obtiene el recurso unico especificado.

Herramientas relacionadas

Más herramientas html

Prueba también

Prueba también