JS मिनिफायर

JS मिनिफायर एक मुफ्त टूल है, जो JavaScript से गैर-ज़रूरी कैरेक्टर हटाता है और मिनिफिकेशन से पहले और बाद के कैरेक्टर की संख्या बताता है।

JavaScript मिनिफिकेशन किस समस्या को हल करता है?

JavaScript मिनिफिकेशन उस सोर्स टेक्स्ट की मात्रा घटाता है जिसे ब्राउज़र को डाउनलोड करना पड़ता है। इसमें आम तौर पर इंडेंटेशन, लाइन ब्रेक और गैर-ज़रूरी स्पेस जैसी फ़ॉर्मैटिंग हटाई जाती है, बशर्ते JavaScript सिंटैक्स के लिए इन कैरेक्टर की ज़रूरत न हो।

छोटी स्क्रिप्ट से ट्रांसफ़र साइज़ और पार्सिंग का काम कम हो सकता है, खासकर जब किसी साइट पर कई बड़े बंडल भेजे जाते हों। फिर भी Brotli या gzip जैसे HTTP कम्प्रेशन की अहमियत बनी रहती है, क्योंकि मिनिफिकेशन और ट्रांसफ़र कम्प्रेशन समस्या के अलग-अलग हिस्सों को हल करते हैं। मिनिफिकेशन सोर्स कैरेक्टर हटाता है, जबकि कम्प्रेशन ट्रांसफ़र के दौरान दोहराए गए डेटा को अधिक कॉम्पैक्ट रूप में एन्कोड करता है।

यह प्रक्रिया आम तौर पर डिप्लॉयमेंट से पहले होने वाले बिल्ड में की जाती है। इसका उपयोग किसी अनमिनिफाइड थर्ड-पार्टी स्क्रिप्ट की जांच करने, बंडल साइज़ की तुलना करने या ऐसी साइट के लिए अलग फ़ाइल तैयार करने में भी किया जा सकता है जहां कोई बिल्ड पाइपलाइन नहीं है।

मिनिफिकेशन से यह साबित नहीं होता कि JavaScript सही तरीके से काम करता है। कोई स्क्रिप्ट सफलतापूर्वक मिनिफाई हो सकती है, लेकिन उसमें गलत API कॉल, पहुंच से बाहर वेरिएबल या केवल रनटाइम पर विफल होने वाला कोड फिर भी हो सकता है।

JS मिनिफायर का इस्तेमाल कैसे करें?

JavaScript को JS फ़ील्ड में पेस्ट करके टूल चलाएं, फिर मिनिफाइड JS में मिला परिणाम कॉपी करें। मूल सोर्स फ़ाइल को वर्ज़न कंट्रोल में रखें और पढ़ने योग्य सोर्स को बदलने के बजाय उसकी कॉम्पैक्ट कॉपी डिप्लॉय करें।

1. सबसे पहले सोर्स कोड पर सिंटैक्स जांच, लिंटर और ऑटोमेटेड टेस्ट चलाएं।
2. फ़ाइल से जुड़े सभी मॉड्यूल इम्पोर्ट या रैपर फ़ंक्शन सहित पूरी स्क्रिप्ट को JS में पेस्ट करें।
3. कैरेक्टर की संख्या में आया बदलाव देखने के लिए JS कैरेक्टर और मिनिफाइड JS कैरेक्टर जांचें।
4. पुष्टि करें कि मिनिफाइड JavaScript उसी ब्राउज़र और डिप्लॉयमेंट संदर्भ में सही चलता है जिसमें प्रोडक्शन फ़ाइल चलाई जाएगी।
5. अगर मिनिफाइड और पढ़ने योग्य दोनों वर्ज़न साथ रखे जाएंगे, तो app.min.js जैसा आसानी से पहचाना जाने वाला फ़ाइल नाम इस्तेमाल करें।

प्रोसेसिंग सर्वर पर होती है। आपका इनपुट HTTPS के ज़रिए सर्वर तक जाता है और स्टोर नहीं किया जाता। हालांकि, JavaScript को प्रोसेस करने के लिए सर्वर को वह प्राप्त करना ही पड़ता है। इसलिए ऐसा सोर्स सबमिट न करें जिसे आपका संगठन किसी बाहरी सेवा को भेजने की अनुमति नहीं देता।

मिनिफाइड परिणाम में क्या मिलता है?

परिणाम में कॉम्पैक्ट JavaScript और कैरेक्टर की दो संख्याएं मिलती हैं। JS कैरेक्टर इनपुट की लंबाई है, जबकि मिनिफाइड JS कैरेक्टर लौटाए गए मिनिफाइड JS की लंबाई बताता है।

इन संख्याओं की गणना PHP के mb_strlen फ़ंक्शन से होती है, जो केवल बाइट की संख्या बताने के बजाय मल्टीबाइट स्ट्रिंग की लंबाई मापता है। इसलिए कैरेक्टर की संख्या और नेटवर्क पर ट्रांसफ़र होने वाला अंतिम साइज़ एक नहीं होते। UTF-8 कैरेक्टर एक से अधिक बाइट ले सकते हैं और gzip या Brotli भेजी जाने वाली फ़ाइल को और छोटा कर सकते हैं।

यह टूल अलग से कोई वैलिडेशन या डायग्नोस्टिक फ़ील्ड नहीं देता। इससे हर गायब ब्रैकेट, गलत रेगुलर एक्सप्रेशन या असमर्थित लैंग्वेज फ़ीचर पहचानने की उम्मीद न करें। खास तौर पर, JSON से जुड़ी त्रुटियां, जैसे बिना कोटेशन वाले प्रॉपर्टी नाम या ट्रेलिंग कॉमा, JavaScript की भरोसेमंद जांच नहीं हैं, क्योंकि JavaScript ऑब्जेक्ट लिटरल और JSON का सिंटैक्स अलग होता है। JSON डेटा के लिए JSON सत्यापनकर्ता और सौंदर्यीकरण उपकरण इस्तेमाल करें।

छोटे उदाहरण और मुश्किल इनपुट

स्पेसिंग में एक सामान्य बदलाव इस तरह दिख सकता है।

इनपुट

function add(a, b) { return a + b; }

कॉम्पैक्ट रूप

function add(a,b){return a+b;}

ऑब्जेक्ट की प्रॉपर्टी वैल्यू बदले बिना उसके आसपास की फ़ॉर्मैटिंग भी हटाई जा सकती है।

इनपुट

const settings = { theme: "dark", retries: 2 };

कॉम्पैक्ट रूप

const settings={theme:"dark",retries:2};

अलग-अलग मिनिफायर में सटीक फ़ॉर्मैटिंग बदल सकती है, खासकर वैकल्पिक सेमीकोलन के आसपास। हर स्पेस या लाइन ब्रेक हटाकर JavaScript को सुरक्षित तरीके से कॉम्पैक्ट नहीं किया जा सकता। सुरक्षित मिनिफिकेशन में लेक्सिकल और सिंटैक्टिक संदर्भ को ध्यान में रखना ज़रूरी है, ताकि फ़ॉर्मैटिंग और प्रोग्राम को प्रभावित करने वाले कैरेक्टर में अंतर किया जा सके।

• स्ट्रिंग के भीतर के स्पेस डेटा होते हैं। "Newcastle upon Tyne" में मौजूद स्पेस बने रहने चाहिए।
• विराम चिह्न सिंटैक्स का हिस्सा हो सकते हैं। a + +b से स्पेस हटाने पर अलग टोकन क्रम बन सकता है।
• लाइन ब्रेक कभी-कभी ऑटोमेटिक सेमीकोलन इंसर्शन को प्रभावित करते हैं। इसमें return, break या continue के बाद आने वाला कोड भी शामिल है। throw के तुरंत बाद लाइन ब्रेक की अनुमति नहीं है, क्योंकि उसका एक्सप्रेशन उसी लाइन पर शुरू होना चाहिए।
• एक्सेंट वाले और गैर-लैटिन कैरेक्टर स्ट्रिंग में आ सकते हैं। जहां JavaScript आइडेंटिफ़ायर के नियम अनुमति देते हैं, वहां इन्हें आइडेंटिफ़ायर में भी इस्तेमाल किया जा सकता है। उनका बाइट साइज़ कैरेक्टर की संख्या से अलग हो सकता है।
• संख्याएं सोर्स टोकन हैं, कैरेक्टर गिनने के निर्देश नहीं। मिनिफायर को उनका संख्यात्मक अर्थ बनाए रखना चाहिए, भले ही वह कोई छोटा लेकिन समान नोटेशन चुने।

JavaScript को मिनिफाई करना कब फ़ायदेमंद नहीं होता?

अगर कोई फ़ाइल पहले से मिनिफाइड है, तो आम तौर पर उसे दोबारा मिनिफाई करना फ़ायदेमंद नहीं होता। दूसरी बार प्रोसेस करने से बहुत कम या कोई बचत नहीं हो सकती, जबकि बिल्ड आउटपुट को ट्रेस करना कठिन हो सकता है और मौजूदा सोर्स मैप में बाधा भी आ सकती है।

केवल मशीन द्वारा पढ़े जाने वाले JavaScript को पहले सुंदर फ़ॉर्मैट में लाने और फिर मिनिफाई करने का भी खास कारण नहीं है। रखरखाव के लिए पढ़ने योग्य सोर्स रखें और उसी से डिप्लॉयमेंट आर्टिफ़ैक्ट बनाएं। किसी स्थापित ऐप्लिकेशन के लिए esbuild, Rollup या webpack जैसा बिल्ड टूल आम तौर पर अधिक उपयुक्त होता है, क्योंकि वह मॉड्यूल बंडलिंग और सोर्स-मैप जनरेशन को ऑटोमेट कर सकता है। मिनिफिकेशन उसमें पहले से शामिल हो सकता है या कॉन्फ़िगरेशन अथवा प्लगइन के ज़रिए जोड़ा जा सकता है, जबकि Terser एक समर्पित मिनिफायर है।

मिनिफिकेशन को ऑब्फ़स्केशन या एक्सेस कंट्रोल न समझें। फ़ंक्शन और वेरिएबल के नाम दिखाई दे सकते हैं, स्ट्रिंग लिटरल अब भी पढ़े जा सकते हैं और ब्राउज़र के डेवलपर टूल कॉम्पैक्ट कोड को फिर से फ़ॉर्मैट कर सकते हैं। सीक्रेट, प्राइवेट की और विशेषाधिकार वाले क्रेडेंशियल कभी भी क्लाइंट-साइड JavaScript में एम्बेड न करें।

अगर आप किसी पेज की सभी स्टैटिक एसेट तैयार कर रहे हैं, तो CSS मिनिफायर और HTML मिनिफायर उन फ़ॉर्मैट पर संबंधित प्रक्रिया लागू कर सकते हैं। हर फ़ॉर्मैट के लिए उसका अपना टूल इस्तेमाल करें, क्योंकि उनके पार्सिंग और व्हाइटस्पेस नियम अलग हैं।

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

क्या यह टूल सोर्स मैप बनाता है?

नहीं, कोई सोर्स-मैप फ़ील्ड नहीं लौटाया जाता। अगर प्रोडक्शन स्टैक ट्रेस को मूल फ़ाइलों से मैप करना है, तो मिनिफाइड स्क्रिप्ट और उससे मेल खाने वाली .map फ़ाइल एक ही बिल्ड प्रक्रिया में बनाएं। किसी दूसरे बिल्ड का सोर्स मैप डिप्लॉय करने पर लाइन और कॉलम के गलत संदर्भ मिल सकते हैं।

क्या मिनिफिकेशन से लोग मेरा JavaScript कॉपी नहीं कर पाएंगे?

नहीं। ब्राउज़र को चलने योग्य क्लाइंट-साइड कोड प्राप्त करना होता है, इसलिए कोई भी विज़िटर उसे डाउनलोड करके जांच सकता है। मिनिफिकेशन सोर्स को पढ़ना कठिन बनाता है, लेकिन यह गोपनीयता, लाइसेंस लागू करने या एम्बेड किए गए सीक्रेट की सार्थक सुरक्षा नहीं देता।

क्या API key वाला कोड यहां पेस्ट कर सकता हूं?

सीक्रेट API key, टोकन या निजी क्रेडेंशियल पेस्ट न करें। इनपुट HTTPS के ज़रिए भेजा जाता है और स्टोर नहीं होता, लेकिन प्रोसेसिंग सर्वर पर होती है। हर विज़िटर को जानबूझकर दी जाने वाली सार्वजनिक ब्राउज़र key पर भी डोमेन, ओरिजिन, कोटा या अनुमति संबंधी पाबंदियां लगानी चाहिए, जहां संबंधित सेवा इसकी सुविधा देती हो।

क्या कैरेक्टर कम होने से पेज हमेशा तेज़ लोड होगा?

नहीं। इसका असर मूल फ़ाइल साइज़, कैशिंग, कनेक्शन की स्थिति, सर्वर कम्प्रेशन और ब्राउज़र को कितना JavaScript पार्स तथा एक्ज़ीक्यूट करना है, इन सभी पर निर्भर करता है। कैरेक्टर की कुल संख्या के साथ कम्प्रेस्ड ट्रांसफ़र साइज़ और रनटाइम व्यवहार भी जांचें।

मिनिफाई करने के बाद भी .js एक्सटेंशन रखना चाहिए?

हां। मिनिफाइड JavaScript में आम तौर पर .js एक्सटेंशन ही रहता है। जब दोनों वर्ज़न मौजूद हों, तो नामकरण के लिए .min.js का इस्तेमाल किया जाता है। डिप्लॉयमेंट से पहले पुष्टि करें कि सर्वर उपयुक्त JavaScript कंटेंट टाइप भेज रहा है और HTML या मॉड्यूल इम्पोर्ट सही फ़ाइल की ओर इशारा करता है।