JS मिनिफ़ायर
Terser इस्तेमाल करके JavaScript मिनिफ़ाई करें — वही इंजन जिस पर बड़े बिल्ड टूल भरोसा करते हैं। व्हाइटस्पेस और कमेंट हटाता है, और वैकल्पिक रूप से वेरिएबल नाम मैंगल करता है, ताकि पूरी तरह आपके ब्राउज़र में छोटा, फिर भी वैध आउटपुट बने।
- फ़ाइलें कभी आपकी डिवाइस से बाहर नहीं जातीं
- मुफ़्त, बिना साइन-अप
- कोई वॉटरमार्क नहीं
- लोड होने के बाद ऑफ़लाइन भी काम करता है
JS मिनिफ़ायर कैसे करें
- 1
अपना कोड पेस्ट करें
कोई भी वैध JavaScript फ़ाइल या स्निपेट डालें।
- 2
अपने विकल्प चुनें
सबसे छोटे आउटपुट के लिए वेरिएबल मैंगलिंग चालू रखें, या नतीजा पढ़ना हो तो इसे बंद कर दें।
- 3
नतीजा कॉपी करें
मिनिफ़ाई किया कोड, बची हुई साइज़ के साथ कॉपी करें।
मिनिफ़िकेशन अंदर असल में क्या करता है
व्हाइटस्पेस और कमेंट हटाना मिनिफ़िकेशन का आसान, स्पष्ट हिस्सा है — और अकेले यह अच्छी तरह लिखे कोड पर मुश्किल से कोई फ़र्क़ डालता है। असली साइज़ की कमी दो गहरे बदलावों से आती है: मैंगलिंग, जो हर लोकल वेरिएबल और फ़ंक्शन आर्गुमेंट का नाम बदलकर सबसे छोटा संभव पहचानकर्ता बनाती है (`accumulator` बनता है `a`, `temporaryResult` बनता है `t`), और डेड-कोड एलिमिनेशन, जो उन ब्रांच और एक्सप्रेशन को हटाता है जिन्हें कोड का स्टैटिक विश्लेषण साबित कर सकता है कि वे कभी एग्ज़िक्यूट नहीं होंगे या आउटपुट पर असर नहीं डालेंगे। दोनों को कोड के स्ट्रक्चर की असल में समझ चाहिए — इसके स्कोप, कौन-से नाम लोकल हैं बनाम एक्सपोर्ट किए, कौन-सी ब्रांच साबित तौर पर अनरीचेबल हैं — यही वजह है कि Terser जैसा असली पार्सर-आधारित टूल किसी सादे फ़ाइंड-एंड-रिप्लेस से कहीं छोटा आउटपुट देता है।
ज़्यादातर डेवलपर अब स्टैंडअलोन मिनिफ़ायर शायद ही क्यों छूते हैं
Webpack, esbuild, Rollup और Vite जैसे बंडलर अपने आउटपुट को प्रोडक्शन बिल्ड के हिस्से के रूप में अपने आप मिनिफ़ाई करते हैं, लगभग हमेशा Terser या Terser-कम्पैटिबल इंजन इस्तेमाल करते हुए — तो किसी आधुनिक JavaScript प्रोजेक्ट में काम करने वाले किसी भी व्यक्ति के लिए, मिनिफ़िकेशन हर बार बिल्ड कमांड चलाने पर पहले से अदृश्य रूप से हो जाता है। इसके जैसा कोई स्टैंडअलोन टूल उन मामलों को कवर करता है जो उस पाइपलाइन से बाहर आते हैं: बिना बिल्ड स्टेप वाला कोई सिंगल स्क्रिप्ट टैग, यह जल्दी जाँचना कि कोई स्निपेट कितना छोटा होगा, या कोई एक-बार वाली फ़ाइल जिसे उस मक़सद के लिए पूरा बंडलर कॉन्फ़िगरेशन खींचे बिना कंप्रेस करना है।
फ़ॉर्मेटिंग का उल्टा, उसका विकल्प नहीं
मिनिफ़ाई करना और फ़ॉर्मेट करना एक ही कोड पर विपरीत ऑपरेशन हैं: यह टूल वह व्हाइटस्पेस, स्ट्रक्चर और पठनीयता निकालता है जो Prettier जैसा कोई फ़ॉर्मेटर जान-बूझकर वापस जोड़ता है। इसका सहयोगी टूल, JavaScript फ़ॉर्मेटर, ठीक वही उलटता है जो यह करता है — उलटी दिशा के लिए उपयोगी, किसी मिनिफ़ाई की गई फ़ाइल को जो किसी ने आपको दी हो, वापस उतना पढ़ने लायक़ बनाने के लिए कि उसे असल में डीबग किया जा सके।
कोई असली बिल्ड पाइपलाइन आमतौर पर मिनिफ़िकेशन के साथ एक सोर्स मैप जोड़ती है — एक अलग फ़ाइल जो मिनिफ़ाई किए आउटपुट की हर पोज़िशन को उसकी मूल सोर्स लाइन से जोड़ती है — ख़ास तौर पर ताकि कोई डीबगर प्रोडक्शन में भी पढ़ने लायक़ कोड और सही लाइन नंबर दिखा सके, भले ही असल में चलने वाली फ़ाइल पढ़ने लायक़ न हो। यह स्टैंडअलोन टूल जान-बूझकर कोई सोर्स मैप जेनरेट नहीं करता, क्योंकि यह किसी प्रोडक्शन डिप्लॉयमेंट की बजाय एक जल्दी वाले एक-बार के छोटा करने के लिए है; किसी असली बिल्ड पाइपलाइन में जाने वाली किसी भी चीज़ को किसी बंडलर से गुज़रना चाहिए जो साथ में मिलता हुआ सोर्स मैप बनाए।
अक्सर पूछे जाने वाले सवाल
क्या मेरा कोड किसी सर्वर पर भेजा जाता है?
नहीं। Terser आपके ब्राउज़र में डाउनलोड होकर वहीं चलता है — मिनिफ़िकेशन पूरी तरह आपकी डिवाइस पर होता है। प्रोप्राइटरी या इंटरनल कोड कभी आपकी मशीन से बाहर नहीं जाता, जो हर ऑनलाइन मिनिफ़ायर के लिए सच नहीं है।
क्या मिनिफ़िकेशन मेरा कोड तोड़ सकता है?
सही तरीक़े से किए जाने पर नहीं — Terser आपके कोड को टेक्स्ट पर पैटर्न-मैच करने की बजाय एक असली सिंटैक्स ट्री में पार्स करता है, तो बदला गया आउटपुट ज़्यादातर कोड के लिए मूल जैसा ही व्यवहार करता है। एक असली एज केस है: ऐसा कोड जो रनटाइम पर अपने ख़ुद के सोर्स की जाँच करता है, जैसे किसी फ़ंक्शन पर `Function.prototype.toString()` कॉल करके नतीजे को पार्स करना, या किसी वेरिएबल या फ़ंक्शन के नाम को स्ट्रिंग के रूप में इस्तेमाल करना (कुछ डिपेंडेंसी-इंजेक्शन पैटर्न ऐसा करते हैं)। मैंगलिंग चीज़ों के नाम बदल देती है, तो इस तरह की इंट्रोस्पेक्शन मिनिफ़िकेशन के बाद अलग नाम देख सकती है। यह दुर्लभ है, लेकिन जानना ज़रूरी है अगर आपका कोड रिफ़्लेक्शन के साथ कुछ असामान्य करता है।
क्या मिनिफ़ाई किया आउटपुट अब भी वैध, चलने लायक़ JavaScript है?
हाँ। आउटपुट सामान्य JavaScript है — बस छोटा। आप इसे सीधे किसी `<script>` टैग या बिल्ड आउटपुट में बिल्कुल मूल फ़ाइल की तरह डाल सकते हैं।
मुझे इसे असल में कब इस्तेमाल करना चाहिए?
प्रोडक्शन बंडल के लिए, कहीं साइज़-सीमित जगह पर एम्बेड किया कोई स्क्रिप्ट (कोई ब्राउज़र एक्सटेंशन, कोई ट्रैकिंग स्निपेट, कोई साइज़-सीमित विजेट), या कोई एक-बार वाली फ़ाइल जिसे बिना बिल्ड स्टेप जोड़े जल्दी छोटा करना है। आप अपने सोर्स या डेवलपमेंट फ़ाइलें मिनिफ़ाई नहीं करेंगे — उन्हें पढ़ने लायक़ रखें, और सिर्फ़ फ़ाइनल बिल्ड आउटपुट मिनिफ़ाई करें, बिल्कुल वैसे ही जैसे कोई बंडलर करता है।
आउटपुट पढ़ने लायक़ क्यों नहीं दिखता?
यही तो मक़सद है। व्हाइटस्पेस, कमेंट और लंबे वेरिएबल नाम इंसानों के सोर्स पढ़ने के लिए होते हैं, JavaScript इंजन के इसे एग्ज़िक्यूट करने के लिए नहीं। इन्हें हटाना (और मैंगलिंग चालू होने पर नाम छोटा करना) कोड का व्यवहार बदले बिना नेटवर्क पर भेजे गए बाइट्स की संख्या घटाता है।
आपको यह भी चाहिए हो सकता है
JavaScript फ़ॉर्मेटर
असली पार्सर के साथ JS और TypeScript फ़ॉर्मेट करें
CSS मिनिफ़ायर
असली CSS-अवेयर मिनिफ़ायर से स्टाइलशीट छोटा करें
JSON फ़ॉर्मेटर
JSON को तुरंत फ़ॉर्मेट, वैलिडेट और मिनिफ़ाई करें
Base64 एनकोडर और डिकोडर
Base64 और Base64URL एनकोड और डिकोड करें
CSS फ़ॉर्मेटर
स्टाइलशीट को सुंदर बनाएँ या मिनिफ़ाई करें
हैश जेनरेटर
MD5, SHA-1, SHA-256, SHA-384 और SHA-512
HTML फ़ॉर्मेटर
HTML को सही तरीक़े से सुंदर बनाएँ और इंडेंट करें
JWT डिकोडर
JSON Web Token डिकोड और जाँचें