HTML Minifier

HTML मिनिफ़िकेशन क्या है?

HTML मिनिफ़िकेशन एक HTML दस्तावेज़ का आकार कम करने की प्रक्रिया है, ब्राउज़र की rendering को प्रभावित किए बिना। एक HTML मिनिफ़ायर उन वर्णों को हटाता है जो केवल डेवलपर पठनीयता के लिए होते हैं: टैग्स के बीच व्हाइटस्पेस, कमेंट, वैकल्पिक क्लोज़िंग टैग, और अनावश्यक एट्रिब्यूट मान। आउटपुट कार्यात्मक रूप से सोर्स के समान होता है, लेकिन बाइट साइज़ में छोटा होता है, जिसका अर्थ है उपयोगकर्ताओं के लिए तेज़ डाउनलोड और कम time-to-first-paint।

ब्राउज़र HTML को DOM ट्री में पार्स करते हैं और उस प्रक्रिया के दौरान अधिकांश व्हाइटस्पेस को छोड़ देते हैं। दो div टैग्स के बीच स्पेस और कई लाइन ब्रेक्स का रेंडर किए गए पेज पर कोई दृश्य प्रभाव नहीं होता। कमेंट भी पार्सर द्वारा अनदेखे किए जाते हैं। मिनिफ़िकेशन इन नियमों का लाभ उठाता है और वह सब हटा देता है जिसे पार्सर वैसे भी छोड़ देता, ताकि उसे नेटवर्क पर कभी ट्रांसफर न करना पड़े।

HTML मिनिफ़िकेशन से बचत दस्तावेज़ के अनुसार अलग-अलग होती है। कमेंट से भरे टेम्पलेट, गहरे इंडेंटेशन वाले सर्वर-रेंडर्ड पेज, और inline स्टाइल वाले CMS आउटपुट में अकेले मिनिफ़िकेशन से 15-30% साइज़ की कमी होती है। छोटे दस्तावेज़ों के लिए पूर्ण बचत मामूली होती है, लेकिन हाई-ट्रैफिक साइट्स पर प्रत्येक पेज लोड पर कुछ किलोबाइट भी लाखों अनुरोधों में वास्तविक बैंडविड्थ बचत बन जाते हैं।

इस HTML Minifier का उपयोग क्यों करें?

अपना HTML पेस्ट करें और तुरंत मिनिफ़ाइड आउटपुट पाएं। कोई बिल्ड टूल इंस्टॉल नहीं, कोई कॉन्फ़िगरेशन फ़ाइल नहीं, कोई अकाउंट नहीं।

HTML Minifier के उपयोग के मामले

HTML मिनिफ़िकेशन क्या हटाता है

एक full-featured HTML मिनिफ़ायर व्हाइटस्पेस हटाने से परे कई ट्रांसफॉर्मेशन लागू करता है। नीचे दी गई तालिका सबसे सामान्य तकनीकों को सूचीबद्ध करती है, सबसे सुरक्षित (हमेशा lossless) से लेकर सबसे आक्रामक (अंधाधुंध लागू करने पर edge cases तोड़ सकती है)।

मिनिफ़िकेशन बनाम Gzip कम्प्रेशन

डेवलपर कभी-कभी पूछते हैं कि क्या मिनिफ़िकेशन अभी भी ज़रूरी है जब सर्वर पहले से Gzip या Brotli कम्प्रेशन लागू करता है। संक्षिप्त उत्तर: हाँ, और वे दोनों मिलकर सबसे अच्छा काम करते हैं।

मिनिफ़िकेशन उस इनपुट को कम करता है जिसे Gzip प्रोसेस करता है, इसलिए कम्प्रेस्ड आउटपुट भी छोटा होता है। Google की PageSpeed गाइडलाइन दोनों लागू करने की सलाह देती है। एक सामान्य पेज पर, मिनिफ़िकेशन raw साइज़ का 15-25% बचाता है और Gzip परिणाम को और 60-80% कम्प्रेस करता है। मिलाकर, कुल ट्रांसफर साइज़ मूल अनमिनिफ़ाइड, अनकम्प्रेस्ड दस्तावेज़ के 10-20% तक गिर सकता है।

कोड उदाहरण

नीचे चार वातावरणों में HTML मिनिफ़िकेशन के कार्यशील उदाहरण दिए गए हैं। प्रत्येक उदाहरण कमेंट हटाता है और व्हाइटस्पेस संक्षिप्त करता है।

import { minify } from 'html-minifier-terser'

const html = `
  <div class="card">
    <!-- user profile -->
    <p>  Hello, world!  </p>
  </div>
`

const result = await minify(html, {
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeEmptyAttributes: true,
})
// → '<div class="card"><p>Hello, world!</p></div>'

import htmlmin

html = """
<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>
"""

result = htmlmin.minify(html, remove_comments=True, remove_empty_space=True)
# → '<div class="card"><p>Hello, world!</p></div>'

package main

import (
    "fmt"
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/html"
)

func main() {
    m := minify.New()
    m.AddFunc("text/html", html.Minify)

    input := `<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>`

    result, _ := m.String("text/html", input)
    fmt.Println(result)
    // → <div class=card><p>Hello, world!</div>
}

# Install globally
npm install -g html-minifier-terser

# Minify a file
html-minifier-terser --collapse-whitespace --remove-comments input.html -o output.html

# Pipe from stdin
cat index.html | html-minifier-terser --collapse-whitespace --remove-comments

# With all common optimizations
html-minifier-terser \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --remove-empty-attributes \
  --minify-css true \
  --minify-js true \
  input.html -o output.min.html

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