import() dinámico y top-level await

El import estático es rígido a propósito: todo se conoce antes de ejecutar. Pero a veces necesitas cargar código según lo que ocurra en runtime. Ahí entran dos piezas: import() dinámico, que trae un módulo bajo demanda devolviendo una promesa, y el top-level await, que deja a un módulo esperar en su nivel superior sin envolverse en una función async.

import() como operador, no como función

import() parece una llamada a función, pero es un operador sintáctico del lenguaje. Devuelve una promesa que resuelve al objeto de namespace del módulo (lo mismo que daría import * as). Acepta un especificador calculado en runtime y funciona tanto en ESM como en CommonJS:

// esperar el módulo bajo demanda
const { render } = await import("./editor.ts");
render();

// o encadenando la promesa
import("./editor.ts").then((m) => m.render());

El objeto que resuelve la promesa es el namespace del módulo: sus propiedades son las exportaciones, incluida default si la hay. Por eso, para un módulo con export por defecto, se escribe (await import("./x.ts")).default — un detalle que sorprende la primera vez.

Cuando el bundler ve un import() con un literal de cadena, lo trata como un punto de corte: separa ese módulo en un chunk propio que se descarga solo cuando la promesa se ejecuta. Eso es code splitting, y es el mecanismo detrás del lazy loading por ruta y por componente.

Como devuelve una promesa, import() también te da manejo de errores de carga —imposible con el import estático, que aborta el módulo entero si la resolución falla—:

try {
  const mod = await import("./editor.ts");
  mod.render();
} catch (e) {
  mostrarFallback();   // la red falló: degrada con gracia
}

Las dos formas de importar cubren necesidades opuestas y coexisten en el mismo archivo:

Casos de uso reales

Los frameworks envuelven este mecanismo en APIs ergonómicas: React.lazy(() => import("./Panel.tsx")) o el defineAsyncComponent de Vue no son más que import() con un envoltorio que gestiona el estado de carga. Astro va más lejos con sus directivas client:*, que deciden en tiempo de build qué islas se hidratan con un import() diferido y cuáles no envían JavaScript alguno.

Top-level await: esperar en el nivel superior

Antes, todo await debía vivir dentro de una función async. El top-level await (TLA) permite usarlo directamente en el cuerpo de un módulo ESM:

// config.ts
const respuesta = await fetch("/config.json");
export const config = await respuesta.json();

Un uso legítimo y frecuente en 2026 es inicializar un módulo WebAssembly antes de exportar su API, de modo que quien lo importe reciba algo ya listo para usar:

// hash.ts
const wasm = await WebAssembly.instantiateStreaming(fetch("/hash.wasm"));
export const hash = wasm.instance.exports.hash;

El efecto es profundo: cualquier módulo que use TLA se vuelve asíncrono, y todos los que lo importen esperan a que termine su evaluación antes de ejecutar la suya. La espera se propaga hacia arriba por el grafo:

flowchart TD
A[config.ts con await] --> B[servicio.ts que lo importa]
B --> C[main.ts raiz]
A -->|bloquea la evaluacion| B
B -->|propaga la espera| C
style A fill:#f9e2af,color:#11111b
style B fill:#89b4fa,color:#11111b
style C fill:#a6e3a1,color:#11111b

El coste: cascadas en el grafo

El TLA es potente pero tiene un peligro: si un módulo profundo del árbol espera, puede retrasar la evaluación de todo lo que dependa de él, creando una cascada (waterfall). El motor evalúa en paralelo las ramas independientes, pero una dependencia lineal con TLA serializa el arranque. La regla práctica: reserva el TLA para la raíz o para inicializaciones genuinamente asíncronas (conexiones, config remota, WASM), no para cualquier módulo intermedio.

Conviene distinguir dos ejes que se confunden a menudo: import() difiere qué código se carga y cuándo; el top-level await difiere cuándo termina de evaluarse un módulo ya cargado. Uno actúa sobre el grafo de dependencias, el otro sobre el orden temporal de evaluación. Combinarlos —cargar con import() un módulo que a su vez usa TLA— es válido: la promesa de import() simplemente no resuelve hasta que el TLA interno acaba.

El precio del code splitting es una petición de red extra en el momento de la carga. Para ocultar esa latencia, los frameworks emiten una etiqueta link rel=modulepreload o hacen prefetch del chunk en cuanto el usuario muestra intención (hover sobre un enlace, viewport cercano), de modo que el módulo ya esté en caché cuando la promesa se ejecute.