पाठ 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 को समझें।