JavaScript मिनिफाय करा _

JavaScript मिनिफिकेशन कसे कार्य करते

Terser तुमच्या code च्या Abstract Syntax Tree वर चार stages मध्ये काम करतो. प्रत्येक stage independent आहे, त्यामुळे तुम्ही इतरांना न तोडता कोणताही on किंवा off करू शकता.

1. विश्लेषण. Terser तुमचे JavaScript एक AST मध्ये parse करतो. कोणतीही syntax error token आणि line सह येथे surface होते ज्यामुळे ती निर्माण झाली, त्यामुळे कोणतेही transformation चालण्यापूर्वी वास्तविक problem सापडतो. Parser नवीनतम stage-4 proposals पर्यंत प्रत्येक standard ECMAScript construct accept करतो.
2. संकुचन. Compressor AST चालतो आणि desantics-preserving transforms चा डझनभर लागू करतो: constant folding, dead-branch elimination, short pure functions inlining, sequential var declarations collapsing, आणि equivalent statement forms rewriting (if/else ternaries मध्ये, comparison-chain shortening, conditional return collapsing). प्रत्येक transform तत्त्वतः reversible आहे; compressor कधीही observable behaviour बदलत नाही.
3. नावे संकुचित करा. Mangler प्रत्येक scope मध्ये local bindings ला सर्वात छोट्या unique identifiers (a, b, c, …) rename करतो. फक्त module boundary escape करू शकत नाहीत असे names rename होतात, त्यामुळे exported bindings, property keys आणि global references अस्पर्श राहतात. हा कोणत्याही stage च्या सर्वात मोठ्या single byte saving चा result आहे.
4. आउटपुट निर्मिती. Terser transformed AST ला व्हाइटस्पेस collapsed आणि statement separators grammar accept करेल त्या minimum वर reduced केलेल्या JavaScript string ला print करतो. preserve-license toggle /*! … */ blocks ठेवल्याशिवाय टिप्पण्या strip होतात, ज्या बहुतेक CDN licenses तुम्हाला retain करण्यास require करतात.

JavaScript मिनिफाय का करावे

• जलद page loads. लहान scripts लवकर parse आणि execute होतात. 4G mobile connection वर 40-percent byte reduction Time to Interactive वरून real seconds कमी करतो, जो Google च्या PageSpeed Insights सर्वात aggressively measure करणारा metric आहे.
• कमी CDN egress बिले. CloudFront, Cloudflare आणि Fastly egress च्या प्रति गिगाबाइट बिल करतात. महिन्यातील लाखो page views वर 40-percent script reduction कोणत्याही image किंवा CSS कामापूर्वी बिलावर खरी बचत म्हणून दिसते. गणित gzip आणि brotli नंतरही टिकतो — मिनिफिकेशन tokens काढतो ज्या compressor ला अन्यथा encode कराव्या लागल्या असत्या.
• हा मिनिफायर तुमच्या page ला tax करत नाही. Terser ~1 MB uncompressed आहे. बहुतेक online minifiers page load वर संपूर्ण library ship करतात, जे त्यांचा Lighthouse score खाली आणतो आणि user काही टाइप करण्यापूर्वी page sluggish वाटतो. हे page Terser lazy-load करते फक्त तेव्हाच जेव्हा तुम्ही Minify click करता किंवा Live mode चालू करता — त्यामुळे initial render Core Web Vitals thresholds खाली राहतो जे साधन स्वतः तुम्हाला hit करण्यास help करण्याचे promise करते.
• Core Web Vitals pass करणे. Lighthouse आणि PageSpeed Insights large JavaScript ला poor Total Blocking Time साठी direct contributor म्हणून flag करतात. Vendor libraries आणि application bundles मिनिफाय करणे Lighthouse "Reduce unused JavaScript" आणि "Remove duplicate modules" audits वर सर्वात जलद win आहे — सामान्यतः दहा किंवा वीस points worth एक-वेळ reduction.

सामान्य वापर

JavaScript मिनिफिकेशन आधुनिक web project च्या जवळजवळ प्रत्येक stage वर दिसतो.

• Pre-commit hooks: repo ला commit करण्यापूर्वी individual utility scripts मिनिफाय करा जेणेकरून committed artifact production-ready असेल आणि diff whitespace churn ऐवजी logic changes दाखवेल.
• Third-party widget audits: vendor चे embed snippet पेस्ट करा आणि ते आधीच मिनिफाइड आहे का किंवा millions of users ला serve करण्यापूर्वी आणखी संकुचित करता येते का तपासा.
• Legacy script cleanup: तुमच्या current build pipeline पूर्वीचे जुने jQuery plugins आणि हातांनी लिहिलेले scripts source tree न बदलता compress करा.

एक काम केलेले उदाहरण

एक छोटी function विचारात घ्या: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — टिप्पणी सह सुमारे 130 bytes. Mangle आणि Compress दोन्ही चालू असताना वर पेस्ट करा. आउटपुट अंदाजे function add(n,o){return n+o}console.log(add(1,2)); — सुमारे 55 bytes, 58-percent reduction — पर्यंत कमी होतो. Function name add survive करतो कारण ते console.log call मध्ये referenced आहे; parameter names firstNumber आणि secondNumber single letters पर्यंत कमी होतात कारण ते function body साठी local आहेत. व्हाइटस्पेस collapse आणि टिप्पणी drop करताना readable parameter names ठेवण्यासाठी Mangle बंद करा.

FAQ

हे माझ्या ब्राउझरमध्ये चालते का?

होय. Terser पहिल्यांदा तुम्ही Minify click करता किंवा Live mode enable करता तेव्हा lazy-loaded होतो — सुमारे 200 KB compressed तुमच्या browser cache मध्ये येतो, नंतर काहीही download होत नाही. तुमचा code page कधीही सोडत नाही.

Name mangling म्हणजे काय आणि ते सुरक्षित आहे का?

Mangling bytes वाचवण्यासाठी local variables ला single letters rename करतो. Self-contained scripts आणि IIFE bundles साठी सुरक्षित आहे कारण renames कधीही scope सोडत नाहीत. Wrapper शिवाय नावाने globals expose करणाऱ्या scripts साठी (उदा. window.myLib = …) सुरक्षित नाही. अनिश्चित असताना Mangle बंद करा.

मिनिफिकेशननंतर माझा code का तुटला?

तीन सामान्य कारणे: string ने variables reference करणारे eval किंवा with; मूळ identifier वर अवलंबून असलेले Function.name किंवा arguments.callee reads; किंवा rename केलेल्या नावाने exposed globals. Renaming किंवा Compress transform कारण आहे हे isolate करण्यासाठी आधी Mangle बंद करा.

हे modern syntax (ES2020+) support करते का?

होय. ECMAScript target ES2020 किंवा Next वर set करा आणि Terser optional chaining, nullish coalescing, top-level await आणि logical-assignment operators जपतो. ES5 वर set करा आणि Terser जिथे शक्य तिथे down-compile करतो, पण हे full transpiler नाही — ES5 represent करू शकत नाहीत अशा syntax साठी Babel वापरा.

Terser सह Browser-side JavaScript मिनिफिकेशन build tool add न करता production-quality output देते. Script पेस्ट करा, ECMAScript target निवडा, निकाल कॉपी किंवा डाउनलोड करा. काहीही uploads नाही, खाते नाही, build pipeline नाही. मिनिफायर स्वतः फक्त तुम्ही मागितल्यावरच लोड होतो — त्यामुळे हे page उघडणे एक megabyte नाही, तर काही kilobytes खर्च करते.