تغطية CSS والأنماط غير المستخدمة

غالبًا ما تحتوي ملفات CSS الكبيرة على أنماط لمكوّنات غير موجودة في الصفحة الحالية. يزيد كل بايت غير مستخدم من وقت التحليل، ووقت إنشاء CSSOM، وحجم النقل. وقد يحتوي تطبيق إنتاجي نموذجي على CSS غير مستخدم بنسبة 90% أو أكثر في أي صفحة معينة.

افتح لوحة Coverage في DevTools (Cmd+Shift+P ← Coverage). ابدأ التسجيل، وتفاعل مع الصفحة، ثم أوقف التسجيل. تعرض اللوحة كل ملف CSS مع نسبة الاستخدام، وتحدد القواعد غير المستخدمة باللون الأحمر. صدّر بيانات التغطية بصيغة JSON لتحليلها.

يفحص PurgeCSS ملفات HTML وJS والقوالب بحثًا عن أسماء الأصناف، ثم يزيل قواعد CSS غير المستخدمة. اضبط أنماط content glob لتطابق جميع الملفات التي قد تشير إلى أسماء الأصناف. أضف الأصناف المستخدمة ديناميكيًا (التي تضيفها JS) إلى safelist لمنع إزالتها عن طريق الخطأ.

ينشئ مترجم JIT في Tailwind فئات الأدوات المستخدمة فعلًا في القوالب فقط. وتكون CSS الناتجة صغيرة جدًا، وغالبًا ما يتراوح حجمها بين 5 و15KB لتطبيق كامل، لأن الأدوات غير المستخدمة لا تُنشأ أصلًا. وهذه هي النتيجة المثالية لعملية الإزالة.

في إعدادات webpack أو Vite، أضف PurgeCSS مع أنماط content glob التي تغطي جميع ملفات القوالب. يقبل الخيار safelist سلاسل نصية وتعبيرات نمطية وdeep-safelist لأنماط الأصناف الديناميكية المعقدة من مكتبات مثل Headless UI.

ينشئ CSS Modules أسماء أصناف فريدة لكل ملف، ويزيل الوحدات غير المستخدمة عبر tree-shaking عند ضبط أداة التجميع. ولا تُضمّن في الحزمة إلا وحدات CSS المستوردة، إذ يؤدي وضع الأنماط بجوار المكوّنات طبيعيًا إلى التخلص من الأنماط العامة غير المستخدمة.

قسّم CSS حسب المسار في أطر عمل مثل Next.js (استخراج CSS لكل صفحة)، أو استخدم الاستيرادات الديناميكية مع CSS Modules. ولا تحمّل كل صفحة إلا أنماطها الخاصة، مما يجعل تحليل التغطية لكل صفحة، بدلًا من التطبيق بأكمله، ذا معنى.

يقدّر تدقيق Lighthouse بعنوان "Reduce unused CSS" مقدار التوفير المحتمل بالبايت عند إزالة القواعد غير المستخدمة. ويحدد موارد أوراق الأنماط التي تحتوي على نسب مرتفعة من المحتوى غير المستخدم. استخدمه دليلًا لتحديد الملفات التي ينبغي تدقيقها أولًا.

لا يلتقط تحليل التغطية إلا الحالات الظاهرة أثناء التسجيل. لذلك يجب تشغيل حالات التحويم، وفتح النوافذ المنبثقة، وحالات الخطأ، والحالات التي تتطلب تسجيل الدخول يدويًا أثناء تسجيل التغطية، لتجنب إزالة أنماطها عن طريق الخطأ.

تراكم أوراق الأنماط العامة أحادية الكتلة CSS غير المستخدم بمرور الوقت مع إزالة الميزات. أما CSS الخاص بكل مكوّن، مثل CSS Modules وStyled Components وأدوات Tailwind، فيسهل تشذيبه لأن الأنماط تكون مع مكوّناتها وتُزال معها.

بالنسبة إلى ملفات CSS القديمة والكبيرة: استخدم UnCSS أو PurgeCSS أولًا في وضع report-only. رتّب القواعد حسب تكرار استخدامها. استخرج أنماط إضافات المورّد غير المستخدمة بوضوح واحذفها. اعمل تدريجيًا لتجنب إزالة الأنماط الخاصة بالحالات النادرة عن طريق الخطأ.

ما الذي تقيسه لوحة Coverage في Chrome DevTools؟

يحدد تحليل تغطية CSS باستخدام DevTools Coverage وLighthouse القواعد غير المستخدمة. ويؤتمت PurgeCSS وTailwind JIT إزالة الشيفرة الميتة. كما يمنع CSS Modules وتقسيم CSS حسب المسار تراكم الأنماط غير المستخدمة. وتعمل هذه الأساليب معًا على تقليل حجم CSS ووقت تحليلها.