JavaScript
Explica cómo cargar módulos bajo demanda con import(), usar top-level await y evaluar su impacto sobre dependencias, errores y rendimiento inicial.
carga un módulo de forma dinámica y retorna una Promise con su namespace.
import()const module = await import("./feature.js");
module.initialize();const module = await import(
`./locales/${language}.js`,
);El host o bundler debe poder resolver los posibles archivos. Una expresión completamente abierta puede impedir análisis y empaquetado.
const {
default: createEditor,
supportedFormats,
} = await import("./editor.js");El valor retornado es el namespace del módulo.
Importar dinámicamente la misma identidad normalmente reutiliza la instancia evaluada.
const first = await import("./feature.js");
const second = await import("./feature.js");
first === second; // normalmente true para la misma identidadNo es una estrategia para reiniciar estado de módulo.
try {
const feature = await import("./optional.js");
feature.initialize();
} catch (cause) {
throw new FeatureLoadError(
"Optional feature could not be loaded",
{ cause },
);
}Puede fallar por resolución, red, parseo, evaluación o rechazo de top-level await.
Bundlers pueden convertir import dinámico en un chunk separado.
button.addEventListener("click", async () => {
const { openEditor } = await import("./editor.js");
openEditor();
});La división física depende de la herramienta. La sintaxis expresa una frontera de carga dinámica.
El navegador o bundler puede ofrecer mecanismos para anticipar la descarga. Cargar antes no cambia que la evaluación y API deban manejar fallos.
const response = await fetch("/config.json");
export const config = await response.json();Solo está disponible en módulos.
config.js espera
↓
service.js espera config.js
↓
main.js espera service.jsUna espera en un módulo profundo puede retrasar una parte grande del inicio.
let config;
export async function initializeConfig() {
config = await loadConfig();
}La aplicación controla cuándo comienza y puede manejar loading, retries y dependencia de forma visible.
Puede ser razonable para:
Evítalo para trabajo opcional, lento o con recovery complejo.
const data = await import("./data.json", {
with: { type: "json" },
});El soporte y los tipos de recurso dependen del host.
export async function createAnalytics(config) {
if (!config.enabled) {
return {
track() {},
};
}
const { createClient } = await import(
"./analytics-client.js"
);
return createClient(config);
}El código pesado solo se carga cuando la función está habilitada.
import() retorna una Promise con el namespace.¿Por qué top-level await dentro de un módulo de configuración puede retrasar módulos que no contienen await?
Porque los importadores no pueden completar su evaluación hasta que sus dependencias asíncronas terminen, y ese efecto se propaga por el grafo.
ESM y CommonJS distingue el estándar del lenguaje del sistema histórico de módulos de Node.js.