استراتژی پاکسازی Tailwind CSS: تسلط بر حذف استایل‌های استفاده نشده

Tailwind CSS یک چارچوب CSS کاربردی است که یک کتابخانه بزرگ از کلاس های CSS از پیش تعریف شده را ارائه می دهد. در حالی که فوق العاده قدرتمند و انعطاف پذیر است، این فراوانی می تواند منجر به مقدار قابل توجهی از CSS استفاده نشده در تولید شود و بر عملکرد وب سایت تأثیر بگذارد. این مقاله به بررسی عملکرد پاکسازی 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` همچنین از عبارات منظم پشتیبانی می کند و به شما امکان می دهد چندین کلاس را بر اساس یک الگو مطابقت دهید. این برای سناریوهایی که در آن یک سری کلاس دارید که از یک قرارداد نامگذاری مشابه پیروی می کنند مفید است.

مثال:

            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. Use `layers` Safelist:

Tailwind v3 introduced layers. If you are using `@layer` directives to add custom styles, you may need to safelist the layer names.

            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` قرار دهید. اگر از کلاس های Tailwind CSS به طور مستقیم در HTML استفاده می کنید، باید فایل `public/index.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. Purging Tailwind CSS in a Laravel Project:

For Laravel projects using Tailwind CSS, the configuration is similar. Ensure your blade templates and any Javascript files are scanned.

            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