يود مؤلف المقال ، وهو الجزء الأول من الترجمة الذي ننشره اليوم ، أن يعرف القراء مسبقًا أن التخلص من CSS غير الضروري هو مهمة صعبة. إذا قرأت هذا على أمل العثور على أداة وتشغيلها ، فيمكنك معرفة بالضبط كود CSS الذي يمكن إزالته بأمان من مشروعك ، ثم ... هناك أدوات مماثلة ، ولكن يجب استخدامها بعناية فائقة ، حيث أن أيا منها
غير قادر على إعطاء إجابة لائقة على سؤال CSS غير المستخدم.
من السهل أن نفهم أن أي مطور ويب يرغب في استخدام نوع من الأداة المساعدة وتشغيله وإزالة CSS غير الضرورية التي يبلغ عنها. بضع دقائق - ويتم تسريع الموقع. لكن ليس بهذه البساطة. يعتقد مؤلف هذه المادة أن مثل هذه الأداة يجب أن تعامل بشك صحي. لا أحد منهم يكذب على المطور. عادةً ما لا تحتوي هذه الأدوات ببساطة على معلومات كافية لتمكينها من إنتاج نتائج يمكن الوثوق بها دون قيد أو شرط. لكن هذا لا يعني أنه لا يمكن استخدام هذه الأدوات. هذا لا يعني أنه لا يمكنك التخلص من CSS غير المستخدمة بأي طريقة. نناقش هذا.
→
اقرأ الجزء الثانيلماذا تخلص من CSS غير المستخدمة؟
أعتقد أن السبب الرئيسي الذي قد يحتاج إليه شخص ما للتخلص من CSS غير المستخدم يمكن وصفه باستخدام المثال التالي. افترض أنك تستخدم إطار عمل CSS (مثل Bootstrap) ، وكل كود CSS لهذا الإطار يدخل في مشروعك. ولكن في الواقع ، يتم استخدام جزء صغير فقط من هذا الرمز في المشروع. كيف تتخلص من كل شيء غير ضروري؟
أستطيع أن أشعر بمشاعر شخص ما في وضع مماثل. غالبًا ما لا توفر أطر عمل CSS للمطورين طرقًا سهلة لتحديد الميزات التي تنطبق على مشاريع محددة. في الوقت نفسه ، قد يتطلب جلب الكود المصدري للإطار إلى حالة مناسبة بشكل مثالي لمشروع معين فريقًا من مستوى الخبرة قد لا يتمتع به. قد يصبح الموقف المماثل بحد ذاته هو السبب في البحث عن الإطار.
لنفترض أنك قمت بتنزيل 100 كيلوبايت من CSS. أود أن أقول أن هذا كثير. (في الوقت الذي أكتب فيه هذا ، يستخدم
css-tricks.com حوالي 23 كيلوبايت من CSS. هناك الكثير من الصفحات والقوالب. لم أفعل أي شيء خاص لتقليل حجم CSS.) هناك اشتباه في أنك لا تستخدم بعضًا من هذا المقدار من التعليمات البرمجية. وربما تجد بعض الأدلة على ذلك. أرى سببًا لدق ناقوس الخطر. إذا كان لديك ملف بسعة 100 كيلوبايت jpg يمكن ضغطه إلى 20 كيلو بايت عن طريق معالجته بنوع من الأدوات ، فهذا أمر رائع ويستحق الجهد المبذول. ولكن إذا تم إجراء شيء مثل هذا باستخدام CSS ، فذلك أمر أكثر أهمية. النقطة المهمة هي أن CSS يتم تحميله في بداية تحميل الصفحة وهو مورد يمنع العرض. ملفات JPG ليست مثل هذه الموارد.
تحليل الموقف باستخدام أدوات مطوري Chrome
تحتوي نافذة أدوات مطوّر برامج Chrome على علامة تبويب
Coverage . من خلال مساعدتها ، يمكنك معرفة مقدار CSS و JavaScript المحملين اللذين يتم استخدامهما بالفعل على الصفحة التي تم تحليلها. على سبيل المثال ، الآن ذهبت إلى css-tricks.com. يوجد أدناه ما رأيته في علامة التبويب
Coverage .
أدوات مطوري Chrome ، علامة تبويب التغطيةأرى هنا أن 70.7٪ من ملف
style.css بي غير مستخدم. أعتقد أنه لا يوجد شيء خاطئ في ذلك. يتم استخدام الجزء المتبقي غير المستخدم من CSS في بعض صفحات الموقع الأخرى. في هذا الموقع ، لا أستخدم بعض المكتبات ذات النمط الكبير. كتبت بنفسي كل سطر من CSS ، لذلك أشك في أن ثلثي CSS غير صالح على مستوى العالم.
افترضت أنه عند العمل مع علامة التبويب
Coverage ، يمكنك بدء "التسجيل" والتجول حول الموقع ، ومشاهدة كيف تنخفض النسبة المئوية للموارد غير المستخدمة مع عرض صفحات مختلفة في المتصفح. ولكن لسوء الحظ ، عند تحديث الصفحة ، يتم أيضًا تحديث محتويات علامة التبويب "
Coverage . نتيجة لذلك ، هذه الأداة ليست مفيدة بشكل خاص في تحديد النسبة المئوية لاستخدام الموارد عبر عدة صفحات. ربما هذا ليس فقط إذا قمت بتحليل تطبيق من صفحة واحدة.
إنه أمر غير سار بالنسبة لي أن أقول هذا ، لكن تحليل الموقع باستخدام علامة التبويب
Coverage بلا جدوى. ما رأيته ، هؤلاء الـ 70.7٪ ، صورة فظيعة تظهر لدي شكوك ، لكن هذا التحليل لا يعطيني أي شيء ملموس ، ونتيجة لذلك لا يسعني إلا القلق بشأن شيء خاطئ على موقعي.
ربما يكون هذا التحليل للموقع هو الآلية التي ستقودك إلى فكرة أنك بحاجة إلى البحث عن كود CSS الذي يقوم بتحميله وإزالته ، ولكن لا يتم استخدامه في مشروعك.
مشكلتي الأساسية
في العثور على CSS غير المستخدمة وإزالته ، فإن الأمور التالية تهمني أكثر. لنفترض أن شخصًا ما ينظر إلى نتائج التحليل ويرى شظايا CSS غير مستخدمة.
قصاصات CSS غير المستخدمةإنه يعتقد: "حسنًا ، احذف كل شيء غير ضروري!". تتم إزالة الزائدة ، ثم اتضح أنها لم تكن زائدة على الإطلاق ، وأن إزالتها أدت إلى مشاكل كبيرة في التصميم في جميع أنحاء الموقع. إليك ما يلي: يمكنك التأكد تمامًا من عدم استخدام بعض محددات CSS ، إلا إذا أجريت بحثًا حول الخطة التالية:
- تحتاج إلى التحقق من كل صفحة من صفحات الموقع باستخدام أداة مثل علامة التبويب
Coverage . - في هذه الحالة ، تحتاج إلى تنفيذ كل شفرة JavaScript.
- يجب أن يتم ذلك مع كل الخيارات الممكنة لحالة التطبيق.
- بالإضافة إلى ذلك ، تحتاج إلى التحقق من كل هذا مع جميع الخيارات الممكنة لاستعلامات الوسائط المستخدمة.
إذا تم فحص الصفحة الرئيسية لموقع الويب فقط ، فلن يؤخذ ذلك في الاعتبار. كما أن دراسة جميع صفحات المستوى الأعلى لا تعتبر اختبارًا حقيقيًا. تحتاج إلى تصفح جميع الصفحات ، وفحص الموقع في المواقف التي قد لا يتذكرها المطور فورًا ، والتحقق من جميع حالات الشريط الحدودي. خلاف ذلك ، قد ينتهي كل شيء بإزالة تصميم القائمة المنسدلة لبطاقات الائتمان في نافذة مشروطة منبثقة للمستخدمين الذين لديهم حساب معطل الذين يقومون بتسجيل الدخول إلى النظام خلال فترة السماح لدفع ثمن اشتراك جديد وفي الوقت نفسه لديهم بطاقة هدية صالحة.
شيء من هذا القبيل معقد للغاية بالنسبة إلى موزعي CSS الآلي. إنهم غير قادرين على إجراء مثل هذه الفحوصات بشكل مثالي ، خاصة بالنظر إلى تحليل الموقع في حالة عدم اليقين. نحن نتحدث ، على سبيل المثال ، عن البحث في المشروعات في سياقات متصفح مختلفة (أحجام مختلفة للشاشة ، إمكانيات متصفح مختلفة ، متصفحات مختلفة) ، ومع مراعاة تأثير مكتبات الطرف الثالث على الموقع.
والآن أريد أن أوضح مثالاً على كيفية النظر في جميع المشاكل التي تحدثت عنها للتو.
PurifyCSS اون لاين
قررت محاولة تحسين css-tricks.com باستخدام
مورد PurifyCSS Online . يمكنك تمرير روابط إليها ، وتنتج على الفور CSS جاهزة للاستخدام. قمت "بتغذية" css-tricks.com على هذا الموقع وكان لديّ كود CSS جديد تحت تصرفي. هذا ما حدث بعد أن استخدمت هذا الرمز.
على اليسار هو وجهة النظر المعتادة من css-tricks.com. على اليمين هو نتيجة تطبيق CSS جديد "مكرر". تفتقر هذه الشفرة الجديدة إلى الكثير مما هو مطلوب لمختلف صفحات الموقعيتيح لك تطبيق PurifyCSS التحليل بناءً على العديد من الروابط (وهو أمر لطيف) ، ولكن يوجد على css-tricks.com عشرات الآلاف من الروابط. يؤدي الكثير منها إلى صفحات متشابهة ، من حيث CSS ، ولكن في كل صفحة من هذه الصفحات ، قد يكون هناك شيء لا يستخدم في أي مكان آخر. بالإضافة إلى ذلك ، شعرت أن PurifyCSS لم يعمل على تشغيل JS-code ، لأنه بعد "تنظيف" كل شيء تم عرضه على الصفحات باستخدام جافا سكريبت تبين أنه لم يتم تغييره. حتى أنماط الفصول الزائفة
:hover .
ربما ، لقد قلت بالفعل بما فيه الكفاية لجعلك تفهم أنه ليس من قبيل الصدفة أن أثق بمثل هذه الأدوات.
Purify CSS مع PurifyCSS كجزء من عملية بناء المشروع
ربما يستخدم
PurifyCSS في كثير من الأحيان كأداة تستخدم لبناء مشروع أكثر من نظافة CSS عبر الإنترنت. تحتوي وثائق المشروع على تعليمات لاستخدامه عند استخدام Grunt و Gulp و webpack. على سبيل المثال ، معالجة الملفات عن طريق القوالب:
var content = ['**/src/js/*.js', '**/src/html/*.html']; var css = ['**/src/css/*.css']; var options = { // CSS . output: './dist/purified.css' }; purify(content, css, options);
هذا النهج يسمح بدقة أكبر بكثير. يمكن أن تكون مواد الموقع التي يتم تقديمها للتحليل قائمة تضم كل قالب وكل جزء يستخدم لإنشاء صفحات وكل ملف JavaScript. قد يتضح أن قائمة الموارد هذه ليست سهلة الصيانة ، ولكنها تسمح لك بالنظر في كل شيء يمكن أخذه في الاعتبار. ومع ذلك ، لا ينطبق هذا على محتوى الصفحات الموجودة في مستودعات معينة (مثل منشورات المدونة المخزنة في قاعدة البيانات) ، وعلى شفرة جافا سكريبت لجهة خارجية ، ولكن هذا في بعض الحالات غير مهم ، أو ربما سيكون المطور قادرًا على مراعاة احتياجات CSS لهذه الموارد بطريقة أو بأخرى.
الوثائق المنافسة لـ PurifyCSS يوجد لدى PurgeCSS تحذير بخصوص طريقة معالجة الموارد المستخدمة من قبل PurifyCSS. وهي نتحدث عن حقيقة أن PurifyCSS يمكن أن تعمل مع الموارد من أي نوع ، وليس فقط مع HTML و JavaScript. يقوم PurifyCSS في سياق العمل بتحليل جميع الكلمات الموجودة في الملفات ومقارنتها مع محددات في كود CSS. كل كلمة تعتبر منتقاة. هذا - قد يتم التعرف على الكثير من المحددات عن طريق الخطأ على أنها تستخدم على الموقع. على سبيل المثال ، في المحتوى النصي لملف ما ، في جملة عادية ، قد تكون هناك كلمة تقابل محدد CSS معين.
PurifyCSS يستحق أن نتذكر حول هذا الموضوع. تبحث هذه الأداة عن محددات CSS في مواد الموقع باستخدام خوارزمية بسيطة للغاية. هذه ، من ناحية ، فكرة معقولة ، ومن ناحية أخرى ، فهي خطيرة للغاية.
خدمة غير مستخدمة
إن الضبط اليدوي للأداة ، الذي يتم تنفيذه بحيث تقوم هذه الأداة بتحليل كل صفحة ، بحيث فحصها من جميع وجهات النظر الممكنة ، هو بطبيعة الحال روتين ممل. علاوة على ذلك ، ينبغي تنفيذ هذا العمل يوميًا ، حيث يجب تحديث المعلومات التي تم تحليلها حول الموقع ببيانات جديدة مع تطور المشروع. هناك خدمة واحدة عبر الإنترنت تسمى
UnusedCSS . إنه يتخطى صفحات الموقع بشكل مستقل ، مما يوفر للمطور الكثير من الأعمال الرتيبة. هذه الخدمة كافية لنقل رابط واحد إلى الموقع.
لقد اشتركت في اشتراك مدفوع في هذه الخدمة وقمت بتحليل css-tricks.com معها. يجب أن أعترف أنه بعد أن نظرت إلى النتائج ، شعرت أنها تبدو أكثر دقة مما رأيته من قبل.
تحليل css-tricks.com باستخدام UnusedCSS. يقول التقرير أن الموقع يستخدم 93 ٪ من كود CSS المحمّل. يبدو لي قريبًا من الحقيقة ، حيث أنني كتبت يدويًا كل كود CSS لهذا الموقعتتيح لك الخدمة ، بالإضافة إلى ذلك ، تنزيل ملف برمز CSS تم مسحه ويوفر إمكانية إدارة محتويات هذا الملف. على سبيل المثال ، يعمل هذا على تمكين وتعطيل المحددات التي يرغب المطور في إضافتها أو لا يرغب في إضافتها إلى رمز CSS. لنفترض أن مطورًا يرى اسمًا للفئة ، وفقًا لـ UnusedCSS ، ليس مطلوبًا على الموقع ، لكن المطور يعرف بالتأكيد أنه لا يستطيع الاستغناء عن اسم الفئة هذا. نتيجة لذلك ، يمكن تعليم الرمز الذي تم التعرف عليه عن طريق الخطأ على أنه غير ضروري حسب الضرورة. تتضمن ميزات UnusedCSS الأخرى العمل مع البادئات وإزالة المحددات المكررة.
أعجبتني حقيقة أن UnusedCSS أعطاني نتائج أكثر دقة من الأدوات الأخرى. ومع ذلك ، هناك الكثير من "الضوضاء" في البيانات التي تم إنشاؤها بواسطة هذه الخدمة ، كما أنني لا أعرف حتى الآن كيفية تضمين UnusedCSS في العملية المتكررة بشكل متكرر لبناء مشروع ووضع إصداراته الجديدة في الإنتاج.
→
اقرأ الجزء الثانيأعزائي القراء! هل واجهتك مشكلة وجود كود CSS غير مستخدم في مشاريعك؟
