CSS कवरेज और अप्रयुक्त शैलियाँ
DevTools के Coverage पैनल और PurgeCSS जैसे ट्री-शेकिंग उपकरणों से अप्रयुक्त CSS पहचानें और हटाएँ।
CSS कवरेज और अप्रयुक्त शैलियाँ, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
अप्रयुक्त CSS की समस्या
बड़ी CSS फ़ाइलों में अक्सर उन घटकों की शैलियाँ होती हैं जो वर्तमान पेज पर मौजूद नहीं होते। हर अप्रयुक्त बाइट पार्स समय, CSSOM निर्माण समय और स्थानांतरण आकार बढ़ाता है। किसी भी पेज पर सामान्य प्रोडक्शन ऐप में 90% या उससे अधिक CSS अप्रयुक्त हो सकती है।
क्रोम DevTools कवरेज
DevTools → कवरेज पैनल खोलें (Cmd+Shift+P → कवरेज)। रिकॉर्डिंग शुरू करें, पेज के साथ इंटरैक्ट करें, फिर रिकॉर्डिंग रोकें। पैनल हर CSS फ़ाइल का उपयोग प्रतिशत दिखाता है और अप्रयुक्त नियमों को लाल रंग में चिह्नित करता है। विश्लेषण के लिए कवरेज डेटा को जेसन के रूप में निर्यात करें।
PurgeCSS
PurgeCSS आपकी HTML, JS और टेम्पलेट फ़ाइलों को स्कैन करके क्लास नाम ढूँढता है और अप्रयुक्त CSS नियमों को हटा देता है। कंटेंट ग्लॉब पैटर्न इस तरह कॉन्फ़िगर करें कि वे उन सभी फ़ाइलों से मेल खाएँ जिनमें क्लास नामों का संदर्भ हो सकता है। JS द्वारा गतिशील रूप से जोड़ी जाने वाली क्लास को सेफ़लिस्ट में रखें, ताकि वे गलती से हटाई न जाएँ।
टेलविंड CSS जेआईटी
टेलविंड का जेआईटी कंपाइलर आपके टेम्पलेट में वास्तव में उपयोग की गई यूटिलिटी क्लास ही बनाता है। परिणामस्वरूप CSS बहुत छोटी होती है — अक्सर पूरे ऐप के लिए 5-15KB — क्योंकि अप्रयुक्त यूटिलिटी कभी बनाई ही नहीं जातीं। यही अप्रयुक्त CSS हटाने का आदर्श परिणाम है।
PurgeCSS कॉन्फ़िगरेशन
वेबपैक या वाइट कॉन्फ़िगरेशन में, सभी टेम्पलेट फ़ाइलों को शामिल करने वाले कंटेंट ग्लॉब पैटर्न के साथ PurgeCSS जोड़ें। सेफ़लिस्ट विकल्प स्ट्रिंग, रेगेक्स और हेडलेस यूआई जैसी लाइब्रेरी से आने वाले जटिल गतिशील क्लास पैटर्न के लिए डीप-सेफ़लिस्ट स्वीकार करता है।
CSS मॉड्यूल का लाभ
CSS मॉड्यूल हर फ़ाइल के लिए विशिष्ट क्लास नाम बनाते हैं और बंडलर कॉन्फ़िगरेशन के साथ अप्रयुक्त मॉड्यूल को ट्री-शेक करते हैं। बंडल में केवल आयात किए गए CSS मॉड्यूल शामिल होते हैं — घटकों के साथ शैलियों का स्वाभाविक सह-स्थितिकरण वैश्विक अप्रयुक्त शैलियों को समाप्त कर देता है।
रूट के अनुसार CSS विभाजन
Next.js जैसे फ़्रेमवर्क में रूट के अनुसार CSS को कोड-स्प्लिट करें (प्रति-पेज CSS निष्कर्षण), या CSS मॉड्यूल के साथ गतिशील आयात का उपयोग करें। हर पेज केवल अपनी शैलियाँ लोड करता है, जिससे कवरेज विश्लेषण पूरे ऐप के बजाय प्रति-पेज करना सार्थक हो जाता है।
लाइटहाउस से मापन
लाइटहाउस का "अप्रयुक्त CSS कम करें" ऑडिट अप्रयुक्त नियमों को हटाने से होने वाली संभावित बाइट बचत का अनुमान लगाता है। यह उन विशिष्ट स्टाइलशीट संसाधनों की पहचान करता है जिनमें अप्रयुक्त सामग्री का प्रतिशत अधिक होता है। पहले किन फ़ाइलों का ऑडिट करना है, यह तय करने के लिए इसे प्राथमिकता मार्गदर्शिका के रूप में उपयोग करें।
गतिशील अवस्थाओं को शामिल करना
कवरेज विश्लेषण रिकॉर्डिंग के दौरान दिखाई देने वाली अवस्थाओं को ही दर्ज करता है। गलत तरीके से उनकी शैलियाँ हटाने से बचने के लिए कवरेज रिकॉर्डिंग के दौरान होवर अवस्थाओं, खुले मोडल, त्रुटि अवस्थाओं और प्रमाणित अवस्थाओं को मैन्युअल रूप से सक्रिय करना आवश्यक है।
मोनोलिथ बनाम प्रति-घटक CSS
फ़ीचर हटाए जाने के बाद मोनोलिथिक वैश्विक स्टाइलशीट में समय के साथ अप्रयुक्त CSS जमा होती जाती है। प्रति-घटक CSS (CSS मॉड्यूल, स्टाइल्ड कंपोनेंट्स, टेलविंड यूटिलिटी) को साफ़ करना आसान होता है, क्योंकि शैलियाँ अपने घटकों के साथ रहती हैं और साथ ही हटाई जाती हैं।
पुराने कोडबेस का ऑडिट
बड़ी पुरानी CSS फ़ाइलों के लिए पहले UnCSS या PurgeCSS को केवल-रिपोर्ट मोड में उपयोग करें। नियमों को उपयोग की आवृत्ति के अनुसार क्रमबद्ध करें। स्पष्ट रूप से अप्रयुक्त विक्रेता प्लगइन शैलियों को अलग करके हटा दें। किनारी अवस्थाओं की शैलियाँ गलती से हटने से बचाने के लिए धीरे-धीरे काम करें।
ज्ञान जाँच
क्रोम DevTools कवरेज पैनल क्या मापता है?
सारांश
CSS कवरेज विश्लेषण के लिए DevTools कवरेज और लाइटहाउस अप्रयुक्त नियमों की पहचान करते हैं। PurgeCSS और टेलविंड जेआईटी निष्क्रिय कोड हटाने की प्रक्रिया स्वचालित करते हैं। CSS मॉड्यूल और प्रति-रूट विभाजन अप्रयुक्त शैलियों को जमा होने से रोकते हैं। साथ मिलकर, ये CSS पेलोड और पार्स समय को न्यूनतम करते हैं।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “CSS कवरेज और अप्रयुक्त शैलियाँ” पाठ निःशुल्क है?
हाँ—“CSS कवरेज और अप्रयुक्त शैलियाँ” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“CSS कवरेज और अप्रयुक्त शैलियाँ” में मैं क्या सीखूँगा?
DevTools के Coverage पैनल और PurgeCSS जैसे ट्री-शेकिंग उपकरणों से अप्रयुक्त CSS पहचानें और हटाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“CSS कवरेज और अप्रयुक्त शैलियाँ” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- महत्वपूर्ण CSS और रेंडर ब्लॉकिंग
- लेआउट, पेंट और कंपोज़िट: रेंडरिंग पाइपलाइन
- will-change और लेयर प्रमोशन
- CSS कवरेज और अप्रयुक्त शैलियाँ