استراتيجية تنقية Tailwind CSS: إتقان إزالة الأنماط غير المستخدمة

Tailwind CSS هو إطار عمل CSS يعتمد على الأدوات المساعدة أولاً ويوفر مكتبة واسعة من فئات CSS المعرفة مسبقًا. على الرغم من قوته ومرونته الفائقة، إلا أن هذه الوفرة يمكن أن تؤدي إلى كمية كبيرة من CSS غير المستخدم في بيئة الإنتاج، مما يؤثر على أداء الموقع. تتعمق هذه المقالة في وظيفة التنقية (purge) في Tailwind CSS، موضحة كيفية التخلص بفعالية من الأنماط غير المستخدمة للحصول على ملفات CSS أصغر وموقع ويب أسرع وأكثر كفاءة. هذا الدليل مناسب للمطورين في جميع أنحاء العالم، بغض النظر عن حجم مشاريعهم أو موقعهم الجغرافي.

فهم المشكلة: CSS غير المستخدم وتأثيره

عند استخدامك لـ Tailwind CSS، خاصة في المشاريع الكبيرة، من المحتمل أن تستخدم جزءًا صغيرًا فقط من فئات الأدوات المساعدة المتاحة. ملف Tailwind CSS الكامل كبير جدًا (عدة ميغابايت بعد التصغير)، وتضمينه بالكامل في نسخة الإنتاج الخاصة بك يمكن أن يبطئ بشكل كبير من وقت تحميل موقعك. هذا لأن المتصفح يضطر إلى تنزيل وتحليل ملف CSS كبير، على الرغم من أن العديد من الأنماط لا يتم تطبيقها أبدًا على أي عناصر في صفحاتك. يؤدي الموقع البطيء إلى تجربة مستخدم سيئة، ومعدلات ارتداد أعلى، ويمكن أن يؤثر سلبًا على تصنيفات SEO. ينطبق هذا بغض النظر عما إذا كان جمهورك في أمريكا الشمالية، أو أوروبا، أو آسيا، أو أفريقيا. على الصعيد العالمي، يتوقع المستخدمون مواقع ويب سريعة وسريعة الاستجابة.

لماذا يضر CSS غير المستخدم:

• زيادة وقت تحميل الصفحة: تستغرق ملفات CSS الأكبر وقتًا أطول للتنزيل والتحليل، مما يؤثر بشكل مباشر على وقت تحميل الصفحة.
• إهدار النطاق الترددي: يقوم المستخدمون بتنزيل قواعد CSS التي لا تُستخدم أبدًا، مما يهدر النطاق الترددي، خاصة على الأجهزة المحمولة.
• عنق زجاجة في الأداء: يقضي المتصفحون وقتًا في تحليل وتطبيق الأنماط غير المستخدمة، مما يؤثر على أداء العرض.

الحل: وظيفة التنقية في Tailwind CSS

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

كيف تعمل عملية التنقية:

1. مسح الملفات: يقوم Tailwind CSS بتحليل ملفاتك المحددة (مثل HTML، JavaScript، PHP، قوالب Vue) بحثًا عن أسماء فئات CSS.
2. تحديد الفئات المستخدمة: يحدد جميع فئات CSS المستخدمة فعليًا في مشروعك.
3. إزالة الفئات غير المستخدمة: أثناء عملية البناء، يزيل Tailwind CSS جميع قواعد CSS التي لا ترتبط بالفئات المستخدمة المحددة.
4. إنشاء CSS محسن: الناتج النهائي هو ملف CSS محسن للغاية يحتوي فقط على الأنماط اللازمة لموقعك على الويب.

تكوين خيار التنقية في `tailwind.config.js`

مثال على التكوين:

            module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.jsx',
      './src/**/*.js',
      './src/**/*.php',
      // Add any other file types that contain Tailwind classes
    ],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
            

              
                Copy
              
            
          

شرح خيارات التكوين:

• `enabled`: يتحكم هذا الخيار في تمكين وظيفة التنقية. من أفضل الممارسات تمكينها فقط في بيئات الإنتاج (على سبيل المثال، `process.env.NODE_ENV === 'production'`). هذا يمنع التنقية غير الضرورية أثناء التطوير، والتي يمكن أن تبطئ عملية التطوير.
• `content`: هذا الخيار عبارة عن مصفوفة من مسارات الملفات التي سيمسحها Tailwind CSS بحثًا عن أسماء فئات CSS. يجب عليك تضمين جميع أنواع الملفات التي تحتوي على فئات Tailwind CSS، مثل HTML، ومكونات Vue، وملفات JavaScript، وقوالب PHP. من الضروري أن تكون دقيقًا وشاملًا هنا لضمان تحديد جميع الفئات المستخدمة بشكل صحيح.

أفضل الممارسات لتكوين التنقية

يعد تكوين خيار التنقية بشكل صحيح أمرًا بالغ الأهمية لإزالة الأنماط غير المستخدمة بشكل فعال. إليك بعض أفضل الممارسات لضمان أفضل النتائج:

1. استخدم مسارات ملفات محددة:

تجنب استخدام مسارات ملفات واسعة جدًا مثل `'./**/*'`. على الرغم من أن هذا قد يبدو مناسبًا، إلا أنه يمكن أن يؤدي إلى أوقات بناء أطول ونتائج غير دقيقة محتملة. بدلاً من ذلك، استخدم مسارات ملفات محددة تستهدف الملفات ذات الصلة فقط. على سبيل المثال، إذا كانت ملفات HTML الخاصة بك موجودة في دليل `./src/pages`، فاستخدم `'./src/pages/**/*.html'` بدلاً من `'./**/*.html'`.

مثال:

            module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/pages/**/*.html',
      './src/components/**/*.vue',
      './src/js/**/*.js',
    ],
  },
  // ...
}
            

              
                Copy
              
            
          

2. كن منتبهاً لأسماء الفئات الديناميكية:

إذا كنت تستخدم أسماء فئات ديناميكية (على سبيل المثال، باستخدام JavaScript لإضافة أو إزالة الفئات بناءً على شروط معينة)، فقد لا تتمكن وظيفة التنقية من اكتشافها بشكل صحيح. في مثل هذه الحالات، تحتاج إلى استخدام خيار `safelist`.

3. استخدم خيار `safelist`:

يسمح لك خيار `safelist` بتحديد فئات CSS بشكل صريح يجب تضمينها دائمًا في ملف CSS النهائي، حتى لو لم يتم اكتشافها أثناء عملية المسح. هذا مفيد بشكل خاص لأسماء الفئات الديناميكية، أو الفئات المستخدمة في مكتبات الطرف الثالث، أو الفئات التي يتم إنشاؤها بواسطة JavaScript.

مثال:

            module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.js',
    ],
    safelist: [
      'bg-red-500',
      'text-white',
      'hidden',
      'lg:block'
    ],
  },
  // ...
}
            

              
                Copy
              
            
          

في هذا المثال، سيتم دائمًا تضمين الفئات `bg-red-500` و `text-white` و `hidden` و `lg:block` في ملف CSS النهائي، حتى لو لم يتم العثور عليها مباشرة في الملفات الممسوحة.

4. التعبيرات النمطية في `safelist`:

يدعم خيار `safelist` أيضًا التعبيرات النمطية (regular expressions)، مما يسمح لك بمطابقة فئات متعددة بناءً على نمط. هذا مفيد للسيناريوهات التي لديك فيها سلسلة من الفئات التي تتبع اصطلاح تسمية مشابه.

مثال:

            module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.js',
    ],
    safelist: [
      /^grid-cols-/, // Matches classes like grid-cols-1, grid-cols-2, etc.
    ],
  },
  // ...
}
            

              
                Copy
              
            
          

يستخدم هذا المثال تعبيرًا نمطيًا لمطابقة جميع الفئات التي تبدأ بـ `grid-cols-`، مما يضمن تضمين جميع فئات أعمدة الشبكة في ملف CSS النهائي.

5. استخدم `layers` safelist:

قدم Tailwind v3 مفهوم الطبقات (layers). إذا كنت تستخدم توجيهات `@layer` لإضافة أنماط مخصصة، فقد تحتاج إلى وضع أسماء الطبقات في القائمة الآمنة.

            module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.js',
    ],
    safelist: [
      'layer-base', 
      'layer-components',
      'layer-utilities',
    ],
  },
  // ...
}
            

              
                Copy
              
            
          

6. افحص CSS الإنتاج الخاص بك:

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

استكشاف أخطاء التنقية الشائعة وإصلاحها

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

1. الأنماط المفقودة:

إذا لاحظت أن بعض الأنماط مفقودة في نسخة الإنتاج الخاصة بك، فمن المحتمل أن وظيفة التنقية لا تكتشف فئات CSS المقابلة في ملفاتك. يمكن أن يحدث هذا بسبب:

• مسارات الملفات غير الصحيحة: تحقق مرة أخرى من أن مسارات الملفات في مصفوفة `content` الخاصة بك دقيقة وتتضمن جميع الملفات ذات الصلة.
• أسماء الفئات الديناميكية: استخدم خيار `safelist` لتضمين أي أسماء فئات ديناميكية بشكل صريح.
• الفئات التي تم إنشاؤها بواسطة JavaScript: إذا كنت تقوم بإنشاء فئات باستخدام JavaScript، فتأكد من تضمين هذه الفئات أيضًا في خيار `safelist`.

2. عدم إزالة الأنماط غير المستخدمة:

إذا وجدت أنه لا تزال هناك أنماط غير مستخدمة في ملف CSS الخاص بالإنتاج، فقد يكون ذلك بسبب:

• تبعيات التطوير: في بعض الأحيان، يمكن أن تقوم تبعيات التطوير بإدخال CSS في نسختك. تأكد من عدم تضمين هذه التبعيات في نسخة الإنتاج الخاصة بك.
• أخطاء إملائية: تحقق مرة أخرى من وجود أي أخطاء إملائية في أسماء فئات CSS الخاصة بك. حتى خطأ إملائي صغير يمكن أن يمنع وظيفة التنقية من تحديد وإزالة الأنماط غير المستخدمة.
• مسارات الملفات الواسعة جدًا: كما ذكرنا سابقًا، تجنب استخدام مسارات ملفات واسعة جدًا في مصفوفة `content` الخاصة بك، حيث يمكن أن يؤدي ذلك إلى نتائج غير دقيقة.

3. أخطاء عملية البناء:

إذا واجهت أخطاء أثناء عملية البناء تتعلق بوظيفة التنقية، فقد يكون ذلك بسبب:

• تكوين غير صحيح: تحقق مرة أخرى من ملف `tailwind.config.js` الخاص بك بحثًا عن أي أخطاء في بناء الجملة أو خيارات تكوين غير صحيحة.
• تبعيات قديمة: تأكد من أنك تستخدم أحدث إصدارات Tailwind CSS وتبعياتها.
• إضافات متعارضة: إذا كنت تستخدم إضافات PostCSS أخرى، فقد تكون متعارضة مع وظيفة التنقية في Tailwind CSS. حاول تعطيل الإضافات الأخرى لمعرفة ما إذا كان ذلك يحل المشكلة.

أمثلة عبر أطر عمل مختلفة

تظل المبادئ الأساسية لتنقية أنماط Tailwind CSS غير المستخدمة كما هي عبر أطر العمل المختلفة. ومع ذلك، قد تختلف تفاصيل التنفيذ المحددة قليلاً اعتمادًا على أدوات البناء وهيكل المشروع.

1. تنقية Tailwind CSS في مشروع React (Create React App):

في مشروع Create React App، يمكنك تكوين خيار التنقية في ملف `tailwind.config.js` الخاص بك على النحو التالي:

            module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/**/*.js',
      './src/**/*.jsx',
      './public/index.html',
    ],
  },
  // ...
}
            

              
                Copy
              
            
          

تأكد من تضمين جميع ملفات JavaScript و JSX الخاصة بك في مصفوفة `content`. يجب عليك أيضًا تضمين ملف `public/index.html` الخاص بك إذا كنت تستخدم فئات Tailwind CSS مباشرة في HTML.

2. تنقية Tailwind CSS في مشروع Vue.js (Vue CLI):

في مشروع Vue CLI، يمكنك تكوين خيار التنقية في ملف `tailwind.config.js` الخاص بك على النحو التالي:

            module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './src/**/*.vue',
      './src/**/*.js',
    ],
  },
  // ...
}
            

              
                Copy
              
            
          

قم بتضمين جميع ملفات مكونات Vue وملفات JavaScript الخاصة بك في مصفوفة `content`.

3. تنقية Tailwind CSS في مشروع Next.js:

عادةً ما يتعامل Next.js مع عملية التنقية تلقائيًا باستخدام دعمه المدمج لـ CSS. ومع ذلك، لا يزال بإمكانك تكوين خيار التنقية في ملف `tailwind.config.js` الخاص بك لضبط العملية:

            module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './pages/**/*.js',
      './components/**/*.js',
    ],
  },
  // ...
}
            

              
                Copy
              
            
          

قم بتضمين ملفات صفحاتك ومكوناتك في مصفوفة `content`. سيقوم Next.js تلقائيًا باكتشاف وإزالة أنماط Tailwind CSS غير المستخدمة أثناء عملية البناء.

4. تنقية Tailwind CSS في مشروع Laravel:

بالنسبة لمشاريع Laravel التي تستخدم Tailwind CSS، فإن التكوين مشابه. تأكد من مسح قوالب blade وأي ملفات Javascript.

            module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './resources/**/*.blade.php',
      './resources/**/*.vue',
      './resources/**/*.js',
    ],
  },
  // ...
}
            

              
                Copy
              
            
          

قياس الأداء: قبل وبعد التنقية

أفضل طريقة لتقييم فعالية وظيفة التنقية هي قياس أداء موقعك قبل وبعد تمكينها. يمكنك استخدام أدوات مختلفة لقياس الأداء، مثل:

• Google PageSpeed Insights: توفر هذه الأداة رؤى قيمة حول أداء موقعك وتقدم اقتراحات للتحسين.
• Lighthouse: Lighthouse هي أداة آلية مفتوحة المصدر لتحسين جودة صفحات الويب. يمكنك تشغيلها في Chrome DevTools أو كوحدة Node.js.
• WebPageTest: تتيح لك هذه الأداة اختبار أداء موقعك من مواقع مختلفة وبتكوينات متصفح مختلفة.

من خلال قياس وقت تحميل صفحة موقعك، وحجم ملف CSS، ومقاييس الأداء الأخرى قبل وبعد تنقية أنماط Tailwind CSS غير المستخدمة، يمكنك تحديد تأثير التحسين كميًا والتأكد من أنه يحقق النتائج المرجوة. ضع في اعتبارك الاختبار من مواقع جغرافية مختلفة للحصول على رؤية عالمية لتحسينات الأداء.

الخلاصة: التحسين لجمهور عالمي

يعد الاستخدام الفعال لوظيفة التنقية في Tailwind CSS أمرًا بالغ الأهمية لتحسين أداء الموقع وتقديم تجربة مستخدم سلسة لجمهور عالمي. من خلال تكوين خيار التنقية بعناية، واستخدام خيار `safelist` عند الضرورة، وفحص ملف CSS الخاص بالإنتاج بانتظام، يمكنك التأكد من أن موقعك يتم تحميله بسرعة وكفاءة، بغض النظر عن موقع المستخدم أو جهازه. في عالم اليوم، تعد المواقع السريعة والمحسّنة ضرورية للنجاح. من خلال إعطاء الأولوية للأداء، يمكنك تحسين تفاعل المستخدم، وزيادة معدلات التحويل، وتحقيق أهداف عملك في النهاية على نطاق عالمي. كل جزء من الثانية مهم، والتنقية الصحيحة لـ CSS هي خطوة أساسية في تحقيق الأداء الأمثل للموقع.

مصادر إضافية

• توثيق Tailwind CSS: التحسين للإنتاج
• توثيق PurgeCSS