Sugerencias de recursos: modulepreload
Precargue módulos ES para iniciar JavaScript más rápidamente
Sugerencias de recursos: modulepreload es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Por qué existe modulepreload
Los módulos ES forman un grafo de dependencias: un módulo de entrada importa otros, que a su vez importan más. Sin ayuda, cada nivel del árbol solo se descubre después de analizar el nivel anterior, lo que produce una cascada secuencial que perjudica enormemente el rendimiento de carga.
Qué hace modulepreload
<link rel="modulepreload" href="/app.js"> indica al navegador que obtenga inmediatamente el módulo Y los módulos importados transitivamente, en paralelo. Cuando se ejecuta <script type="module">, todo el grafo ya está en la caché.
Comparación con preload
preload también obtiene archivos en paralelo, pero desconoce las instrucciones de importación: precargar un archivo de módulo no precarga sus dependencias. modulepreload sigue las importaciones automáticamente, que es precisamente su finalidad.
<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>Dónde colocarlo
En el <head>, lo antes posible. El navegador inicia inmediatamente la solicitud de precarga y continúa analizando el HTML. Cuando encuentra más adelante el <script type="module"> correspondiente en el documento, el archivo ya está en memoria.
Descubrimiento y recorrido del grafo
El navegador analiza el módulo precargado en busca de instrucciones import y, a continuación, realiza solicitudes paralelas para cada URL importada, de forma recursiva. El usuario asume el coste de un viaje de ida y vuelta por nivel, pero obtiene paralelismo dentro de cada nivel, lo que acorta drásticamente la ruta crítica.
Uso con bundlers
Los bundlers modernos (Vite, Rollup, Webpack 5+) generan automáticamente etiquetas modulepreload para los fragmentos separados mediante división de código. En aplicaciones creadas manualmente, genérelas a partir del grafo de importaciones durante la compilación para que la lista siga siendo precisa a medida que se añadan o eliminen módulos.
Consideraciones sobre CrossOrigin
Para las precargas de módulos de origen cruzado, incluya crossorigin="anonymous". Esto coincide con el modo de obtención predeterminado de <script type="module">, lo que garantiza que se reutilice la copia precargada en lugar de volver a solicitarla sin cabeceras CORS.
Compatibilidad con navegadores
modulepreload es compatible con Chrome/Edge/Safari y con las versiones recientes de Firefox. En las versiones antiguas de Firefox se ignora silenciosamente: los módulos siguen funcionando, pero sin el beneficio de la precarga. No se necesita ningún polyfill; en el peor de los casos, la carga será ligeramente más lenta en navegadores obsoletos.
Limitar el tamaño del grafo
Precargar cientos de módulos desperdicia ancho de banda en código que quizá el usuario nunca ejecute. Precargue solo los fragmentos de entrada de nivel de ruta, no los que se cargan de forma diferida en niveles profundos. Confíe en prefetch (o en la importación bajo demanda) para las rutas de código que se utilizan rara vez.
Combinar con otras sugerencias
Para imágenes y fuentes en el mismo head, combínelas sin problema: preconnect para las CDN de terceros, preload para las fuentes críticas, modulepreload para los módulos de entrada y prefetch para los recursos de la página siguiente. Estas sugerencias no interfieren entre sí.
Verificación
Compruebe el panel de red: con modulepreload, las importaciones de segundo nivel aparecen como solicitudes paralelas que comienzan casi al mismo tiempo que la entrada. Sin él, aparecen escalonadas y cada solicitud comienza solo después de que el elemento padre haya terminado de analizarse.
Comprobación de conocimientos
¿Qué hace modulepreload que no hace un preload normal del mismo archivo de módulo?
Resumen
modulepreload elimina la cascada de módulos ES al obtener el módulo de entrada y sus importaciones en paralelo antes de la ejecución. Colóquelo al principio de <head>, genérelo a partir del grafo de compilación, establezca crossorigin para los módulos de origen cruzado y limite su alcance a los puntos de entrada de las rutas para evitar desperdiciar ancho de banda.
Preguntas frecuentes
¿La lección «Sugerencias de recursos: modulepreload» es gratis?
Sí — el texto completo de «Sugerencias de recursos: modulepreload» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Sugerencias de recursos: modulepreload»?
Precargue módulos ES para iniciar JavaScript más rápidamente Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Sugerencias de recursos: modulepreload»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Los atributos async y defer
- Preload, prefetch y preconnect
- Carga diferida de imágenes: loading=lazy
- Sugerencias de recursos: modulepreload