لما تيجي تشتغل على أي مشروع حقيقي، حجم الـ CSS بيبقى حاجة أساسية لازم تركز عليها. مش منطقي أبداً تسيب الملف النهائي مليان كلاسات مش مستخدمة وتدي للمستخدم 100KB CSS وهو مش محتاج غير 10KB هنا ييجي دور تحسين الأداء في Tailwind.
المشكلة
بما إن Tailwind بيولد آلاف الكلاسات الجاهزة، الملف النهائي (قبل أي Optimization) ممكن يوصل ميجات من الكود. وده هيخلي:
- الـ Loading أبطأ.
- الـ Performance في Lighthouse ضعيف
- تجربة المستخدم مش سلسة
✅ الحل: Tree-Shaking (PurgeCSS)
الفكرة ببساطة:
- دور على كل الكلاسات اللي مستخدمة فعلاً في المشروع
- واحذف الباقي (Unused CSS)
Tailwind بيعمل ده أوتوماتيك عن طريق PurgeCSS (مدموج معاه من النسخة 2.0 تقريبًا)
طريقة التفعيل
في ملف tailwind.config.js:
- البروب
contentهي أهم حاجة - بتقول لتايلويند: “ابحث في الملفات دي عن الكلاسات اللي مستخدمة”
- أي حاجة مش مستخدمة = تتشال من الـ bundle النهائي
مثال عملي
لو كتبت في المشروع:
الـ CSS النهائي هيحتوي بس على:
وبس كده باقي آلاف الكلاسات مش هتنزل للـ browser.
كدا حجم ال CSS ممكن ينزل من 3MB ل 10KB, والـ First Load هيبقى أسرع, والمشروع هيجيب Score عالي في Lighthouse
💡 Tips
- اتأكد إنك كاتب المسارات في
contentصح (لو نسيت فولدر الكلاسات فيه مش هتتضمن) - لو بتولد كلاسات دايناميك (مثلا
text-${color}) لازم تستخدم Safelist عشان PurgeCSS ميحذفهاش - دايما جرب الـ Build النهائي (
npm run build) عشان تشوف الحجم بعد الـ Optimization
المشاركة مع أصدقائك
قسم التعليقات