Frontend Academy · Lección

Módulos ES: import export y dynamic import

Use exportaciones con nombre, exportaciones predeterminadas e importaciones de espacio de nombres, y cargue código de forma diferida con dynamic import() para mejorar el rendimiento.

Módulos ES: import export y dynamic import es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Repaso: conceptos básicos de ES Modules

ES Modules proporciona a cada archivo su propio ámbito. Las exportaciones con nombre comparten valores específicos; las exportaciones predeterminadas comparten el valor principal. El empaquetador o el navegador resuelve las importaciones durante la carga.

// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }

// Default export
export default class ApiClient {
  constructor(base = API_BASE) { this.base = base; }
}

Tree shaking — Por qué importan las exportaciones con nombre

Los empaquetadores (Rollup, esbuild, Vite) eliminan las exportaciones que no se usan. Si importa solo { formatDate }, el empaquetador elimina todo lo demás del paquete. Las exportaciones con nombre permiten el tree shaking; import * as utils puede impedirlo.

// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunk

import() dinámico — Carga diferida

El import() dinámico devuelve una Promise. El módulo solo se obtiene cuando se ejecuta el código. Los empaquetadores dividen estas importaciones automáticamente en fragmentos independientes.

// Only load the heavy charting library when needed:
const showChart = async () => {
  const { Chart } = await import('./Chart.js');
  new Chart(canvas, config);
};

btn.addEventListener('click', showChart);

import dinámico con manejo de errores

Envuelva las importaciones dinámicas en try/catch para gestionar correctamente los fallos de red o los módulos que faltan.

try {
  const module = await import('./optional-feature.js');
  module.activate();
} catch (err) {
  console.warn('Optional feature unavailable:', err.message);
}

import.meta

import.meta contiene metadatos sobre el módulo actual. Propiedades principales: import.meta.url (URL absoluta), import.meta.env (variables de entorno de Vite), import.meta.resolve().

// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;

// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;

Ejecución del módulo — Una sola vez

Los módulos ES se evalúan una sola vez, independientemente de cuántas veces se importen. Todas las importaciones del mismo módulo comparten la misma instancia. Esto hace que los módulos sean ideales para singletons (almacenes de estado, buses de eventos).

// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;

// Any file that imports from store.js gets the same state instance

Dependencias circulares

Dos módulos pueden importarse mutuamente. JavaScript gestiona esta situación, pero los valores pueden ser undefined en el primer uso debido al orden de evaluación. En la mayoría de los casos, reorganice el código para evitar los ciclos.

Importaciones de solo tipo en TypeScript

Use import type { ... } para importar únicamente tipos. Estas importaciones se eliminan durante la compilación y nunca aparecen en el paquete de salida. Úselas para evitar dependencias circulares causadas por referencias que solo usan tipos.

import type { User } from './types.js';

function greet(user: User): string {
  return `Hello, ${user.name}`;
}

Reexportaciones y archivos barrel

Un archivo barrel reexporta elementos de varios módulos y crea un único punto de importación práctico. Tenga cuidado con los archivos barrel en aplicaciones grandes: pueden dificultar el tree shaking.

// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';

// Consumer:
import { Button, Input } from '@/components';

Script type=module en el navegador

Añada type="module" a una etiqueta script para habilitar directamente la sintaxis de módulos ES en el navegador, sin un empaquetador. Los módulos se aplazan de forma predeterminada y tienen su propio ámbito.

<script type="module">
  import { greet } from './utils.js';
  greet('World');
</script>

Interoperabilidad entre CommonJS y ESM

Node.js admite ambos formatos. Los archivos ESM usan .mjs o establecen "type": "module" en package.json. Al consumir paquetes CommonJS desde ESM, la exportación predeterminada es el valor de module.exports. Los empaquetadores gestionan esta diferencia de forma transparente.

Comprobación rápida

¿Cuál es la principal ventaja de rendimiento de usar exportaciones con nombre en lugar de un único objeto de exportación predeterminada?

Repaso: ES Modules a fondo

Los módulos se ejecutan una sola vez; todos los importadores comparten la misma instancia. El tree shaking elimina las exportaciones con nombre que no se usan. import() dinámico permite la carga diferida y la división del código. import.meta proporciona el contexto del módulo. Los archivos barrel son prácticos, pero pueden perjudicar el tree shaking. Las importaciones de solo tipo en TypeScript no generan código de salida.

Preguntas frecuentes

¿La lección «Módulos ES: import export y dynamic import» es gratis?

Sí — el texto completo de «Módulos ES: import export y dynamic import» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Módulos ES: import export y dynamic import»?

Use exportaciones con nombre, exportaciones predeterminadas e importaciones de espacio de nombres, y cargue código de forma diferida con dynamic import() para mejorar el rendimiento. Practicas Frontend 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 Frontend Academy?

No se requiere experiencia previa. Frontend 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 1 de 4.

¿Cuánto tiempo toma la lección «Módulos ES: import export y dynamic import»?

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 Frontend Academy?

Sí. Cada lección de Frontend 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

Módulos ES: import export y dynamic import
npm y package.json: dependencias y scripts
Vite: servidor de desarrollo y build
Conceptos de bundling: tree shaking y code splitting

← Volver a Frontend Academy