Transpilation vs Minification

Babel does not minify

Babel's job is compatibility, not size. It transpiles ES6 to ES5 but doesn't compress variable names or remove whitespace. Use separate minifiers (Terser, esbuild) for that.

Transpile first, then minify

Typical build pipeline: Source → Babel (transpile) → Terser (minify) → Output. Each tool has one job.

# Step 1: Transpile with Babel
npx babel src -d transpiled

# Step 2: Minify with Terser
npx terser transpiled/index.js -o dist/index.min.js

# Or in one modern build tool (Webpack/Vite):
# Babel + Terser both configured, run once

Modern bundlers handle both automatically

Webpack, Vite, and esbuild include Babel (or SWC) for transpilation and Terser for minification. You configure once; the bundler orchestrates both steps.

Build pipeline architecture

Modern build pipelines are modular: parser → transpiler → bundler → minifier. Each step is optional based on your needs. Understand the flow to optimize effectively.