प्रोडक्शन के लिए छोटी फ़ाइलें, डीबगिंग के लिए पढ़ने लायक कोड
यह minifier प्रोडक्शन के लिए CSS, JavaScript और HTML को छोटा करता है और ठीक-ठीक दिखाता है कि आपने कितना बचाया: मूल साइज़, minified साइज़ और gzip के बाद का साइज़, जो आपके विज़िटर असल में डाउनलोड करते हैं। JavaScript को terser से minify किया जाता है, जिसे ज़्यादातर आधुनिक बिल्ड टूल इस्तेमाल करते हैं, और CSS को csso से, जो डुप्लिकेट नियमों को भी मिला देता है। Beautify पर स्विच करके minified बंडल या स्टाइलशीट को फिर से इंडेंट किए हुए, पढ़ने लायक कोड में बदलें। आपका कोड आपके ब्राउज़र में प्रोसेस होता है और कभी अपलोड नहीं होता।
कोड को minify या beautify कैसे करें
- 1भाषा चुनें: CSS, JavaScript या HTML। इनपुट पर
.css,.jsया.htmlफ़ाइल छोड़ने पर यह अपने आप चुन ली जाती है। - 2कोड छोटा करने के लिए Minify या उसे फ़ॉर्मैट करने के लिए Beautify चुनें।
- 3विकल्प सेट करें: JavaScript में नाम छोटे करने हैं या नहीं और कंप्रेस करना है या नहीं; CSS में नियमों को पुनर्गठित करना है या नहीं; HTML में इनलाइन स्टाइल और स्क्रिप्ट minify करनी हैं या नहीं। लाइसेंस कमेंट तब तक रखे जाते हैं जब तक आप इसे बंद न करें।
- 4gzip से पहले और बाद की बचत देखने के लिए नतीजे के नीचे साइज़ देखें।
- 5आउटपुट कॉपी करें या उसे
.min.js,.min.cssया.htmlके रूप में डाउनलोड करें।
Minification क्या करता है
Minification वह सब हटा देता है जिसकी ब्राउज़र को कोड चलाने के लिए ज़रूरत नहीं होती: कमेंट, इंडेंटेशन, लाइन ब्रेक और वैकल्पिक सेमीकोलन। अच्छे minifier इससे आगे जाते हैं। terser लोकल वेरिएबल्स को एक अक्षर वाले नामों में बदलता है (mangling), न पहुँचने वाला कोड हटाता है, स्थिर एक्सप्रेशन पहले से गणना करता है और if स्टेटमेंट को ternary में छोटा करता है। csso रंगों को छोटा करता है (#ff0000 बन जाता है red), शून्य मानों की इकाइयाँ हटाता है, और एक जैसे डिक्लेरेशन या सेलेक्टर वाले नियमों को मिला देता है।
नतीजा बिल्कुल मूल कोड की तरह काम करता है, लेकिन कंप्रेशन से पहले आमतौर पर JavaScript के लिए 30–70% और CSS के लिए 15–40% छोटा होता है।
gzip साइज़ क्यों मायने रखता है
वेब सर्वर और CDN टेक्स्ट फ़ाइलें भेजने से पहले उन्हें gzip या Brotli से कंप्रेस करते हैं, इसलिए लोड टाइम पर असर कंप्रेस्ड साइज़ का पड़ता है, कच्चे साइज़ का नहीं। कंप्रेशन पहले ही वह बहुत-सा दोहराव हटा देता है जिसे minification निशाना बनाता है, इसीलिए minification की 60% बचत gzip के बाद 20% रह सकती है। फिर भी हर पेज व्यू पर यह फ़ायदेमंद है, और खासकर mangling कंप्रेशन के बाद भी फ़ायदा देता रहता है।
यहाँ gzip का आंकड़ा लेवल 6 पर है, जो nginx और ज़्यादातर सर्वरों का डिफ़ॉल्ट है। Brotli आमतौर पर 10–20% और छोटा होता है।
विकल्पों की जानकारी
- नाम छोटे करें
- लोकल वेरिएबल्स और फ़ंक्शन पैरामीटर के नाम छोटे कर देता है। ग्लोबल नाम और ऑब्जेक्ट प्रॉपर्टी कभी नहीं बदली जातीं, इसलिए दूसरी स्क्रिप्ट जिस कोड को कॉल करती हैं वह काम करता रहता है।
- कंप्रेस करें
- JavaScript के लिए terser के ऑप्टिमाइज़ेशन पास: डेड कोड हटाना, constant folding, inlining। CSS के लिए csso का पुनर्गठन, जो सुरक्षित होने पर नियमों को मिलाता और उनका क्रम बदलता है।
- लाइसेंस कमेंट रखें
- उन कमेंट को रखता है जो /*! से शुरू होते हैं या जिनमें @license या @preserve होता है, जिन्हें कई ओपन-सोर्स लाइसेंस बनाए रखना ज़रूरी मानते हैं।
- इनलाइन CSS और JS
- HTML में <style> और <script> एलिमेंट की सामग्री और style एट्रिब्यूट को minify करता है। JSON-LD ब्लॉक भी कॉम्पैक्ट किए जाते हैं; दूसरे टाइप की स्क्रिप्ट को छेड़ा नहीं जाता।
- एट्रिब्यूट के कोट हटाएँ
- जहाँ HTML अनुमति देता है वहाँ class="nav" की जगह class=nav लिखता है। यह मान्य HTML है, लेकिन कुछ XML टूल और टेम्पलेटिंग सिस्टम इसे पसंद नहीं करते, इसलिए यह डिफ़ॉल्ट रूप से बंद है।
HTML कैसे minify होता है
यहाँ HTML minification जानबूझकर सावधानी से किया जाता है। कमेंट हटा दिए जाते हैं, सिवाय Internet Explorer के conditional comments के। लगातार खाली जगह एक स्पेस में बदल दी जाती है, और <div> व <p> जैसे ब्लॉक एलिमेंट के पास की खाली जगह, जो कभी दिखती नहीं, हटा दी जाती है। इनलाइन एलिमेंट के बीच हमेशा एक स्पेस रखा जाता है, क्योंकि उसे हटाने से <b>big</b> <i>world</i> एक शब्द बन जाएगा। <pre> और <textarea> की सामग्री को कभी नहीं छुआ जाता।
अगर किसी इनलाइन स्क्रिप्ट में सिंटैक्स एरर है, तो पूरा पेज फ़ेल होने के बजाय उसे बिल्कुल वैसे ही छोड़ दिया जाता है और आपको बताया जाता है कि एरर किस लाइन पर है।
Minified कोड को beautify करना
Beautify कोड को फिर से इंडेंट करने के लिए js-beautify का इस्तेमाल करता है: JavaScript में हर लाइन पर एक स्टेटमेंट, CSS में हर लाइन पर एक डिक्लेरेशन और HTML में नेस्टेड इंडेंटेशन। किसी minified थर्ड-पार्टी स्क्रिप्ट को पढ़ने या ब्राउज़र से कॉपी की गई स्टाइलशीट को समझने का यह सबसे तेज़ तरीका है। Minifier द्वारा हटाए गए मूल वेरिएबल नाम या कमेंट वापस नहीं आ सकते, लेकिन संरचना समझना आसान हो जाता है।
दूसरे फ़ॉर्मैट के लिए JSON फ़ॉर्मैटर और SQL फ़ॉर्मैटर देखें।
अक्सर पूछे जाने वाले सवाल
- क्या मेरा कोड कहीं अपलोड होता है?
- नहीं। terser, csso और js-beautify आपके ब्राउज़र में चलते हैं, इसलिए आपका कोड आपके डिवाइस पर ही रहता है।
- क्या minified JavaScript अब भी काम करेगा?
- हाँ। terser सिर्फ़ ऐसे बदलाव करता है जो व्यवहार को बनाए रखते हैं। जो कोड रनटाइम पर फ़ंक्शन या क्लास के नामों पर निर्भर करता है, जैसे कुछ dependency injection फ़्रेमवर्क, उसके लिए नाम छोटे करना बंद करना पड़ सकता है।
- क्या यह आधुनिक JavaScript और ES modules सपोर्ट करता है?
- हाँ। terser आधुनिक सिंटैक्स समझता है, जिसमें classes, async/await, optional chaining और top-level await शामिल हैं। import या export स्टेटमेंट वाली फ़ाइलें ES modules के रूप में minify होती हैं।
- क्या यह TypeScript या JSX को minify कर सकता है?
- नहीं। पहले TypeScript या JSX को JavaScript में कंपाइल करें, फिर आउटपुट को minify करें। अगर कोड सादा JavaScript नहीं है, तो लाइन और कॉलम के साथ सिंटैक्स एरर दिखाया जाता है।
- Minify करने और gzip में क्या फ़र्क है?
- Minify करना कोड को ही छोटा करके दोबारा लिखता है। Gzip एक कंप्रेशन है जो सर्वर किसी भी फ़ाइल को भेजते समय लगाता है। दोनों साथ काम करते हैं: पहले minify करें, फिर सर्वर को कंप्रेस करने दें।
- क्या मैं JavaScript या CSS को unminify कर सकता हूँ?
- हाँ। Minified कोड को फिर से इंडेंट करने के लिए Beautify चुनें। मूल वेरिएबल नाम और कमेंट वापस नहीं आ सकते, लेकिन संरचना पढ़ने लायक हो जाती है।
- मेरे CSS के नियम मिलाए या उनका क्रम क्यों बदला जा रहा है?
- यह csso का पुनर्गठन है, जो एक जैसे डिक्लेरेशन या सेलेक्टर वाले नियमों को मिला देता है। सामान्य स्टाइलशीट के लिए यह सुरक्षित है; अगर आप समान specificity वाले सेलेक्टर के बीच नियमों के सटीक क्रम पर निर्भर हैं, तो कंप्रेस करें बंद कर दें।