فرض کن یک سایت قدیمی داری که هزاران خط CSS داخلشه.
مشکل؟
نمی‌دونی کدوم کلاس‌ها واقعاً استفاده میشن.
اینجا Chrome DevTools یه قابلیت جالب داره:
Coverage
از Command Menu می‌تونی Coverage رو باز کنی و صفحه رو بررسی کنی.
بعد مرورگر نشونت میده چه مقدار از CSS و JavaScript دانلودشده واقعاً در اون صفحه استفاده شده.
مثلاً ممکنه ببینی:
style.css
Used: 42%
Unused: 58%
یعنی بیشتر از نصف CSS دانلود شده، ولی در همون صفحه استفاده نشده.
البته یه نکته مهم:
گزینه Unused در یک صفحه الزاماً به معنی Dead Code نیست.
ممکنه اون CSS در صفحه دیگری استفاده بشه یا با Interaction کاربر فعال بشه.
پس Coverage رو نباید کورکورانه تبدیل به «این فایل رو حذف کن» کنی.
ولی برای پیدا کردن Assetهای مشکوک و CSS/JSهای سنگین، ابزار فوق‌العاده‌ایه.
خصوصاً وقتی با یک قالب یا سایت قدیمی طرفی که سال‌ها افزونه روی افزونه نصب شده.
💬 تا حالا Coverage رو داخل DevTools امتحان کردی؟
@CodeVerse_dev