पाठ 21 / 30

Transpilation बनाम Minification

Concerns को separate करने को समझें: Babel transpiles, minifiers compress करते हैं।

Babel minify नहीं करता

Babel की job compatibility है, size नहीं। यह ES6 को ES5 में transpile करता है लेकिन variable names को compress या whitespace को remove नहीं करता। इसके लिए separate minifiers (Terser, esbuild) का उपयोग करें।

पहले transpile करें, फिर minify करें

Typical build pipeline: Source → Babel (transpile) → Terser (minify) → Output। हर tool का एक 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

आधुनिक bundlers दोनों को स्वचालित रूप से संभालते हैं

Webpack, Vite, और esbuild transpilation के लिए Babel (या SWC) को शामिल करते हैं और minification के लिए Terser को। आप एक बार configure करते हैं; bundler दोनों steps को coordinate करता है।

Build pipeline architecture

आधुनिक build pipelines modular हैं: parser → transpiler → bundler → minifier। हर step आपकी जरूरतों के आधार पर optional है। Effectively optimize करने के लिए flow को समझें।