JavaScript मिनिफायर

JavaScript मिनिफ़िकेशन के बारे में

JavaScript अधिकांश वेब पेजों पर सबसे भारी संसाधन प्रकार है, और सिर्फ इसलिए नहीं कि यह आम तौर पर सबसे बड़ी फ़ाइल होती है। लागत पांच चरणों में है: डाउनलोड (नेटवर्क पर), पार्स (इंजन बाइट्स पढ़ता है और AST बनाता है), कंपाइल (V8 या JavaScriptCore AST को बाइटकोड में कंपाइल करता है), एक्जीक्यूट (बाइटकोड चलता है), और बाद की यात्राओं पर, यदि इंजन ने इसे रखा है तो कैश्ड बाइटकोड से वार्म-स्टार्ट। CDN के किनारे पर Brotli डाउनलोड लागत को संभालता है। मिनिफिकेशन डाउनलोड में भी मदद करता है, लेकिन यह हर उस डिवाइस पर पार्स और कंपाइल लागत में भी मदद करता है जो आपकी स्क्रिप्ट डाउनलोड करता है, और लो-एंड Android फ़ोन पर, पार्स और कंपाइल नेटवर्क ट्रांसफर से अधिक समय ले सकते हैं। Addy Osmani के Cost of JavaScript लेखों ने बार-बार दिखाया है कि जो नेटवर्क समस्या जैसा दिखता है वह अक्सर CPU समस्या होती है, और मिनिफिकेशन की 20-40% बाइट कमी धीमे डिवाइस की लंबी पूंछ पर पार्स समय के बचाए गए मिलीसेकंड में काफी सीधे अनुवाद करती है।

V8 का आलसी पार्सिंग ऑप्टिमाइज़ेशन किसी भी फ़ंक्शन के पूर्ण पार्सिंग को तब तक स्थगित कर देता है जब तक कि उसे वास्तव में नहीं बुलाया जाता, जिसका अर्थ है कि कई अप्रयुक्त फ़ंक्शनों वाली एक बड़ी स्क्रिप्ट उसके बाइट काउंट से कम लागत वाली है। Chrome का HTTP कैश V8 बाइटकोड ("Code Cache") को भी संग्रहीत करता है ताकि दोहराई गई यात्राएं पार्स-एंड-कंपाइल चरण को पूरी तरह से छोड़ दें। इनमें से कोई भी मूल समीकरण को नहीं बदलता: छोटी स्क्रिप्ट तेज़ी से गर्म कैश तक पहुंचती हैं, कोल्ड पथ पर तेज़ी से पार्स होती हैं, और तेज़ी से कंपाइल होती हैं। मिनिफिकेशन मिलीसेकंड वापस लेने के लिए पूरे स्टैक पर सबसे सस्ती जगह है।

JavaScript मिनिफिकेशन के चार (या पांच) स्तर

सभी मिनिफायर समान नहीं हैं, और आपको जिस स्तर की आवश्यकता है वह आपके कोडबेस पर निर्भर करता है। स्तर 1: व्हाइटस्पेस और टिप्पणी हटाना। सबसे सरल पास, स्पेस, टैब, न्यूलाइन और // ... / /* ... */ टिप्पणियां हटाएं। यह वही है जो एक regex पास सुरक्षित रूप से कर सकता है (स्ट्रिंग, टेम्पलेट लिटरल और regex लिटरल के आसपास सावधानी के साथ)। विशिष्ट कमी: कच्चे बाइट्स में 20-40%। स्तर 2: प्रतीक नाम बदलना (mangling)। स्थानीय चर नाम, फ़ंक्शन पैरामीटर और (सावधानी के साथ) फ़ंक्शन नाम एकल अक्षरों में फिर से लिखे जाते हैं: function calculateTotal(itemList) function a(b) बन जाता है। इसके लिए एक एब्स्ट्रैक्ट सिंटैक्स ट्री और पूर्ण स्कोप विश्लेषण की आवश्यकता है यह जानने के लिए कि कौन से नाम सुरक्षित रूप से नाम बदलने योग्य हैं, वैश्विक नाम, एक्सपोर्ट, this की प्रॉपर्टी के संदर्भ, और स्ट्रिंग-कीड एक्सेस (obj['name']) के माध्यम से पहुंचा जाने वाला कुछ भी सब बरकरार रहना चाहिए। विशिष्ट अतिरिक्त कमी: 10-25%। स्तर 3: डेड कोड एलिमिनेशन (tree shaking)। मॉड्यूल-स्तरीय स्टैटिक विश्लेषण उन इम्पोर्ट और कोड पथों की पहचान करता है जो कभी निष्पादित नहीं होते और उन्हें हटा देता है। मॉड्यूल-स्तरीय प्रकार जानकारी और दुष्प्रभावों की स्पष्ट समझ की आवश्यकता है। विशिष्ट अतिरिक्त कमी: परिवर्तनीय, लेकिन कई सुविधाएं भेजने वाली लाइब्रेरी पर विशाल हो सकती है। स्तर 4: इनलाइनिंग और कांस्टेंट फोल्डिंग। 2 * 60 * 60 जैसे सरल अभिव्यक्ति बिल्ड समय पर 7200 के रूप में मूल्यांकित होते हैं; एक बार बुलाए गए छोटे फ़ंक्शन उनके कॉलर में इनलाइन हो सकते हैं। स्तर 5: प्रॉपर्टी mangling। सबसे आक्रामक ऑप्टिमाइज़ेशन, ऑब्जेक्ट प्रॉपर्टी नाम भी फिर से लिखे जाते हैं। किसी भी कोड को तोड़ देता है जो स्ट्रिंग कुंजी (obj['name'] बनाम obj.name) का उपयोग करता है या प्रॉपर्टी नामों को अपने सार्वजनिक अनुबंध के हिस्से के रूप में उजागर करता है। लगभग हमेशा opt-in और लगभग हमेशा --mangle-props regex के माध्यम से विशिष्ट पहचानकर्ताओं तक सीमित।

JavaScript मिनिफिकेशन टूलिंग का संक्षिप्त इतिहास

JSMin (2003)। Douglas Crockford, हां, वही Crockford जिन्होंने JSON को बढ़ावा दिया, ने 2003 में C में JSMin लिखा। यह एक छोटा सिंगल-फ़ाइल प्रोग्राम था जिसने बिना AST, बिना स्कोप विश्लेषण के और ASI (Automatic Semicolon Insertion) किनारे के मामलों के लिए जानबूझकर रूढ़िवादी दृष्टिकोण के साथ बुनियादी व्हाइटस्पेस और टिप्पणी हटाने का काम किया। इसने "सबसे सरल चीज़ जो काम करती है" का मानक स्थापित किया और तब से हर regex-आधारित JS मिनिफायर का आध्यात्मिक पूर्वज है। YUI Compressor (2007)। Yahoo के Julien Lecomte ने 11 अगस्त 2007 को YUI Compressor की घोषणा की। इसने सुरक्षित प्रतीक नाम बदलने के लिए Rhino टोकनाइज़र का उपयोग किया, JavaScript के लिए वास्तविक AST-आधारित mangling करने वाला पहला व्यापक रूप से उपयोग किया जाने वाला Java उपकरण। Closure Compiler (2009)। Google 2005 से आंतरिक रूप से इसका उपयोग कर रहा था; उन्होंने इसे 5 नवंबर 2009 को Apache 2.0 के तहत ओपन-सोर्स किया। Closure युग का सबसे आक्रामक ऑप्टिमाइज़र था, JSDoc एनोटेशन के माध्यम से प्रकार-जागरूक, एक "advanced" मोड के साथ जो प्रकार अनुमान के आधार पर प्रॉपर्टी नामों को फिर से लिख सकता था। समझौता यह था कि आपको अपना कोड Closure-अनुकूल तरीके से लिखना था; उन्नत-मोड विफलताएं कुख्यात थीं।

UglifyJS (~2010-2012)। Mihai Bazon का UglifyJS पहला JavaScript-नेटिव मिनिफायर था, JS में लिखा गया, Node.js पर चलाया गया, और यह एक दशक के लिए npm डिफ़ॉल्ट बन गया। UglifyJS 2 ने सोर्स मैप समर्थन और ES5 सुविधाएं जोड़ीं; UglifyJS 3 ने निरंतर ES5 पॉलिश के साथ अनुसरण किया लेकिन कभी पूरी तरह से ES6+ समर्थन प्राप्त नहीं किया। Terser (अगस्त 2018)। Fabricio Matté ने UglifyJS को Terser में विशेष रूप से लंबे समय से स्थिर UglifyJS API को बाधित किए बिना ES6+ समर्थन जोड़ने के लिए फ़ोर्क किया। Terser अब webpack 5, Rollup, Parcel 1 और पुराने Next.js संस्करणों में डिफ़ॉल्ट JS मिनिफायर है। swc (2017/2019)। Donny "kdy1" Choi का swc ("Speedy Web Compiler") एक Rust-आधारित JavaScript/TypeScript कंपाइलर है जिसमें Terser से 20-70x तेज़ बिल्ट-इन मिनिफायर है। Next.js ने अक्टूबर 2021 में संस्करण 12 से शुरू होकर अपना डिफ़ॉल्ट मिनिफायर Terser से swc में बदल दिया। esbuild (शीत 2019-2020)। Figma के सह-संस्थापक Evan Wallace ने 2019-2020 की शीतकालीन छुट्टियों के दौरान esbuild जारी किया। Go में लिखा गया, यह उस समय के JavaScript-आधारित बंडलरों से 10-100x तेज़ है और अपना खुद का मिनिफायर लाता है। esbuild अब Vite, tsup और कई फ्रेमवर्क टेम्पलेट्स में अंतर्निहित मिनिफायर है। पिछले पांच वर्षों में सामान्य दिशा रही है: एक तेज़ सिस्टम भाषा (Rust या Go) में लिखा गया पार्सर, AST-आधारित ऑप्टिमाइज़ेशन, बुद्धिमान ES मॉड्यूल-जागरूक tree shaking। ब्राउज़र-पेस्टेड regex मिनिफायर, इस उपकरण की तरह, उस सीढ़ी के तल पर बैठता है, सबसे सरल काम कर रहा है जो अभी भी उपयोगी है।

मिनिफाइड JavaScript के लिए Source Maps

एक source map एक JSON साइडकार फ़ाइल है जो मिनिफाइड आउटपुट में स्थानों को मूल स्रोत में स्थानों पर मैप करती है। Source Map V3 स्पेक 2011 में John Lenz (Google) और Nick Fitzgerald (Mozilla) द्वारा लिखा गया था, और जून 2024 में TC39 द्वारा ECMA-426 के रूप में अपनाया गया, वही source-map प्रारूप JavaScript और CSS दोनों पर लागू होता है। ब्राउज़र मिनिफाइड फ़ाइल में अनुगामी टिप्पणी के माध्यम से मानचित्र का उपभोग करते हैं: //# sourceMappingURL=app.js.map। जब DevTools खुला होता है और मानचित्र प्राप्त किया जाता है, तो Sources पैनल मूल स्रोत दिखाता है, ब्रेकपॉइंट, कंसोल त्रुटियों और स्टैक ट्रेस सभी इसे संदर्भित करते हैं। उत्पादन मिनिफायर (Terser, swc, esbuild, Closure) सभी अनुरोध पर source maps का उत्सर्जन करते हैं। यह उपकरण नहीं, एक इन-ब्राउज़र वन-शॉट उपकरण के लिए जो डाउनलोड करने योग्य फ़ाइल जोड़ी के बजाय टेक्स्ट लौटाता है, source maps सीमांत लाभ के लिए महत्वपूर्ण जटिलता जोड़ते हैं। ईमानदार खुलासा यह है कि यह उपकरण एक-तरफ़ा पास है; बिल्ड-पाइपलाइन मिनिफायरों के पास source maps के लिए बहुत मजबूत मामला है क्योंकि मूल स्रोत डिस्क पर बैठते हैं और डेवलपर को रनटाइम पर डीबग करने की आवश्यकता होती है।

आधुनिक बंडलर डिफ़ॉल्ट, अधिकांश लोगों के पास पहले से ही एक मिनिफायर है

यदि आप एक आधुनिक बिल्ड पाइपलाइन का उपयोग कर रहे हैं, तो आपका मिनिफायर पहले से ही चल रहा है। webpack 5 डिफ़ॉल्ट रूप से Terser के साथ terser-webpack-plugin का उपयोग करता है। Vite डिफ़ॉल्ट रूप से मिनिफिकेशन के लिए esbuild का उपयोग करता है; CSS के लिए Lightning CSS। Parcel swc का उपयोग करता है। Next.js v12 (अक्टूबर 2021) में Terser से swc में बदल गया, और उसी संस्करण में पूरी बिल्ड पाइपलाइन के लिए Babel से swc में बदल गया। Remix, Astro, SvelteKit, Nuxt, Rollup, स्टैंडअलोन esbuild, सभी बिना डेवलपर हस्तक्षेप के उत्पादन बिल्ड में मिनिफिकेशन को बंडल करते हैं। परिणाम यह है कि एक आधुनिक बिल्ड पाइपलाइन का उपयोग करने वाले किसी भी व्यक्ति के लिए, JS मिनिफिकेशन एक सिंगल-फ़ाइल regex उपकरण से कहीं अधिक ऑप्टिमाइज़ेशन के साथ स्वचालित रूप से होता है। ऐसे मामले जहां यह इन-ब्राउज़र मिनिफायर अपनी जगह कमाता है: इनलाइन <script> ब्लॉक वाले हाथ से बने HTML पेज; Node टूलचेन के बिना भेजे गए WordPress थीम; मिनिफिकेशन को बंडल नहीं करने वाले स्टैटिक-साइट जेनरेटर; CMS या ईमेल टेम्पलेट में पेस्ट किए गए वन-ऑफ स्निपेट; त्वरित प्रयोग जहां बिल्ड पाइपलाइन सेट करना स्क्रिप्ट से अधिक समय लेगा।

ईमानदार दायरा: यह उपकरण क्या करता है और क्या नहीं

यह उपकरण एक regex-आधारित मिनिफायर है, लगभग 30 लाइनों का JavaScript। यह स्ट्रिंग लिटरल, टेम्पलेट लिटरल और regex लिटरल को प्लेसहोल्डर में टोकनाइज़ करता है ताकि बाद के परिवर्तन उनकी सामग्री को भ्रष्ट न कर सकें; // ... और /* ... */ टिप्पणियों को हटाता है; व्हाइटस्पेस के रन को संक्षिप्त करता है; उन विराम चिह्नों के आसपास व्हाइटस्पेस को हटाता है जिन्हें इसकी आवश्यकता नहीं है; और टोकनाइज़ किए गए लिटरल को पुनर्स्थापित करता है। विशिष्ट आउटपुट कच्चे बाइट्स में इनपुट से 20-40% छोटा होता है। यह उपकरण क्या नहीं करता, और जो उत्पादन मिनिफायर (Terser, swc, esbuild, Closure) संभालते हैं: यह स्थानीय चरों को एकल अक्षरों में नाम नहीं देता (कोई स्कोप-जागरूक mangling नहीं); यह डेड-कोड एलिमिनेशन या tree-shaking नहीं करता; यह कांस्टेंट फोल्डिंग या अभिव्यक्ति सरलीकरण नहीं करता; यह source maps नहीं उत्सर्जित करता; यह TypeScript सिंटैक्स नहीं समझता (केवल सादा JavaScript पेस्ट करें); यह ES मॉड्यूल इम्पोर्ट नहीं tree-shake करता; यह प्रॉपर्टी नामों को फिर से नहीं लिखता। ईमानदार ढांचा: अपने एडिटर या अपने हाथ से निकले JavaScript को पेस्ट करें, एक स्ट्रिप्ड संस्करण वापस प्राप्त करें जो आम तौर पर कच्चे बाइट्स में 20-40% छोटा होता है, और इसे क्विक-डिप्लॉय आर्टिफैक्ट के रूप में उपयोग करें। बिल्ड पाइपलाइन वाली परियोजनाओं के लिए, उस पाइपलाइन में Terser, swc या esbuild का उपयोग करें; AST-जागरूक ऑप्टिमाइज़ेशन इस उपकरण की 20-40% कमी और एक उत्पादन मिनिफायर के 60-80% के बीच का अंतर हैं।

Regex मिनिफायर के नुकसान

एक regex-आधारित पास जो JavaScript व्याकरण को नहीं समझता है, कोड को सूक्ष्म तरीकों से भ्रष्ट कर सकता है। क्लासिक जाल: टेम्पलेट लिटरल बैकटिक्स का उपयोग करते हैं और इनमें इंटरपोलेटेड अभिव्यक्तियाँ (`Hello ${name}!`) शामिल हो सकती हैं जो टिप्पणी-स्ट्रिप उम्मीदवारों की तरह दिखती हैं यदि regex सावधान नहीं है। Regex लिटरल जैसे /^\/\*/g में फॉरवर्ड स्लैश, टिप्पणी जैसी अनुक्रम और स्ट्रिंग जैसी सामग्री शामिल है; उन्हें गलत तरीके से संभालना regex को सिंटैक्टिक रूप से टूटे हुए कोड में बदल देता है। टिप्पणी जैसे टेक्स्ट वाली स्ट्रिंग (const url = "// example.com"), भोली टिप्पणी हटाने से // के बाद सब कुछ हट जाएगा। ASI गोचा, Automatic Semicolon Insertion JS सुविधा है जो आपको अधिकांश समय अर्धविराम छोड़ने देती है, लेकिन यह व्हाइटस्पेस स्ट्रिपिंग के साथ खराब इंटरैक्ट करती है जब अगला टोकन कोष्ठक, ब्रैकेट या ऑपरेटर ((/regex/), [arr], +1) से शुरू होता है, असावधान व्हाइटस्पेस संक्षिप्त करना "दो स्टेटमेंट" को "पार्सिंग त्रुटि के साथ एक स्टेटमेंट" में बदल सकता है। इस उपकरण में शमन लिटरल-टोकनाइज़ेशन पास है जो पहले चलता है, हर स्ट्रिंग और regex को एक अद्वितीय प्लेसहोल्डर से बदल देता है, साफ किए गए कोड पर टिप्पणी+व्हाइटस्पेस का काम करता है, फिर प्लेसहोल्डर को पुनर्स्थापित करता है। यह सही नहीं है, लेकिन यह सामान्य मामलों को कवर करता है। यदि आपको संदेह है कि मिनिफायर ने आपके कोड को तोड़ दिया है, तो जांचने वाली पहली चीज़ एक regex लिटरल है जिसमें टोकनाइज़र द्वारा छूटी हुई स्लैश अनुक्रम है।

गोपनीयता: क्यों केवल-ब्राउज़र यहां मायने रखता है

सर्वर-साइड JS मिनिफायर (ऑनलाइन उपकरण जो आपके कोड को एक सर्वर पर POST करते हैं, इसे वहां Terser के माध्यम से चलाते हैं, और परिणाम लौटाते हैं) आपके स्रोत को अपलोड करने की आवश्यकता होती है। सामान्य लाइब्रेरी कोड के लिए यह हानिरहित है। आंतरिक उपकरण, अप्रकाशित उत्पाद कोड, इनलाइन API कुंजी या तृतीय-पक्ष सेवा क्रेडेंशियल युक्त JavaScript, या स्वामित्व एल्गोरिदम या व्यावसायिक तर्क प्रकट करने वाले किसी भी कोड के लिए, यह नहीं है। एक विशुद्ध रूप से ब्राउज़र-आधारित मिनिफायर, आपके टैब में चलने वाला JavaScript जो प्रारंभिक पेज लोड के बाद कभी नेटवर्क अनुरोध नहीं करता है, समस्या को दरकिनार करता है। आप DevTools के Network टैब को खोलकर, कोड पेस्ट करके, Minify पर क्लिक करके और किसी भी आउटगोइंग अनुरोध को देखकर सत्यापित कर सकते हैं। बेहतर अभी भी, पेज लोड होने के बाद इंटरनेट से डिस्कनेक्ट करें (या एयरप्लेन मोड सक्षम करें) और उपकरण अभी भी काम करेगा, जो सबसे मजबूत अनुभवजन्य प्रमाण है कि कुछ भी अपलोड नहीं किया जा रहा है।

अक्सर पूछे जाने वाले प्रश्न