आप अप्रयुक्त सीएसएस कोड से कैसे छुटकारा पा सकते हैं? भाग 1

लेख के लेखक, अनुवाद का पहला भाग जिसे हम आज प्रकाशित कर रहे हैं, पाठकों को पहले से जानना चाहेंगे कि अनावश्यक सीएसएस से छुटकारा पाना एक मुश्किल काम है। यदि आप किसी उपकरण को खोजने की आशा में इसे पढ़ रहे हैं, तो इसे चलाकर, आप यह पता लगा सकते हैं कि आपके प्रोजेक्ट से CSS कोड सुरक्षित रूप से हटाया जा सकता है या नहीं, ... समान उपकरण हैं, लेकिन उनका उपयोग बहुत सावधानी से किया जाना चाहिए, क्योंकि उनमें से कोई भी नहीं है। अप्रयुक्त सीएसएस के सवाल का एक सभ्य जवाब देने में सक्षम नहीं है ।



यह समझना आसान है कि कोई भी वेब डेवलपर किसी तरह की उपयोगिता लेना चाहता है, उसे चलाता है और अनावश्यक सीएसएस को हटाता है जो यह रिपोर्ट करता है। कुछ मिनट - और साइट त्वरित है। लेकिन इतना सरल नहीं है। इस सामग्री के लेखक का मानना ​​है कि इस तरह के उपकरण को स्वस्थ संदेह के साथ इलाज किया जाना चाहिए। उनमें से कोई भी डेवलपर से झूठ नहीं बोलता। इन उपकरणों में आमतौर पर पर्याप्त जानकारी नहीं होती है जिससे वे ऐसे परिणामों का उत्पादन करने में सक्षम हो सकें जिन पर बिना शर्त भरोसा किया जा सके। लेकिन इसका मतलब यह नहीं है कि ऐसे उपकरणों का उपयोग नहीं किया जा सकता है। इसका मतलब यह नहीं है कि आप किसी भी तरह से अप्रयुक्त सीएसएस से छुटकारा नहीं पा सकते हैं। हम इस पर चर्चा करते हैं।

→ दूसरा भाग पढ़ें

अप्रयुक्त सीएसएस से छुटकारा क्यों?

मेरा मानना ​​है कि अप्रयुक्त सीएसएस से छुटकारा पाने के लिए किसी को मुख्य कारण निम्नलिखित उदाहरण का उपयोग करके वर्णित किया जा सकता है। मान लीजिए कि आप CSS फ्रेमवर्क (जैसे बूटस्ट्रैप) का उपयोग करते हैं और उस ढांचे के लिए सभी सीएसएस कोड आपकी परियोजना में शामिल हो जाते हैं। लेकिन वास्तव में, इस तरह के कोड का केवल एक छोटा सा हिस्सा परियोजना में उपयोग किया जाता है। कैसे सभी अनावश्यक से छुटकारा पाने के लिए?

मैं ऐसी स्थिति में किसी की भावनाओं को महसूस कर सकता हूं। सीएसएस फ्रेमवर्क अक्सर डेवलपर्स को विशिष्ट परियोजनाओं पर लागू होने वाली सुविधाओं का चयन करने के लिए आसान तरीके नहीं देते हैं। उसी समय, एक निश्चित परियोजना के लिए आदर्श रूप से एक राज्य में फ्रेमवर्क के स्रोत कोड को लाने से टीम के अनुभव के स्तर की आवश्यकता हो सकती है जो उसके पास नहीं हो सकती है। अपने आप में एक समान स्थिति ढांचे की खोज का कारण बन सकती है।

मान लीजिए आप सीएसएस के 100 KB डाउनलोड करते हैं। मैं कहूंगा कि बहुत कुछ है। (फिलहाल जब मैं इसे लिखता हूं, तो css-tricks.com CSS के लगभग 23 Kb का उपयोग करता है। काफी पृष्ठ और टेम्पलेट हैं। मैंने CSS का आकार कम करने के लिए कुछ विशेष नहीं किया है।) संदेह है कि आप इस कोड की कुछ राशि का उपयोग नहीं कर रहे हैं। और शायद आपको इसके कुछ सबूत मिल जाएं। मुझे अलार्म बजने का एक कारण दिखाई देता है। अगर आपके पास 100 केबी की एक ऐसी फाइल है, जिसे किसी तरह के टूल से प्रोसेस करके 20 केबी तक कंप्रेस किया जा सकता है, तो यह बढ़िया और काम करने लायक है। लेकिन अगर ऐसा कुछ CSS के साथ किया जाता है, तो यह अधिक महत्वपूर्ण है। मुद्दा यह है कि पृष्ठ लोडिंग की शुरुआत में सीएसएस लोड होता है और एक संसाधन है जो रेंडरिंग को ब्लॉक करता है। JPG फाइलें ऐसे संसाधन नहीं हैं।

Chrome डेवलपर टूल के साथ स्थिति विश्लेषण

Chrome डेवलपर टूल विंडो में एक Coverage टैब है। इसकी मदद से, आप यह पता लगा सकते हैं कि सीएसएस और जावास्क्रिप्ट वास्तव में विश्लेषण किए गए पृष्ठ पर कितने लोड किए गए हैं। उदाहरण के लिए, अब मैं css-tricks.com पर गया। नीचे वह है जो मैंने Coverage टैब पर देखा था।


क्रोम डेवलपर टूल, कवरेज टैब

यहां मैं देखता हूं कि मेरी style.css 70.7% फ़ाइल का उपयोग नहीं किया गया है। मुझे लगता है कि इसमें कुछ भी गलत नहीं है। CSS के शेष अप्रयुक्त भाग का उपयोग साइट के कुछ अन्य पृष्ठों पर किया जाता है। इस साइट पर मैं कुछ बड़े शैली के पुस्तकालय का उपयोग नहीं करता हूं। मैंने खुद सीएसएस की हर पंक्ति को लिखा है, इसलिए मुझे संदेह है कि सीएसएस के 2/3 विश्व स्तर पर जगह से बाहर हैं।

मैंने मान लिया कि जब Coverage टैब के साथ काम कर रहे हैं, तो आप "रिकॉर्डिंग" शुरू कर सकते हैं और साइट के चारों ओर घूम सकते हैं, यह देख सकते हैं कि अप्रयुक्त संसाधनों का प्रतिशत ब्राउज़र में प्रदर्शित विभिन्न पृष्ठों के रूप में कैसे गिरता है। लेकिन, दुर्भाग्य से, जब पृष्ठ ताज़ा होता है, तो Coverage टैब की सामग्री भी अपडेट की जाती है। परिणामस्वरूप, कई पृष्ठों में संसाधन उपयोग का प्रतिशत निर्धारित करने में यह उपकरण विशेष रूप से उपयोगी नहीं है। शायद यह केवल तब नहीं है जब आप एक-पृष्ठ के अनुप्रयोग का विश्लेषण करते हैं।

यह कहना मेरे लिए अप्रिय है, लेकिन Coverage टैब का उपयोग करके साइट का विश्लेषण करना लगभग व्यर्थ हो गया। मैंने जो देखा, ये 70.7%, एक भयानक तस्वीर है जो मेरे संदेह पर खेलती है, लेकिन यह विश्लेषण मुझे कुछ भी ठोस नहीं देता है, नतीजतन मैं केवल अपनी साइट पर कुछ गलत के बारे में चिंता कर सकता हूं।

शायद साइट का यह विश्लेषण बहुत ही तंत्र होगा जो आपको उस विचार तक ले जाएगा जो आपको लोड करने वाले सीएसएस कोड को खोजने और निकालने की आवश्यकता है, लेकिन आपके प्रोजेक्ट में इसका उपयोग नहीं किया गया है।

मेरी प्राथमिक समस्या

अप्रयुक्त सीएसएस को खोजने और हटाने में, निम्नलिखित चिंताएं मुझे सबसे ज्यादा परेशान करती हैं। मान लीजिए कि कोई व्यक्ति विश्लेषण परिणामों को देखता है और अप्रयुक्त सीएसएस टुकड़े देखता है।


अप्रयुक्त सीएसएस स्निपेट्स

वह सोचता है: "ठीक है, अनावश्यक सब कुछ हटा दें!"। सुपरफ्लस को हटा दिया जाता है, और फिर यह पता चलता है कि यह बिल्कुल सुपरफ्लस में नहीं था, और इसके हटाने से पूरे साइट पर स्टाइल के साथ बड़ी समस्याएं पैदा हुईं। यहाँ बात है: आप पूरी तरह से सुनिश्चित हो सकते हैं कि कुछ सीएसएस चयनकर्ता का उपयोग नहीं किया गया है, केवल अगर आप निम्नलिखित योजना पर शोध करते हैं:

1. आपको Coverage टैब जैसे उपकरण के साथ साइट के प्रत्येक पृष्ठ को जांचना होगा।
2. इस स्थिति में, आपको सभी जावास्क्रिप्ट कोड निष्पादित करने की आवश्यकता है।
3. यह आवेदन की स्थिति के लिए सभी संभव विकल्पों के साथ किया जाना चाहिए।
4. और, इसके अलावा, आपको उपयोग किए जाने वाले मीडिया प्रश्नों के सभी संभावित विकल्पों के साथ यह सब जांचना होगा।

यदि केवल वेबसाइट के मुख पृष्ठ की जाँच की जाती है, तो इस पर ध्यान नहीं दिया जाता है। सभी शीर्ष-स्तरीय पृष्ठों का अध्ययन करना भी एक वास्तविक परीक्षा नहीं माना जाता है। आपको सभी पृष्ठों से गुजरने की जरूरत है, उन स्थितियों में साइट की जांच करें जिन्हें इसके डेवलपर को तुरंत याद नहीं करना चाहिए, सभी सीमावर्ती मामलों की जांच करें। अन्यथा, सब कुछ एक अक्षम खाते वाले सिस्टम में लॉग इन करने वाले उपयोगकर्ताओं के लिए पॉप-अप मोडल विंडो में क्रेडिट कार्ड की ड्रॉप-डाउन सूची की स्टाइलिंग को हटाने के साथ समाप्त हो सकता है जो एक नई सदस्यता के लिए भुगतान करने के लिए अनुग्रह अवधि के दौरान सिस्टम में लॉग इन करते हैं और उसी समय एक वैध उपहार कार्ड होता है।

स्वचालित सीएसएस पार्सर्स के लिए ऐसा कुछ बहुत जटिल है। वे ऐसी जांच पूरी तरह से करने में सक्षम नहीं हैं, खासकर अनिश्चितता की स्थिति में साइट के विश्लेषण को देखते हुए। हम बात कर रहे हैं, उदाहरण के लिए, विभिन्न ब्राउज़र संदर्भों (विभिन्न स्क्रीन आकार, विभिन्न ब्राउज़र क्षमताएं, विभिन्न ब्राउज़र) में परियोजनाओं पर शोध करने और साइट पर तीसरे पक्ष के पुस्तकालयों के प्रभाव को ध्यान में रखते हुए।

और अब मैं एक उदाहरण दिखाना चाहता हूं कि मैंने उन सभी समस्याओं को कैसे देखा, जिनके बारे में मैंने अभी अभ्यास में बात की थी।

PurifyCSS ऑनलाइन

मैंने PurifyCSS ऑनलाइन संसाधन का उपयोग करके css-tricks.com को अनुकूलित करने का प्रयास करने का निर्णय लिया। आप इसे लिंक पास कर सकते हैं, और यह तुरंत उपयोग के लिए तैयार सीएसएस का उत्पादन करता है। मैंने इस साइट पर css-tricks.com को "फीड" किया और मेरे पास अपने निपटान में एक नया सीएसएस कोड था। यह तब हुआ जब मैंने इस कोड का उपयोग किया।


बाईं ओर css-tricks.com का सामान्य दृश्य है। दाईं ओर नया, "परिष्कृत" सीएसएस लगाने का परिणाम है। इस नए कोड में साइट के विभिन्न पृष्ठों के लिए आवश्यक चीजों की कमी थी

PurifyCSS आपको कई लिंक (जो अच्छा है) के आधार पर विश्लेषण करने की अनुमति देता है, लेकिन css-tricks.com पर दसियों हज़ारों लिंक हैं। उनमें से कई सीएसएस, पृष्ठों के संदर्भ में समान हैं, लेकिन इनमें से प्रत्येक पृष्ठ पर ऐसा कुछ हो सकता है जो कहीं और उपयोग नहीं किया जाता है। इसके अलावा, मुझे लग रहा था कि PurifyCSS ने JS-code नहीं चलाया है, क्योंकि मेरे CSS को "सफ़ाई" करने के बाद, जावास्क्रिप्ट का उपयोग करने वाले पृष्ठों पर प्रदर्शित की जाने वाली सभी चीजें अस्थिर हो गईं। यहां तक ​​कि छद्म वर्गों के लिए शैलियों :hover ।

शायद, मैंने पहले ही आपको यह समझने के लिए पर्याप्त कहा है कि यह संयोग से नहीं है कि मुझे ऐसे साधनों पर इतना कम भरोसा है।

प्रोजेक्ट निर्माण प्रक्रिया के भाग के रूप में सीरीज़ को शुद्ध करें

PurifyCSS संभवतः एक ऑनलाइन सीएसएस क्लीनर की तुलना में एक परियोजना का निर्माण करने के लिए उपयोग किए जाने वाले उपकरण के रूप में अधिक बार उपयोग किया जाता है। प्रोजेक्ट डॉक्यूमेंट में ग्रंट, गल्प और वेबपैक का उपयोग करते समय इसके उपयोग के निर्देश हैं। उदाहरण के लिए, टेम्प्लेट्स द्वारा फ़ाइलें संसाधित करना:

 var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css']; var options = {  //  CSS    .  output: './dist/purified.css' }; purify(content, css, options); 

यह दृष्टिकोण बहुत अधिक सटीकता की अनुमति देता है। साइट की सामग्री जो विश्लेषण के लिए प्रस्तुत की जाती है, वह एक सूची हो सकती है जिसमें प्रत्येक टेम्पलेट, पेज बनाने के लिए उपयोग किया जाने वाला प्रत्येक टुकड़ा और प्रत्येक जावास्क्रिप्ट फ़ाइल शामिल है। यह पता चल सकता है कि संसाधनों की ऐसी सूची को बनाए रखना आसान नहीं है, लेकिन यह आपको उन सभी चीजों पर विचार करने की अनुमति देता है जिन्हें ध्यान में रखा जा सकता है। हालाँकि, यह कुछ रिपॉजिटरी (जैसे कि डेटाबेस में संग्रहीत ब्लॉग पोस्ट), और तृतीय-पक्ष जावास्क्रिप्ट कोड में पड़े पृष्ठों की सामग्री पर लागू नहीं होता है, लेकिन शायद यह कुछ मामलों में महत्वहीन है, या शायद डेवलपर किसी तरह से ऐसे संसाधनों की सीएसएस जरूरतों को ध्यान में रख सकेगा।

PurifyCSS प्रतिद्वंद्वी प्रलेखन PurgeCSS PurifyCSS द्वारा उपयोग किए जाने वाले संसाधन हैंडलिंग विधि के बारे में एक चेतावनी है। अर्थात्, हम इस तथ्य के बारे में बात कर रहे हैं कि PurifyCSS किसी भी प्रकार के संसाधनों के साथ काम कर सकता है, न कि केवल HTML और जावास्क्रिप्ट के साथ। कार्य के दौरान PurifyCSS फ़ाइलों में सभी शब्दों का विश्लेषण करता है और सीएसएस-कोड में चयनकर्ताओं के साथ उनकी तुलना करता है। प्रत्येक शब्द को एक चयनकर्ता माना जाता है। यही है - बहुत से चयनकर्ताओं को गलती से साइट पर उपयोग किए जाने के रूप में पहचाना जा सकता है। उदाहरण के लिए, एक फ़ाइल की पाठ्य सामग्री में, एक नियमित वाक्य में, एक निश्चित सीएसएस चयनकर्ता के अनुरूप शब्द हो सकता है।

PurifyCSS इसके बारे में याद रखने योग्य है। यह उपकरण अत्यंत सरल एल्गोरिथ्म का उपयोग करके साइट सामग्रियों में सीएसएस चयनकर्ताओं के लिए खोज करता है। यह, एक तरफ, एक समझदार विचार है, और दूसरी तरफ, यह काफी खतरनाक है।

अप्रयुक्त सेवा

एक उपकरण की मैनुअल ट्यूनिंग, ताकि यह उपकरण प्रत्येक पृष्ठ का विश्लेषण करे, ताकि यह सभी संभावित बिंदुओं से इसकी जांच करेगा, ज़ाहिर है, एक उबाऊ दिनचर्या है। इसके अलावा, इस तरह के काम को दैनिक आधार पर किया जाना चाहिए, क्योंकि साइट के बारे में विश्लेषण की गई जानकारी को नए डेटा के साथ अपडेट किया जाना चाहिए क्योंकि परियोजना विकसित होती है। UnusedCSS नाम की एक ऑनलाइन सेवा है। वह स्वतंत्र रूप से साइट के पन्नों को दरकिनार कर देता है, डेवलपर को बहुत नीरस काम से बचाता है। यह सेवा साइट के लिए एक लिंक को स्थानांतरित करने के लिए पर्याप्त है।

मैंने इस सेवा के लिए एक पेड सब्सक्रिप्शन के लिए साइन अप किया और इसके साथ css-tricks.com का विश्लेषण किया। मुझे यह स्वीकार करना चाहिए कि जब मैंने परिणामों को देखा, तो मुझे यह महसूस हुआ कि जो मैंने पहले देखा था, उससे कहीं अधिक सटीक वे देख रहे थे।


UnusedCSS का उपयोग करके css-tricks.com का विश्लेषण करें। रिपोर्ट कहती है कि साइट 93% लोड सीएसएस कोड का उपयोग करती है। यह मेरे लिए सत्य के करीब लगता है, क्योंकि मैंने इस साइट के लिए सभी सीएसएस कोड मैन्युअल रूप से लिखे थे

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

मुझे वास्तव में यह तथ्य पसंद आया कि UnusedCSS ने मुझे अन्य उपकरणों की तुलना में बहुत अधिक सटीक परिणाम दिए। हालाँकि, इस सेवा द्वारा तैयार किए गए डेटा में बहुत अधिक "शोर" है, और मुझे अभी तक यह नहीं पता है कि किसी परियोजना के निर्माण और उसके नए संस्करणों को उत्पादन में डालने के लिए उपयोग नहीं की गई प्रक्रिया में UnusedCSS को कैसे शामिल किया जाए।

→ दूसरा भाग पढ़ें

प्रिय पाठकों! क्या आपने अपनी परियोजनाओं में अप्रयुक्त सीएसएस कोड होने की समस्या का सामना किया है?