HTML कोड को फ़ॉर्मेट और मिनीफ़ाई कैसे करें

HTML फ़ॉर्मेटिंग और मिनिफिकेशन विपरीत संचालन हैं जो अलग-अलग उद्देश्यों के लिए काम करते हैं। फ़ॉर्मेटिंग कोड को डेवलपर्स के लिए पठनीय बनाती है। मिनिफिकेशन इसे ब्राउज़र के लिए छोटा बनाती है। अधिकांश परियोजनाओं को दोनों की आवश्यकता होती है: विकास में फ़ॉर्मेटेड कोड, उत्पादन में मिनिफाइड कोड। यही बात संबंधित सहोदर उपकरणों पर भी लागू होती है जिनका आप शायद उपयोग करते हैं: CSS फ़ॉर्मेटर/मिनिफायर, JavaScript फ़ॉर्मेटर/मिनिफायर, JSON फ़ॉर्मेटर। पैटर्न समान है; केवल सिंटैक्स भिन्न है।

फ़ॉर्मेटिंग: HTML को पठनीय बनाना

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

पहले:

<div class="card"><h2>शीर्षक</h2><p>यहाँ कुछ पाठ</p><a href="/link">और पढ़ें</a></div>

बाद में:

<div class="card">
  <h2>शीर्षक</h2>
  <p>यहाँ कुछ पाठ</p>
  <a href="/link">और पढ़ें</a>
</div>

HTML को कैसे फ़ॉर्मेट करें

1. अपना HTML पेस्ट करें: फ़ॉर्मेटर में अव्यवस्थित या मिनिफाइड कोड दर्ज करें।
2. अपनी प्राथमिकताएँ सेट करें: इंडेंटेशन आकार (2 या 4 स्पेस) चुनें और क्या इनलाइन टैग संरक्षित रखें।
3. परिणाम कॉपी करें: फ़ॉर्मेटेड HTML आपके संपादक के लिए तैयार है।

मिनिफिकेशन: HTML को छोटा बनाना

एक मिनिफायर वह सब हटा देता है जिसकी ब्राउज़र को आवश्यकता नहीं है: व्हाइटस्पेस, टिप्पणियाँ, वैकल्पिक क्लोजिंग टैग, और अनावश्यक एट्रिब्यूट मान। परिणाम एक एकल, कॉम्पैक्ट स्ट्रिंग है।

HTML को कैसे मिनिफाई करें

1. अपना फ़ॉर्मेटेड HTML पेस्ट करें: इंडेंटेशन, टिप्पणियों, और व्हाइटस्पेस के साथ कोड दर्ज करें।
2. विकल्प कॉन्फ़िगर करें: चुनें कि क्या टिप्पणियाँ हटाएँ, व्हाइटस्पेस संक्षिप्त करें, और एट्रिब्यूट अनुकूलित करें।
3. मिनिफाइड आउटपुट कॉपी करें: इसे अपने उत्पादन बिल्ड में उपयोग करें।

प्रत्येक का उपयोग कब करें

HTML मिनिफिकेशन का एक संक्षिप्त इतिहास

HTML को 1991 में मानव-पठनीय होने के लिए डिज़ाइन किया गया था, इसलिए मूल विनिर्देश (और 1995 में HTML 2.0) में संपीड़न के लिए कोई प्रावधान नहीं था। मिनिफिकेशन का विचार पहले CSS और JavaScript से उत्पन्न हुआ: Douglas Crockford का JSMin (2001) पहला व्यापक रूप से उपयोग किया जाने वाला JavaScript मिनिफायर था, जो डायल-अप उपयोगकर्ताओं के लिए फ़ाइल आकार कम करने के लिए टिप्पणियाँ और व्हाइटस्पेस हटाता था। HTMLMin (npm पैकेज) ने 2009 में अनुसरण किया, फिर 2013 में htmlmin (Python)। आधुनिक बिल्ड टूल (Webpack 2014, Vite 2020, esbuild 2020) HTML मिनिफिकेशन को डिफ़ॉल्ट उत्पादन चरण के रूप में शामिल करते हैं।

Gzip संपीड़न (1999 में HTTP कंटेंट एन्कोडिंग के रूप में पेश किया गया) और Brotli (2015) सर्वर जो भी भेजता है उसे संपीड़ित करते हैं, जिसका मतलब है कि मिनिफाइड HTML लगभग फ़ॉर्मेटेड संस्करण के समान आकार में संपीड़ित होता है। तो मिनिफाई क्यों करें? क्योंकि संपीड़ित मिनिफाइड संस्करण अभी भी संपीड़ित फ़ॉर्मेटेड संस्करण से छोटा है, लगभग 5-15 प्रतिशत। उच्च-यातायात साइट पर लाखों पेज लोड में, यह वास्तविक बैंडविड्थ बचत और धीमे कनेक्शन पर उपयोगकर्ताओं के लिए तेज़ Time-to-First-Byte जोड़ता है।

मिनिफिकेशन वास्तव में क्या हटाता है

मिनिफायर में आप आमतौर पर जो सेटिंग्स देखते हैं:

• व्हाइटस्पेस संक्षिप्त करें: पंक्तियों पर सभी अग्रणी और अनुगामी व्हाइटस्पेस हटाता है और व्हाइटस्पेस के रन को एकल स्पेस (या टैग के बीच शून्य) में कम करता है।
• HTML टिप्पणियाँ हटाएँ: <!-- टिप्पणी --> ब्लॉक हटा दिए जाते हैं (जब तक कि टिप्पणी <!--[if IE]> जैसी सशर्त टिप्पणी न हो जिसका पुराने ब्राउज़र वास्तव में उपयोग करते हैं)।
• वैकल्पिक टैग हटाएँ: HTML5 विशिष्ट संदर्भों में </li>, </p>, </td> और कुछ अन्य को छोड़ने की अनुमति देता है। आक्रामक मिनिफायर इन्हें हटाते हैं।
• अनावश्यक एट्रिब्यूट मान हटाएँ: <input type="text"> <input> बन जाता है (text डिफ़ॉल्ट है)। <form method="get"> <form> बन जाता है।
• छोटे बूलियन एट्रिब्यूट का उपयोग करें: disabled="disabled" disabled बन जाता है।
• इनलाइन CSS और JS को अनुकूलित करें: कुछ मिनिफायर अंतिम पास के रूप में CSS को cssnano के माध्यम से और JavaScript को Terser के माध्यम से चलाते हैं।

आउटपुट अब मानव-पठनीय नहीं है लेकिन इनपुट के साथ कार्यात्मक रूप से समान है।

सामान्य त्रुटियाँ

• <pre> और <textarea> व्हाइटस्पेस मायने रखता है: <pre> ब्लॉक (जो कोड या टेक्स्ट को ठीक उसी तरह दिखाते हैं जैसे लिखा गया है) के अंदर व्हाइटस्पेस संक्षिप्त करना दृश्य फ़ॉर्मेटिंग को तोड़ता है। अधिकांश मिनिफायर डिफ़ॉल्ट रूप से <pre>, <textarea>, और <script> टैग के अंदर व्हाइटस्पेस संरक्षित करते हैं, लेकिन सत्यापित करें कि क्या आपके मिनिफायर में कस्टम कॉन्फ़िग है।
• तर्क को प्रभावित करने वाली टिप्पणियाँ: कुछ बिल्ड पाइपलाइन HTML टिप्पणियों को मार्कर के रूप में उपयोग करती हैं (जैसे, संपत्ति पाइपलाइनों के लिए <!-- inject:scripts -->)। इन्हें हटाने से बिल्ड टूट जाता है। मार्कर टिप्पणियों को संरक्षित करने के लिए मिनिफायर कॉन्फ़िगर करें।
• HTML के अंदर टेम्पलेट सिंटैक्स: Handlebars {{var}}, Nunjucks {% block %}, Jinja {{ }} और समान टेम्पलेट सिंटैक्स एक मिनिफायर को भ्रमित कर सकते हैं जो इसे नहीं जानता। एक मिनिफायर का उपयोग करें जो आपके टेम्पलेट इंजन को पहचानता है, या टेम्पलेट को सादे HTML में रेंडर करने के बाद मिनिफाई करें।
• इनलाइन ईवेंट हैंडलर और JavaScript: आक्रामक मिनिफायर इनलाइन onclick="alert('hi')" को तोड़ सकते हैं यदि वे अंदर के JavaScript को मिनिफाई करने की कोशिश करते हैं। डिफ़ॉल्ट सेटिंग्स आमतौर पर इन्हें छोड़ देती हैं; अपने आउटपुट में सत्यापित करें।
• एन्कोडिंग किनारे के मामले: मिनिफायर जो व्हाइटस्पेस को बहुत आक्रामक तरीके से हटाते हैं, गैर-लैटिन स्क्रिप्ट को तोड़ सकते हैं जहाँ शब्द सीमाएँ सूक्ष्म स्पेसिंग नियमों पर निर्भर करती हैं। अपनी वास्तविक भाषाओं में सामग्री के साथ परीक्षण करें।

एक vs दूसरे का उपयोग कब करें

फ़ॉर्मेटर का उपयोग तब करें जब:

• आप एक मिनिफाइड HTML फ़ाइल विरासत में पाते हैं और संरचना समझने की आवश्यकता है
• आप ऐसे संपादक से पेस्ट करते हैं जो फ़ॉर्मेटिंग हटाता है (कुछ CMSes ऐसा करते हैं)
• आप जोड़ी-प्रोग्रामिंग या कोड समीक्षा कर रहे हैं
• आप डीबग कर रहे हैं और देखने की आवश्यकता है कि टैग कहाँ खुलता या बंद होता है

मिनिफायर का उपयोग तब करें जब:

• आपकी बिल्ड पाइपलाइन पहले से मिनिफाई नहीं करती (अधिकांश आधुनिक करती हैं)
• आप HTML को JSON API प्रतिक्रिया या ईमेल टेम्पलेट में इनलाइन कर रहे हैं
• आप HTML को बाइनरी संपत्ति (एकल-फ़ाइल PDF, डेस्कटॉप ऐप इंस्टॉलर) में बंडल कर रहे हैं
• आप एक स्थिर साइट को संभव सबसे छोटे पृष्ठ वज़न के लिए अनुकूलित कर रहे हैं

गोपनीयता और गोपनीय कोड

फ़ॉर्मेटर और मिनिफायर दोनों पूरी तरह से आपके ब्राउज़र में चलते हैं। आप जो HTML पेस्ट करते हैं वह आपके डिवाइस पर रहता है; कुछ भी अपलोड नहीं किया जाता। यह HTML के लिए मायने रखता है जिसमें गोपनीय सामग्री है: पूर्व-रिलीज़ मार्केटिंग पेज, आंतरिक एडमिन डैशबोर्ड, NDA के तहत क्लाइंट टेम्पलेट, व्यापार तर्क प्रकट करने वाले प्लेसहोल्डर डेटा के साथ आंशिक टेम्पलेट। क्लाउड HTML टूल (अधिकांश ऑनलाइन ब्यूटिफायर) के लिए आपके HTML को उनके सर्वर पर अपलोड करने की आवश्यकता होती है, जो ठीक वही है जिसे आप संवेदनशील मार्कअप के लिए बचना चाहते हैं।

सुझाव

• अपनी बिल्ड प्रक्रिया में स्वचालित करें: अधिकांश बिल्ड टूल (Webpack, Vite, Gulp, Eleventy, Astro) परिनियोजन के दौरान HTML को स्वचालित रूप से मिनिफाई कर सकते हैं। फ़ॉर्मेटेड कोड लिखें, मिनिफाइड कोड भेजें।
• कमिट करने से पहले फ़ॉर्मेट करें: साफ़, सुसंगत फ़ॉर्मेटेड HTML Git diff को पढ़ने में आसान और कोड समीक्षा को तेज़ बनाता है। सेव-टाइम फ़ॉर्मेटिंग के लिए अपने संपादक में Prettier या Beautify के साथ जोड़ें।
• मिनिफिकेशन आपके HTML को नहीं तोड़ेगा: यह केवल वह सामग्री हटाता है जिसका रेंडरिंग पर कोई प्रभाव नहीं होता। टिप्पणियाँ, अतिरिक्त व्हाइटस्पेस, और वैकल्पिक टैग हटाने के लिए सुरक्षित हैं। अपवाद <pre>/<textarea> सामग्री है, जिसे अधिकांश मिनिफायर सही ढंग से संरक्षित करते हैं।
• सिंटैक्स हाइलाइटिंग का उपयोग करें: फ़ॉर्मेटर और मिनिफायर दोनों रंग-कोडित सिंटैक्स हाइलाइटिंग प्रदान करते हैं, जो यह सत्यापित करना आसान बनाता है कि आउटपुट सही है।
• रेंडर किए गए आउटपुट का परीक्षण करें: मिनिफाई करने के बाद, पेज को ब्राउज़र में लोड करें और पुष्टि करें कि यह सही दिखता है। मिनिफिकेशन बग्स आमतौर पर अनुपस्थित सामग्री या टूटे हुए लेआउट के रूप में दिखाई देते हैं।