CSS मिनिफायर क्या है?

CSS Minifier आपके CSS से व्हाइटस्पेस, कमेंट्स और गैर-ज़रूरी सिंटैक्स हटाकर उसे कम्प्रेस करता है। छोटी फाइलें तेज़ डाउनलोड होती हैं और आपका PageSpeed स्कोर बढ़ाती हैं।

अंदर मिनिफ़ायर CSSO एल्गोरिदम चलाता है, जो सिर्फ़ ख़ाली जगह हटाने तक सीमित नहीं है। यह एक ही सेलेक्टर वाले लगातार नियम जोड़ देता है, शॉर्टहैंड में दोहराव हटाता है (margin: 10px 10px 10px 10px → margin: 10px), अब बेकार पड़े वेंडर प्रिफ़िक्स निकाल देता है, और जहाँ संभव हो छह अंकों के HEX रंगों को तीन अंकों में सिकोड़ देता है।

उपयोग कैसे करें

1. अपना CSS कोड इनपुट एरिया में पेस्ट करें, .css फाइल अपलोड करें, या किसी URL से सीधे स्टाइलशीट लोड करें।
2. Minify पर क्लिक करें — टूल कमेंट्स, व्हाइटस्पेस हटाएगा और वैल्यूज़ को संक्षिप्त करेगा।
3. मिनिफाइड आउटपुट कॉपी करें या .css फाइल के रूप में डाउनलोड करें। दिखाए गए कम्प्रेशन रेशियो की जाँच करें।

कब उपयोग करें

• बिना build स्टेप वाली स्टैटिक साइट के लिए प्रोडक्शन स्टाइलशीट तैयार करना।
• एक CSS के दो वर्शन तुलना कर देखना कि हाथ से लिखे कोड में कितना दोहराव छिपा है।
• HTML head में critical CSS इनलाइन करते समय आख़िरी बाइट तक बचाना।

परिणाम

कमेंट्स और फॉर्मेटिंग वाली 24KB की स्टाइलशीट 16KB तक मिनिफाई होती है — 33% की कमी जो 3G कनेक्शन पर लोड टाइम से 50ms बचाती है।

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

क्या मिनीफ़ाई किया हुआ CSS असली से अलग रेंडर होता है?

ब्राउज़र मिनीफ़ाई किए और फ़ॉर्मैट किए CSS को बिल्कुल एक तरह से समझते हैं। कैस्केड, विशिष्टता और गणित में आए स्टाइल पहले जैसे ही रहते हैं। बस फ़ाइल का साइज़ डिस्क और नेटवर्क पर छोटा हो जाता है।

क्या ऊपर से gzip भी लगाना चाहिए?

हाँ। मिनिफ़िकेशन के ऊपर gzip और 60-80% साइज़ बचाता है। ज़्यादातर CDN gzip अपने आप लगा देते हैं। पहले मिनीफ़ाई करना तब भी फ़ायदेमंद रहता है क्योंकि gzip दोहरावदार पैटर्न को बेहतर दबाता है।

क्या मिनिफ़िकेशन मेरे source map तोड़ देगा?

यह टूल एक CSS स्ट्रिंग पर काम करता है, build ग्राफ़ पर नहीं, इसलिए source map नहीं बनाता। अगर map चाहिए तो esbuild या Vite जैसा बंडलर इस्तेमाल करें, जो मिनीफ़ाइड CSS के साथ .css.map देता है।

मिनीफ़ाई हुई फ़ाइल में कुछ स्पेस क्यों रह जाते हैं?

CSS स्ट्रिंग वैल्यू के भीतर, सेलेक्टर के हिस्सों के बीच (.a .b और .a.b अलग हैं), और calc() में स्पेस का अर्थ होता है। मिनिफ़ायर सिर्फ़ बेमतलब स्पेस हटाता है, बाक़ी छोड़ देता है।

क्या कस्टम प्रॉपर्टी (CSS वेरिएबल) वाला CSS मिनीफ़ाई करना सुरक्षित है?

हाँ। कस्टम प्रॉपर्टी के नाम और मान वैसे ही रहते हैं, मिनिफ़ायर सिर्फ़ उनके आसपास का फ़ॉर्मैट सिकोड़ता है। --brand-color जैसे वेरिएबल जैसे आपने लिखे वैसे ही रहते हैं और var() में काम करते रहते हैं।

संबंधित उपकरण