# Transpilation vs Minification — Babel & SWC

Source: https://www.geekswithgeeks.com/en/babel-swc/bs-minification-concerns

> Understand the separation of concerns: Babel transpiles, minifiers compress.

## 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.

```bash
# 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.