Frontend Academy · Lesson

esbuild: Speed and Limitations

Use esbuild as a standalone bundler and understand why it is orders of magnitude faster than webpack, plus its current limitations around plugins and types.

Lesson 2 of 415 steps

esbuild: Speed and Limitations is a free Frontend Academy lesson on CoddyKit. This is lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.

What Is esbuild?

esbuild is a bundler and minifier written in Go. It's 10-100x faster than JavaScript-based bundlers because of native multi-threading and zero startup overhead. Created by Evan Wallace (Figma).

Speed Benchmarks

Bundling React's source (around 6 MB): esbuild ~0.4s, Webpack ~9s, Rollup ~6s, Parcel ~10s. The speed comes from: Go (compiled), parallelism, no AST conversion between passes, simple architecture.

Using esbuild Directly

Install and run from CLI.

npm install -D esbuild

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

Programmatic API

Use from a build script for more 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 Without tsc

esbuild strips TypeScript syntax (turning .ts into .js) much faster than tsc. It does NOT type-check — run tsc --noEmit separately for that.

# 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 with Hot Reload

esbuild has a built-in dev server with watch mode and HMR via the 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 Architecture

esbuild supports plugins with two main hooks: onResolve (intercept module resolution) and onLoad (provide content for resolved modules).

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

Loaders

esbuild has built-in loaders for: js, ts, jsx, tsx, json, css, text, base64, dataurl, file, binary. CSS support is bundling-only (no modules, no PostCSS) — use a plugin or another tool.

Limitations vs Rollup/Vite

1) Plugin ecosystem is smaller. 2) CSS pipeline is minimal — no CSS Modules, no PostCSS, no preprocessors out of box. 3) No HMR for frameworks (frameworks like React/Vue need framework-specific HMR). 4) No tree-shaking warnings or analysis. 5) Less mature for complex SSR setups.

When esbuild Shines

1) Library bundling (single entrypoint, no framework). 2) Lambda/Worker packaging (minimal cold start). 3) Sub-tool inside Vite/tsup (used for TS transformation under the hood). 4) Migrating from tsc to a faster TS pipeline.

esbuild Inside Other Tools

Vite uses esbuild for dev TS/JSX transformation and pre-bundling node_modules. tsup uses esbuild for library bundling. Rollup has an esbuild plugin. Many tools combine the speed of esbuild with their own UX.

tsup — Library-Friendly esbuild Wrapper

For publishing npm libraries, tsup wraps esbuild with sensible defaults: emits CJS + ESM + .d.ts, watches in dev, accepts simple config.

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

Bundle Size Trade-offs

esbuild minifies fast but its minification is slightly less aggressive than Terser. Run Terser as a post-step for absolute smallest output, if size matters more than build speed.

Quick Check

esbuild can replace tsc for compiling TypeScript — but what does esbuild NOT do that tsc does?

Answer it in the interactive lesson

Recap: esbuild

Go-based bundler, 10-100x faster than JS bundlers. CLI + programmatic API. Strips TS (no type-check — run tsc --noEmit). Plugin hooks: onResolve + onLoad. Limitations: thin plugin ecosystem, minimal CSS pipeline, no framework HMR. Best for: libraries, Lambda/Workers, inside Vite/tsup. Use tsup wrapper for npm libs.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 41
Lessons: 163

Start learning free View the full course

Frequently Asked Questions

Is the “esbuild: Speed and Limitations” lesson free?

Yes — the full text of “esbuild: Speed and Limitations” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO. The Frontend Academy course includes 4 lessons in total.

What will I learn in “esbuild: Speed and Limitations”?

Use esbuild as a standalone bundler and understand why it is orders of magnitude faster than webpack, plus its current limitations around plugins and types. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “esbuild: Speed and Limitations” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Frontend Academy