Frontend Academy · Lektion

esbuild: Geschwindigkeit und Einschränkungen

Verwenden Sie esbuild als eigenständigen Bundler und verstehen Sie, warum es um Größenordnungen schneller als webpack ist, sowie seine aktuellen Einschränkungen bei Plugins und Typen.

Lektion 2 von 415 Schritte

esbuild: Geschwindigkeit und Einschränkungen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist esbuild?

esbuild ist ein in Go geschriebener Bundler und Minifier. Dank nativer Multithread-Verarbeitung und ohne Startaufwand ist es 10- bis 100-mal schneller als JavaScript-basierte Bundler. Erstellt von Evan Wallace (Figma).

Geschwindigkeits-Benchmarks

Beim Bundling des React-Quellcodes (etwa 6 MB): esbuild ~0,4 s, Webpack ~9 s, Rollup ~6 s, Parcel ~10 s. Die Geschwindigkeit ergibt sich aus: Go (kompiliert), Parallelisierung, keiner AST-Konvertierung zwischen den Verarbeitungsschritten und einer einfachen Architektur.

esbuild direkt verwenden

Installieren und führen Sie es über die CLI aus.

npm install -D esbuild

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

Programmgesteuerte API

Verwenden Sie es in einem Build-Skript, um mehr Kontrolle zu erhalten.

// 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 ohne tsc

esbuild entfernt die TypeScript-Syntax (und wandelt .ts in .js um) deutlich schneller als tsc. Es führt KEINE Typprüfung durch — führen Sie dafür separat tsc --noEmit aus.

# 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

Dev-Server mit Hot Reload

esbuild verfügt über einen integrierten Dev-Server mit Watch-Modus und HMR über die Context-API.

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 });

Plugin-Architektur

esbuild unterstützt Plugins mit zwei wichtigen Hooks: onResolve (greift in die Modulauflösung ein) und onLoad (stellt den Inhalt aufgelöster Module bereit).

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'
    }));
  }
};

Loader

esbuild verfügt über integrierte Loader für: js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary. Die CSS-Unterstützung ist auf das Bundling beschränkt (keine Module, kein PostCSS) — verwenden Sie ein Plugin oder ein anderes Tool.

Einschränkungen gegenüber Rollup/Vite

1) Das Plugin-Ökosystem ist kleiner. 2) Die CSS-Pipeline ist minimal — keine CSS Modules, kein PostCSS und standardmäßig keine Präprozessoren. 3) Kein HMR für Frameworks (Frameworks wie React/Vue benötigen framework-spezifisches HMR). 4) Keine Warnungen oder Analysen zum Tree-Shaking. 5) Weniger ausgereift für komplexe SSR-Setups.

Wann esbuild besonders überzeugt

1) Bundling von Bibliotheken (ein Einstiegspunkt, kein Framework). 2) Packaging für Lambda/Worker (minimaler Kaltstart). 3) Unter-Tool in Vite/tsup (wird im Hintergrund für die TypeScript-Transformation verwendet). 4) Migration von tsc zu einer schnelleren TypeScript-Pipeline.

esbuild in anderen Tools

Vite verwendet esbuild für die Transformation von TypeScript/JSX während der Entwicklung und für das Pre-Bundling von node_modules. tsup verwendet esbuild für das Bundling von Bibliotheken. Rollup verfügt über ein esbuild-Plugin. Viele Tools kombinieren die Geschwindigkeit von esbuild mit ihrer eigenen Benutzererfahrung.

tsup — esbuild-Wrapper für Bibliotheken

Für die Veröffentlichung von npm-Bibliotheken erweitert tsup esbuild um sinnvolle Standardeinstellungen: Es erzeugt CJS + ESM + .d.ts, überwacht Dateien während der Entwicklung und akzeptiert eine einfache Konfiguration.

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

Kompromisse bei der Bundle-Größe

esbuild minimiert schnell, aber seine Minimierung ist etwas weniger aggressiv als die von Terser. Führen Sie Terser als nachgelagerten Schritt aus, um eine absolut minimale Ausgabe zu erhalten, wenn die Größe wichtiger ist als die Build-Geschwindigkeit.

Schnelltest

esbuild kann tsc beim Kompilieren von TypeScript ersetzen — aber was führt es im Gegensatz zu tsc NICHT aus?

Beantworte es in der interaktiven Lektion

Zusammenfassung: esbuild

Go-basierter Bundler, 10- bis 100-mal schneller als JS-Bundler. CLI + programmgesteuerte API. Entfernt TypeScript (keine Typprüfung — führen Sie tsc --noEmit aus). Plugin-Hooks: onResolve + onLoad. Einschränkungen: dünnes Plugin-Ökosystem, minimale CSS-Pipeline, kein framework-spezifisches HMR. Besonders geeignet für: Bibliotheken, Lambda/Worker und den Einsatz innerhalb von Vite/tsup. Verwenden Sie den tsup-Wrapper für npm-Bibliotheken.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „esbuild: Geschwindigkeit und Einschränkungen“ kostenlos?

Ja — der vollständige Text von „esbuild: Geschwindigkeit und Einschränkungen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „esbuild: Geschwindigkeit und Einschränkungen“?

Verwenden Sie esbuild als eigenständigen Bundler und verstehen Sie, warum es um Größenordnungen schneller als webpack ist, sowie seine aktuellen Einschränkungen bei Plugins und Typen. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „esbuild: Geschwindigkeit und Einschränkungen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Vite: Plugin-System und SSR-Modus
esbuild: Geschwindigkeit und Einschränkungen
pnpm Workspaces für Monorepos
Turbo: Caching und Task-Pipelines

← Zurück zu Frontend Academy