Importación dinámica import() en módulos
Cargue módulos bajo demanda con import() dinámico
Importación dinámica import() en módulos es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 3 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.
La expresión import()
A diferencia de la declaración estática import, import("./module.js") es una expresión que devuelve una Promise que se resuelve en el espacio de nombres del módulo. Funciona en cualquier lugar: dentro de funciones, condiciones e incluso scripts que no sean módulos.
División de código
La importación dinámica es el mecanismo principal para dividir el código. Un controlador de rutas puede posponer la carga del código de una ruta hasta que el usuario navegue a ella: const mod = await import("./routes/admin.js"). Los bytes de la ruta no se descargan hasta que se necesitan.
document.getElementById("settings-btn").addEventListener("click", async () => {
const { renderSettings } = await import("./settings.js");
renderSettings();
});Espacio de nombres del módulo devuelto
El valor resuelto es el espacio de nombres del módulo: un objeto cuyas propiedades son las exportaciones del módulo. Puede desestructurar las exportaciones con nombre en línea o acceder a la exportación predeterminada mediante module.default.
Captura de errores
Como import() devuelve una promesa, los errores de una solicitud fallida o de un error de sintaxis se propagan a .catch(). Envuelva las importaciones dinámicas en try/catch (en funciones asíncronas) o en .catch() para gestionar correctamente los fallos de red.
try {
const mod = await import("./optional.js");
mod.run();
} catch (e) {
console.warn("Optional module failed", e);
}Carga condicional
Cargue los polyfills solo en navegadores antiguos: if (!window.IntersectionObserver) await import("intersection-observer-polyfill"). Los navegadores modernos omiten por completo esos bytes; los navegadores antiguos solo asumen ese coste cuando es necesario.
Resolución de especificadores
El especificador sigue las mismas reglas que una importación estática: URL relativas, URL absolutas o nombres simples asignados mediante un mapa de importaciones. También funcionan las cadenas dinámicas: import(`./locales/${lang}.js`), aunque los empaquetadores pueden tener dificultades para dividir este código.
Almacenamiento en caché
Cada especificador único se resuelve en la misma instancia de módulo. La segunda llamada a import("./mod.js") devuelve el módulo ya cargado sin realizar otra solicitud de red, por lo que es seguro utilizar la importación dinámica en controladores de eventos sin preocuparse por descargas repetidas.
Importación dinámica en el nivel superior
Dentro de un módulo, puede utilizar await en el nivel superior con una importación dinámica para retrasar la ejecución hasta que esté disponible un componente auxiliar cargado de forma asíncrona. Resulta útil para sistemas de plugins en los que la lista de plugins se conoce durante la ejecución.
// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();Uso con React.lazy y Preact
React.lazy, `lazy` de preact/compat de Preact y defineAsyncComponent de Vue envuelven la importación dinámica para dividir el código por componentes. La primitiva del navegador es import(); los frameworks añaden encima límites de carga similares a Suspense.
División con Webpack y Vite
Los empaquetadores detectan import("...") en el código fuente y generan un fragmento separado para el módulo importado. El código auxiliar del entorno de ejecución obtiene el fragmento en la primera llamada. El autor escribe una importación import() conforme a la especificación de ES; el empaquetador produce la coordinación de las solicitudes de red.
Error común
Llamar a import("X") dentro de una ruta de ejecución frecuente (por ejemplo, dentro de un bucle de renderizado) vuelve a comprobar la caché en cada llamada. Aunque no vuelve a descargar el módulo, la búsqueda tiene un coste. Después de la primera importación, almacene el espacio de nombres resuelto en una variable.
Comprobación de conocimientos
¿Qué devuelve import("./mod.js")?
Resumen
La importación dinámica import() es la alternativa bajo demanda a la declaración de importación estática. Devuelve una Promise que se resuelve en el espacio de nombres del módulo, lo que permite dividir el código, cargar polyfills de forma condicional y crear sistemas de plugins. Los módulos se almacenan en caché después de la primera importación, por lo que las llamadas posteriores no tienen coste de red. Los empaquetadores generan fragmentos separados para cada llamada de importación dinámica.
Preguntas frecuentes
¿La lección «Importación dinámica import() en módulos» es gratis?
Sí — el texto completo de «Importación dinámica import() en módulos» 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 «Importación dinámica import() en módulos»?
Cargue módulos bajo demanda con import() dinámico 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 3 de 4.
¿Cuánto tiempo toma la lección «Importación dinámica import() en módulos»?
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
- Scripts de módulos ES: type=module
- Mapas de importación: importmap
- Importación dinámica import() en módulos
- Conceptos básicos de Module Federation