CSS Minifier

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

CSS मिनिफ़िकेशन वह प्रक्रिया है जिसमें स्टाइलशीट के व्यवहार को बदले बिना सभी अनावश्यक वर्ण हटा दिए जाते हैं। इसमें रिक्त स्थान, लाइन ब्रेक, टिप्पणियाँ, और redundant syntax जैसे अंतिम सेमीकोलन और अनावश्यक quotes हटाए जाते हैं। ब्राउज़र संकुचित CSS को मूल के समान ही पार्स करता है। W3C CSS Syntax Module व्याकरण परिभाषित करता है; टोकनों के बीच रिक्त स्थान वैकल्पिक होता है सिवाय जहाँ यह पहचानकर्ताओं को अलग करता है। मिनिफ़िकेशन इसका लाभ उठाकर सब कुछ न्यूनतम आवश्यक वर्णों तक संकुचित कर देता है।

एक ऑनलाइन CSS मिनिफ़ायर आपकी फ़ॉर्मैटेड स्टाइलशीट को ट्रांसफर साइज़ के लिए अनुकूलित संस्करण में बदल देता है। सामान्य बचत 15% से 40% तक होती है, यह इस बात पर निर्भर करता है कि स्रोत में कितना रिक्त स्थान और कितनी टिप्पणियाँ हैं। 50 KB की स्टाइलशीट के लिए, इसका अर्थ है प्रत्येक पेज लोड पर नेटवर्क से 7–20 KB कम बाइट भेजना। सर्वर पर gzip या Brotli संपीड़न के साथ मिलाने पर, मिनिफ़िकेशन अंतिम ट्रांसफर साइज़ को और घटाता है क्योंकि पहले से संकुचित CSS का संपीड़ित आउटपुट फ़ॉर्मैटेड मूल को संपीड़ित करने से छोटा होता है।

मिनिफ़िकेशन फ्रंट-एंड बिल्ड पाइपलाइन में एक मानक चरण है। cssnano, clean-css, और esbuild जैसे टूल बिल्ड के भाग के रूप में मिनिफ़िकेशन चलाते हैं। लेकिन विकास के दौरान, आपको अक्सर परीक्षण के लिए एकल स्निपेट संकुचित करना पड़ता है, महत्वपूर्ण CSS ब्लॉक को इनलाइन करना होता है, या बंडल कॉन्फ़िगरेशन में जोड़ने से पहले स्टाइलशीट का संकुचन जाँचना होता है। यहीं पर ब्राउज़र-आधारित CSS मिनिफ़ायर उपयोगी है: CSS चिपकाएँ, संकुचित आउटपुट पाएँ, कॉपी करें, और आगे बढ़ें।

/* Main navigation styles */
.nav {
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1e293b;
}

/* Links inside nav */
.nav a {
  color: #e2e8f0;
  text-decoration: none;
  margin-right: 1.5rem;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: #818cf8;
}

.nav{display:flex;align-items:center;padding:1rem 2rem;background-color:#1e293b}.nav a{color:#e2e8f0;text-decoration:none;margin-right:1.5rem;transition:color .2s ease}.nav a:hover{color:#818cf8}

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

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

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

CSS मिनिफ़िकेशन तकनीकें

एक CSS मिनिफ़ायर फ़ाइल आकार कम करने के लिए कई रूपांतरण लागू करता है। प्रत्येक स्रोत में एक अलग प्रकार की अतिरेकता को लक्षित करता है। नीचे दी गई तालिका मुख्य तकनीकों और फ़ॉर्मैटेड स्टाइलशीट पर उनकी सामान्य बचत सूचीबद्ध करती है:

बचत का प्रतिशत इनपुट के अनुसार भिन्न होता है। भारी टिप्पणी वाली फ़ाइलें टिप्पणी हटाने से अधिक लाभ पाती हैं, जबकि पहले से संकुचित फ़ाइलें कम लाभ देखती हैं। सबसे विश्वसनीय लाभ रिक्त स्थान हटाने और shorthand अनुकूलन से आते हैं। cssnano जैसे उन्नत मिनिफ़ायर डुप्लिकेट सेलेक्टर भी मर्ज करते हैं, longhand प्रॉपर्टी को shorthands में संकुचित करते हैं (margin-top + margin-right + margin-bottom + margin-left को margin में), और ओवरराइड किए गए declarations हटाते हैं।

मिनिफ़िकेशन बनाम Gzip संपीड़न

मिनिफ़िकेशन और संपीड़न पूरक हैं, परस्पर विनिमेय नहीं। वे अलग-अलग स्तरों पर काम करते हैं और एक-दूसरे के ऊपर स्तरित होते हैं:

कोड उदाहरण

विभिन्न भाषाओं और वातावरणों में CSS को प्रोग्रामेटिक रूप से संकुचित करने का तरीका:

import postcss from 'postcss'
import cssnano from 'cssnano'

const input = `
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* TODO: update color */
}
`

const result = await postcss([cssnano]).process(input, { from: undefined })
console.log(result.css)
// → ".nav{display:flex;padding:0 1rem;color:#fff}"

import csscompressor

css = """
.nav {
  display: flex;
  padding: 0px 1rem;
  color: #ffffff;
  /* navigation styles */
}
"""

minified = csscompressor.compress(css)
print(minified)
# → ".nav{display:flex;padding:0 1rem;color:#fff}"

package main

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

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

	input := ".nav { display: flex; padding: 0px 1rem; color: #ffffff; }"
	output, _ := m.String("text/css", input)
	fmt.Println(output)
	// → ".nav{display:flex;padding:0 1rem;color:#fff}"
}

# Using cssnano via PostCSS CLI
npx postcss styles.css --use cssnano -o styles.min.css

# Using clean-css CLI
npx clean-css-cli styles.css -o styles.min.css

# Quick one-liner with Node.js
node -e "const CleanCSS=require('clean-css');console.log(new CleanCSS().minify('body { margin: 0px; }').styles)"
# → "body{margin:0}"

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