CSS मिनिफ़ाई करें

बाइट असल में कहां बचती हैं

ज़्यादातर बचत ख़ाली जगह और कमेंट से होती है, जो हाथ से लिखी स्टाइलशीट में काफ़ी होती है — इंडेंटेशन, नियमों के बीच की ख़ाली लाइनें, और वे सेक्शन हेडर जिनसे बड़ी फ़ाइल में रास्ता मिलता है, सर्व होने के बाद सब बेकार बोझ हैं। इसके अलावा वैल्यू ऐसे छोटी की जाती हैं जिनसे उनका मतलब नहीं बदल सकता: #ffffff लिखा रंग #fff बन जाता है, 0px बन जाता है 0 क्योंकि शून्य को यूनिट की ज़रूरत नहीं, 0.5em का आगे वाला शून्य हट जाता है, और margin: 10px 10px 10px 10px सिमटकर margin: 10px हो जाता है।

जोखिम वाले काम जान-बूझकर नहीं किए जाते। एक जैसे डिक्लेरेशन वाले नियमों को मिलाना या उनका क्रम बदलना cascade को बदल देता है — और cascade CSS का वह हिस्सा है जहां बराबर specificity वाले दो नियमों में फ़ैसला इस बात से होता है कि कौन बाद में आया। जो मिनिफ़ायर आक्रामक तरीक़े से क्रम बदलता है, वह फ़ाइल छोटी कर देगा और बड़ी स्टाइलशीट में पेज को थोड़ा अलग भी। डुप्लिकेट डिक्लेरेशन भी अक्सर जान-बूझकर रखे जाते हैं, पुराने ब्राउज़र के लिए fallback के तौर पर, जो दूसरे को अनदेखा कर देते हैं।

नेस्टेड नियम और नई media range सिंटैक्स को मिनिफ़ाई करने की बजाय मना कर दिया जाता है, और इसकी वजह बताना ज़रूरी है क्योंकि ज़्यादातर टूल इसका उल्टा करते हैं। इसके पीछे का पार्सर इन दोनों फ़ीचर्स से पुराना है, और जब उसे कुछ समझ नहीं आता तो वह एरर नहीं देता — उसे चुपचाप मिटा देता है, इसलिए नेस्टेड ब्लॉक आउटपुट से बस ग़ायब हो जाता है और पेज की वह स्टाइलिंग चली जाती है जिसकी किसी ने ख़बर नहीं दी। फ़ाइल को मना करना ही ईमानदार जवाब है। अगर आपकी स्टाइलशीट में नेटिव नेस्टिंग या @media (400px <= width <= 700px) है, तो नीचे दिए गए टूल में से कोई इस्तेमाल करें।

मार्कअप की तरह यहां भी नतीजे को कंप्रेशन के बाद परखें। स्टाइलशीट gzip या brotli से कंप्रेस होकर सर्व होती हैं, और ये एल्गोरिद्म दोहराई गई ख़ाली जगह को पहले से ही बहुत अच्छे से संभालते हैं — इसलिए जो फ़ाइल मिनिफ़ाई होकर 30 प्रतिशत छोटी होती है, वह नेटवर्क पर शायद सिर्फ़ 5 प्रतिशत छोटी हो। बचत असली है, पर बड़े आंकड़े से कम।

जब आपको कुछ और चाहिए

नई स्टाइलशीट के लिए सही टूल Lightning CSS है: यह नेस्टिंग, media range, color functions और पिछले कुछ सालों में जुड़ी हर चीज़ समझता है, किसी भी पुराने टूल से ज़्यादा मिनिफ़ाई करता है, और साथ-साथ नई सिंटैक्स को पुराने ब्राउज़र के लिए transpile भी कर देता है। esbuild --minify style.css लगभग उतना ही अच्छा और बहुत तेज़ है। दोनों की जगह ब्राउज़र टैब नहीं, बिल्ड स्टेप है।

इससे कहीं बड़ा फ़ायदा आम तौर पर उन नियमों को हटाने से होता है जिनका आप इस्तेमाल ही नहीं कर रहे। utility फ़्रेमवर्क या component library पर बनी साइट अक्सर ऐसी स्टाइलशीट भेजती है जिसका ज़्यादातर हिस्सा पेज की किसी चीज़ पर लागू ही नहीं होता — और PurgeCSS, या फ़्रेमवर्क का अपना बिल्ड, उसे दस गुना तक घटा देगा। बेकार CSS को मिनिफ़ाई करने से बेकार CSS छोटी हो जाती है; असली इलाज उसे मिटाना है।