JavaScript मिनिफाई करें _

JavaScript मिनिफिकेशन कैसे काम करती है

Terser आपके code के Abstract Syntax Tree पर चार चरणों में काम करता है। हर चरण स्वतंत्र है, इसलिए आप किसी को भी बिना बाकी को तोड़े चालू या बंद कर सकते हैं।

1. Parse. Terser आपके JavaScript को AST में parse करता है। कोई भी syntax error यहाँ उस token और line के साथ सामने आती है जिसने उसे trigger किया, ताकि कोई transform चलने से पहले असली समस्या मिल जाए। Parser latest stage-4 proposals तक हर standard ECMAScript construct स्वीकार करता है।
2. Compress. Compressor AST को walk करता है और dozens of semantics-preserving transforms लागू करता है: constant folding, dead-branch elimination, छोटे pure functions का inlining, sequential var declarations का collapsing, और equivalent statement forms को rewrite करना (if/else को ternaries में, comparison-chain shortening, conditional return collapsing)। हर transform principle में reversible है; compressor observable behaviour कभी नहीं बदलता।
3. Mangle. Mangler हर scope में local bindings को सबसे छोटे unique identifiers (a, b, c, …) से rename करता है। केवल वे names rename होते हैं जो module boundary से बाहर नहीं जा सकते, इसलिए exported bindings, property keys और global references अछूते रहते हैं। यह किसी भी चरण में सबसे बड़ी बाइट बचत देता है।
4. Render. Terser transformed AST को collapsed व्हाइटस्पेस और grammar की न्यूनतम ज़रूरत के अनुसार statement separators के साथ JavaScript string में print करता है। कमेंट हटाए जाते हैं जब तक preserve-license toggle /*! … */ blocks नहीं रखता, जो अधिकतर CDN licences रखने के लिए कहते हैं।

JavaScript मिनिफाई क्यों करें

• तेज़ page loads. छोटी scripts जल्दी parse और execute होती हैं। 4G mobile connection पर 40 प्रतिशत byte reduction Time to Interactive से real seconds घटाता है, जो Google के PageSpeed Insights का सबसे aggressive metric है।
• कम CDN egress बिल. CloudFront, Cloudflare और Fastly प्रति gigabyte egress charge करते हैं। Millions monthly page views में 40 प्रतिशत script reduction gzip और brotli के बाद भी असली बचत बनती है — minification उन tokens हटाती है जो compressor को otherwise encode करने पड़ते।
• यह मिनिफायर आपके page को tax नहीं करता. Terser ~1 MB uncompressed है। अधिकतर online minifiers page load पर पूरी library ship करते हैं, जो उनका Lighthouse score खराब करती है और user के type करने से पहले page sluggish लगती है। यह page Terser को lazy-load करता है केवल तब जब आप Minify click करें या Live mode चालू करें — इसलिए initial render Core Web Vitals thresholds के नीचे रहता है।
• Core Web Vitals पास करना. Lighthouse और PageSpeed Insights बड़े JavaScript को poor Total Blocking Time का सीधा contributor flag करते हैं। Vendor libraries और application bundles minify करना Lighthouse "Reduce unused JavaScript" और "Remove duplicate modules" audits पर सबसे तेज़ जीत है — आमतौर पर ten या twenty points का one-shot reduction।

सामान्य अनुप्रयोग

JavaScript मिनिफिकेशन एक modern web project के लगभग हर चरण में दिखती है।

• Pre-commit hooks: individual utility scripts को repo में commit करने से पहले minify करें ताकि committed artifact production-ready हो और diff whitespace churn की बजाय logic changes दिखाए।
• Third-party widget audits: किसी vendor के embed snippet को paste करें और जाँचें कि क्या वह पहले से minified है या millions users को serve करने से पहले और shrink हो सकता है।
• Legacy script cleanup: पुराने jQuery plugins और hand-authored scripts जो आपके current build pipeline से पहले के हैं उन्हें compress करें, source tree को छुए बिना।

एक व्यावहारिक उदाहरण

एक छोटा function लें: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — कमेंट सहित लगभग 130 bytes। इसे ऊपर Mangle और Compress दोनों चालू करके paste करें। Output लगभग function add(n,o){return n+o}console.log(add(1,2)); तक सिकुड़ता है — लगभग 55 bytes, 58 प्रतिशत की कमी। Function name add बचता है क्योंकि console.log call में referenced है; firstNumber और secondNumber parameter names single letters में सिकुड़ते हैं क्योंकि function body के local हैं। Mangle बंद करें ताकि whitespace collapse और कमेंट drop करते हुए readable parameter names बनी रहें।

FAQ

क्या यह मेरे ब्राउज़र में चलता है?

हाँ। Terser पहली बार Minify click करने या Live mode चालू करने पर lazy-load होता है — लगभग 200 KB compressed आपके browser cache में आता है, फिर कुछ और download नहीं होता। आपका code page से कभी नहीं जाता।

Name mangling क्या है और क्या यह safe है?

Mangling bytes बचाने के लिए local variables को single letters से rename करता है। यह self-contained scripts और IIFE bundles के लिए safe है क्योंकि renames scope से कभी नहीं निकलते। यह उन scripts के लिए SAFE नहीं है जो globals को name से expose करती हैं (जैसे window.myLib = …) बिना wrapper के। अनिश्चित होने पर Mangle बंद करें।

Minification के बाद मेरा code टूट क्यों गया?

तीन सामान्य कारण: eval या with variables को string से reference करना; Function.name या arguments.callee reads जो original identifier पर निर्भर हैं; या किसी name से exposed globals जो rename हो गए। पहले Mangle बंद करके isolate करें कि renaming या Compress transform कारण है।

क्या यह modern syntax (ES2020+) support करता है?

हाँ। ECMAScript target को ES2020 या Next सेट करें और Terser optional chaining, nullish coalescing, top-level await और logical-assignment operators preserve करता है। ES5 सेट करने पर Terser जहाँ हो सके down-compile करता है, लेकिन यह full transpiler नहीं है — ऐसे syntax के लिए Babel use करें जो ES5 में represent नहीं हो सकता।

Terser के साथ browser-side JavaScript minification आपको production-quality output बिना build tool जोड़े देती है। Script paste करें, ECMAScript target चुनें, result copy या download करें। कुछ भी upload नहीं, कोई खाता नहीं, कोई build pipeline नहीं। Minifier खुद तभी load होता है जब आप पूछते हैं — इसलिए यह page खोलने में कुछ kilobytes लगते हैं, megabyte नहीं।