Stop 17 · Build ToolsTopics · 5/9

ESBuild

Part of the Frontend Developer Roadmap

In short

esbuild can bundle a project in the time older tools take to warm up. You may never configure it directly, because tools like Vite use it inside, but knowing it helps you debug.

An extremely fast JavaScript/TypeScript bundler and minifier written in Go — often used as a building block inside other tools (like Vite) rather than directly.

The jaadu waves from a sleek high-speed train zooming past a slow passenger train.

Think of it like this

Vande Bharat vs passenger train

Both trains reach the same station. The passenger train stops everywhere and takes its time. esbuild is the fast one: it's written in Go, uses all your CPU cores together, and skips the extra stops other tools make.

Watch it happen

One esbuild run

app.ts
Parse
Strip types
Bundle
Minify
app.js

1/6You run npx esbuild src/app.ts --bundle --minify.

The big ideas

What you need to know

Written in Go

It compiles to native machine code and works in parallel, unlike tools written in JavaScript.

Bundles, minifies, transforms

It handles JS, TS, JSX and CSS bundling and minification from one small CLI.

No type checking

esbuild strips TypeScript types and moves on. It never tells you about type errors.

Often used inside other tools

Vite uses esbuild in development, for example to pre-bundle your dependencies and transform TypeScript.

See it in code

Walk through the code

bash
1npm install -D esbuild2 3# Bundle, minify and add a source map4npx esbuild src/app.ts --bundle --minify --sourcemap \5  --target=es2020 --outfile=dist/app.js6 7# Rebuild automatically whenever a file changes8npx esbuild src/app.ts --bundle --outfile=dist/app.js --watch

1/3Install esbuild as a dev dependency.

--bundle pulls all imports into one file. --target tells esbuild which JavaScript version the output should use.

Save yourself the pain

Common mistakes

Oops

Shipping code because esbuild built it without errors.

Do this instead

esbuild doesn't check types. Add tsc --noEmit to your scripts or CI so type errors are caught.

Oops

Expecting esbuild to convert code for very old browsers like Babel does.

Do this instead

esbuild supports modern targets well. For very old browsers you may still need Babel or polyfills.

Your mission

Race your bundlers

~20 min

Quick check

Why do some teams run tsc --noEmit even though esbuild already compiles their TypeScript?

Go deeper

  1. 1Try bundling a small project directly with the `esbuild` CLI.
  2. 2Compare its build speed to Webpack for the same input.
  3. 3Notice how many modern tools use esbuild under the hood for speed.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge