Frontend Academy · Lección

esbuild: velocidad y limitaciones

Use esbuild como bundler independiente y comprenda por qué es varios órdenes de magnitud más rápido que webpack, así como sus limitaciones actuales con plugins y tipos.

esbuild: velocidad y limitaciones es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 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.

¿Qué es esbuild?

esbuild es un empaquetador y minificador escrito en Go. Es entre 10 y 100 veces más rápido que los empaquetadores basados en JavaScript gracias al procesamiento multihilo nativo y a la ausencia de sobrecarga de inicio. Fue creado por Evan Wallace (Figma).

Pruebas de rendimiento

Al empaquetar el código fuente de React (aproximadamente 6 MB): esbuild tarda ~0,4 s, Webpack ~9 s, Rollup ~6 s y Parcel ~10 s. La velocidad se debe a Go (compilado), el procesamiento en paralelo, la ausencia de conversión del AST entre fases y una arquitectura sencilla.

Uso directo de esbuild

Instálelo y ejecútelo desde la CLI.

npm install -D esbuild

npx esbuild src/app.ts \
  --bundle \
  --outfile=dist/app.js \
  --minify \
  --sourcemap \
  --target=es2020 \
  --platform=browser

API programática

Úselo desde un script de compilación para tener más control.

// build.js
import { build } from 'esbuild';

await build({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outfile: 'dist/app.js',
  minify: true,
  sourcemap: true,
  target: ['es2020'],
  platform: 'browser',
  define: { 'process.env.NODE_ENV': '"production"' }
});

TypeScript sin tsc

esbuild elimina la sintaxis de TypeScript (convierte .ts en .js) mucho más rápido que tsc. NO comprueba los tipos; ejecute tsc --noEmit por separado para hacerlo.

# Strip types and bundle in one go:
npx esbuild src/index.ts --bundle --outfile=dist/index.js

# Type-check separately (slower, can run in parallel):
npx tsc --noEmit

Servidor de desarrollo con recarga en caliente

esbuild incluye un servidor de desarrollo integrado con modo de observación y HMR mediante la API de contexto.

import { context } from 'esbuild';

const ctx = await context({
  entryPoints: ['src/app.ts'],
  bundle: true,
  outdir: 'dist'
});

await ctx.watch();
await ctx.serve({ servedir: 'public', port: 8000 });

Arquitectura de plugins

esbuild admite plugins con dos hooks principales: onResolve (intercepta la resolución de módulos) y onLoad (proporciona el contenido de los módulos resueltos).

const myPlugin = {
  name: 'env',
  setup(build) {
    build.onResolve({ filter: /^env$/ }, () => ({ path: 'env', namespace: 'env-ns' }));
    build.onLoad({ filter: /.*/, namespace: 'env-ns' }, () => ({
      contents: JSON.stringify(process.env),
      loader: 'json'
    }));
  }
};

Cargadores

esbuild incluye cargadores integrados para: js, ts, jsx, tsx, json, css, text, base64, dataurl, file y binary. La compatibilidad con CSS se limita al empaquetado (sin módulos ni PostCSS); use un plugin u otra herramienta.

Limitaciones frente a Rollup/Vite

1) El ecosistema de plugins es más pequeño. 2) La canalización de CSS es mínima: no incluye CSS Modules, PostCSS ni preprocesadores de forma predeterminada. 3) No hay HMR para frameworks (frameworks como React/Vue necesitan HMR específico del framework). 4) No hay advertencias ni análisis del tree-shaking. 5) Es menos maduro para configuraciones SSR complejas.

Cuándo destaca esbuild

1) Empaquetado de bibliotecas (un único punto de entrada y sin framework). 2) Empaquetado para Lambda/Workers (inicio en frío mínimo). 3) Como subherramienta dentro de Vite/tsup (se usa internamente para transformar TypeScript). 4) Migración de tsc a una canalización de TypeScript más rápida.

esbuild dentro de otras herramientas

Vite usa esbuild para transformar TypeScript/JSX durante el desarrollo y para preempaquetar node_modules. tsup usa esbuild para empaquetar bibliotecas. Rollup tiene un plugin de esbuild. Muchas herramientas combinan la velocidad de esbuild con su propia experiencia de uso.

tsup — envoltorio de esbuild para bibliotecas

Para publicar bibliotecas npm, tsup envuelve esbuild con valores predeterminados razonables: genera CJS + ESM + .d.ts, observa los cambios durante el desarrollo y acepta una configuración sencilla.

# package.json
"scripts": { "build": "tsup src/index.ts --format esm,cjs --dts" }

Compromisos del tamaño del bundle

esbuild minifica rápidamente, pero su minificación es ligeramente menos agresiva que la de Terser. Ejecute Terser como paso posterior para obtener el resultado más pequeño posible si el tamaño importa más que la velocidad de compilación.

Comprobación rápida

esbuild puede sustituir a tsc para compilar TypeScript, pero ¿qué NO hace esbuild que sí hace tsc?

Repaso: esbuild

Empaquetador basado en Go, entre 10 y 100 veces más rápido que los empaquetadores de JS. CLI + API programática. Elimina la sintaxis de TS (no comprueba los tipos; ejecute tsc --noEmit). Hooks de plugins: onResolve + onLoad. Limitaciones: ecosistema de plugins reducido, canalización de CSS mínima y ausencia de HMR para frameworks. Ideal para: bibliotecas, Lambda/Workers y uso dentro de Vite/tsup. Use el envoltorio tsup para bibliotecas npm.

Preguntas frecuentes

¿La lección «esbuild: velocidad y limitaciones» es gratis?

Sí — el texto completo de «esbuild: velocidad y limitaciones» 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 «esbuild: velocidad y limitaciones»?

Use esbuild como bundler independiente y comprenda por qué es varios órdenes de magnitud más rápido que webpack, así como sus limitaciones actuales con plugins y tipos. 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 2 de 4.

¿Cuánto tiempo toma la lección «esbuild: velocidad y limitaciones»?

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

← Volver a Frontend Academy