Imports Dinámicos

Carga módulos bajo demanda con lazy loading.

Imports Dinámicos

Permiten cargar módulos en tiempo de ejecución, mejorando el rendimiento.

typescript

// Import estático (se carga siempre)
import { sumar } from "./matematicas";

// Import dinámico (se carga bajo demanda)
const modulo = await import("./matematicas");
modulo.sumar(1, 2);

Lazy loading

typescript

// Cargar componente solo cuando se necesita
async function cargarPagina(pagina: string) {
  const modulo = await import(`./paginas/${pagina}`);
  modulo.render();
}

// Uso
cargarPagina("inicio");

Condicional

typescript

if (needsAdvancedFeature) {
  const { AdvancedFeature } = await import("./advanced");
  AdvancedFeature.init();
}

En React

typescript

import { lazy, Suspense } from "react";

const Dashboard = lazy(() => import("./Dashboard"));

function App() {
  return (
    <Suspense fallback={<div>Cargando...</div>}>
      <Dashboard />
    </Suspense>
  );
}

Webpack code splitting

typescript

// Crea chunks separados automáticamente
const modulo = await import(
  /* webpackChunkName: "math" */
  "./matematicas"
);

Ejercicio pratico

Usa import dinámico para cargar un módulo solo cuando se llama la función.

exercise.ts

Resultado

Haz clic en "Ejecutar" para ver el resultado...

Declaraciones Ambient (d.ts)

Resolución de Módulos