کم کردن حجم فایل نهایی Tailwindcss به روش حذف کلاس های استفاده نشده

سلام ! عنوان کاملا گویا هست! قبلا در آخر مطلب زیر یک روش برای این کار گفتیم که توسط پلاگین purgecss برای postcss این کار انجام میشد و درست هم کار میکند:

شخصی روش ساده تر ارائه داده است.

حتما tailwindcss به پروؤه اضافه شده و شما صفحات Html خودتون را طراحی کردین وحالا می خواهید حجم فایل نهایی css کم کنید. برای اینکار ابتدا باید purgecss نصب کنید (در مطلب بالا نصب آن گفته شده).

مرحله اول

مانند مستندات در فایل tailwind.config.js رفته و کد زیر را بنویسید:

// tailwind.config.js
module.exports = { 
     purge: [ 
           './src/**/*.html',
            './src/**/*.vue', 
           './src/**/*.jsx',
           ], 
     theme: {}, 
     variants: {},  
   plugins: [],
 }

در کد بالا بجای './src/**/*.html' باید آدرس جایی که صفحات html وجود دارد را قرار دهید و اگر فایل هایی مانند vue و یا jsx هم داشتید آدرس آنها هم قرار دهید در غیر این صورت فقط آدرس صفحات با پسوند هایی که دارید را قرار دهید. (تصویر این بخش در بخش مثال واقعی آورده شده)

مرحله دوم

ابتدا دستور زیر را اجرا کنید:

npm install --save-dev cross-env

بعد به فایل package.json و خط کد زیر را در بخش scripts اضافه کنید:

&quotproduction&quot: &quotcross-env NODE_ENV=production postcss assets/css/src/tailwind.css -o assets/css/dist/tailwind.min.css&quot

کد بالا فایل کامپایل شوند tailwind.css در آدرس assets/css/src/tailwind.css میگیره و خروجی کم حجم شده (کلاس های اضافه حذف شده) را در فایل tailwind.min.css در آدرس assets/css/src/tailwind.css -o assets/css/dist/tailwind.min.css قرار میدهد.

نکته: نام گذاری tailwind.min.css اشتباه است زیرا فقط کلاس های اضافه را حذف میکند اما فضا های خالی و فشرده سازی را انجام نمیدهد (عملیات minifi را انجام نمیدهد اما ما پسوند .min. قرار داده ایم) پس نامگذاری درست انجام بدهید.

مرحله سوم

برای گرفتن خروجی نهایی و کم حجم شده فقط کافیست دستور زیر را در ترمینال vscode بنویسید

npm run production

تمام! خروجی را با نام فایل مورد نظر در آدرس مورد نظر می سازد.

مثال واقعی

فایل package.json

&quotscripts&quot: {
    &quotbuild&quot: &quotpostcss css/tailwind.css -o css/style.css&quot,
    &quotwatch&quot: &quotpostcss css/tailwind.css -o css/style.css --watch&quot,
    &quotproduction&quot: &quotcross-env NODE_ENV=production postcss css/tailwind.css -o css/style.min.css&quot
},

(آخرین تصویر این مطلب تصویر کلی از این فایل هست)

نکته ای این روش در مقایسه با روشی که مطلب قبلی (لینکش در ابتدای همین مطلب آورده شده) وجود دارد اینکه روش قبلی چون از پلاگین purgecss برای postcss استفاده می کردیم تنظیمات آن را مانند تصویر زیر در فایل postcss.config.js می نوشیتم:

اما در این روش ما از فایل tailwind.config.js جهت تنظیمات و ستور را به صورت دستور ترمینال در فایل package.json آوردیم:

یادتان باشد که باز صفحه را از طریق minify کردن می توانید کم حجم تر کنید!

منبع