در بسیاری از پروژههای وب، بهویژه زمانی که از فریمورکهایی مانند Bootstrap استفاده میشود، حجم قابل توجهی از فایلهای CSS هرگز در صفحات واقعی سایت استفاده نمیشوند. این استایلهای بلااستفاده ممکن است مربوط به کامپوننتهایی باشند که در پروژه استفاده نشدهاند یا کلاسهایی که در طول توسعه اضافه شدهاند اما دیگر کاربردی ندارند.
نتیجه این موضوع، فایلهای CSS بزرگتر از حد لازم است؛ فایلهایی که باید توسط مرورگر دانلود، پردازش و اعمال شوند. همین مسئله میتواند باعث افزایش زمان بارگذاری صفحه و کاهش امتیاز شاخصهایی مانند First Contentful Paint (FCP) و Largest Contentful Paint (LCP) شود.
در این مقاله بررسی میکنیم چگونه با استفاده از ابزار PurgeCSS میتوان CSSهای بلااستفاده را از پروژههای ASP.NET Core حذف کرد و فایلهای استایل را به شکل قابل توجهی سبکتر نمود.
چرا CSSهای بلااستفاده ایجاد میشوند؟
در پروژههای واقعی، چند عامل رایج باعث ایجاد حجم زیادی از CSSهای غیرضروری میشود:
- استفاده از فریمورکهای بزرگ مانند Bootstrap
- اضافه شدن استایلها در طول زمان و فراموش شدن آنها
- استفاده از قالبهای آماده
- استفاده از باندلهای CSS که شامل همه کامپوننتها هستند
برای مثال، Bootstrap صدها کلاس مختلف برای جدولها، فرمها، گریدها، مودالها و کامپوننتهای متعدد دارد. اما در یک پروژه واقعی ممکن است فقط بخش کوچکی از این کلاسها استفاده شود.
با این حال مرورگر مجبور است کل فایل CSS را دانلود و پردازش کند.
اینجاست که ابزار PurgeCSS وارد عمل میشود.
PurgeCSS چگونه کار میکند؟
PurgeCSS فایلهای پروژه را اسکن میکند و بررسی میکند چه کلاسهایی در HTML، Razor یا JavaScript استفاده شدهاند. سپس فایل CSS ورودی را تحلیل میکند و فقط استایلهایی را نگه میدارد که در پروژه استفاده شدهاند.
به عبارت ساده:
- کلاسهایی که در پروژه استفاده شدهاند نگه داشته میشوند
- کلاسهایی که در هیچ فایل پروژه دیده نمیشوند حذف میشوند
این فرآیند میتواند حجم فایل CSS را به شکل قابل توجهی کاهش دهد، بدون اینکه ظاهر سایت تغییر کند.
نصب PurgeCSS
برای استفاده از PurgeCSS ابتدا باید آن را از طریق npm نصب کنید:
npm install purgecss --save-dev
پس از نصب، میتوان تنظیمات آن را در یک فایل جاوااسکریپت تعریف کرد.
تنظیم PurgeCSS در پروژه ASP.NET Core
در پروژههای ASP.NET Core معمولاً کلاسهای CSS در فایلهای Razor و JavaScript استفاده میشوند. بنابراین باید این فایلها در تنظیمات PurgeCSS مشخص شوند.
module.exports = {
content: [
‘./Views/**/*.cshtml’,
‘./Pages/**/*.cshtml’,
‘./wwwroot/js/**/*.js’
],
css: [‘./wwwroot/css/site.bundle.min.css’],
output: ‘./wwwroot/css/site.purged.min.css’,
safelist: [
/^bi$/,
/^bi-/
]
}
این تنظیمات به PurgeCSS میگوید:
- تمام فایلهای Razor و JavaScript پروژه را بررسی کند
- فایل CSS باندلشده را تحلیل کند
- نسخه بهینهشده را در یک فایل جدید ذخیره کند
معنی بخشهای مختلف تنظیمات
بخش content
در این قسمت مسیر فایلهایی مشخص میشود که ممکن است در آنها کلاسهای CSS استفاده شده باشند.
content: [
‘./Views/**/*.cshtml’,
‘./Pages/**/*.cshtml’,
‘./wwwroot/js/**/*.js’
]
در پروژههای ASP.NET Core، اکثر کلاسها در فایلهای Razor استفاده میشوند، اما گاهی اوقات کلاسها توسط JavaScript نیز اضافه میشوند. به همین دلیل پوشه JS نیز در این بخش قرار داده شده است.
بخش css
این قسمت مشخص میکند کدام فایل CSS باید پاکسازی شود:
css: [‘./wwwroot/css/site.bundle.min.css’]
معمولاً بهتر است ابتدا فایلهای CSS باندل و Minify شوند و سپس PurgeCSS روی نسخه نهایی اجرا شود.
بخش output
فایل خروجی PurgeCSS در این مسیر ذخیره میشود:
output: ‘./wwwroot/css/site.purged.min.css’
این فایل همان نسخه سبکشده CSS است که باید در سایت استفاده شود.
بخش safelist
یکی از مهمترین بخشهای تنظیم PurgeCSS، safelist است.
برخی کلاسها ممکن است در زمان اجرا توسط JavaScript یا رفتارهای Bootstrap به صفحه اضافه شوند. اگر PurgeCSS این کلاسها را در فایلهای پروژه پیدا نکند، ممکن است آنها را حذف کند و باعث ایجاد مشکل در رابط کاربری شود.
برای جلوگیری از این مشکل میتوان کلاسهای خاصی را در safelist قرار داد:
safelist: [
/^bi$/,
/^bi-/
]
در این مثال تمام کلاسهایی که با bi- شروع میشوند (مربوط به Bootstrap Icons) حذف نخواهند شد.
همچنین میتوان کلاسهای مربوط به مودالها و رفتارهای Bootstrap را نیز به safelist اضافه کرد:
safelist: {
standard: [
‘bi’,
/^bi-/,
/^modal-/,
/^dropdown-/,
/^nav-/,
/^btn-/,
/^bg-/,
‘show’,
‘active’,
‘fade’,
‘collapsing’
]
}
اجرای PurgeCSS از طریق خط فرمان
اگر بخواهید PurgeCSS را به صورت مستقیم اجرا کنید، میتوانید از دستور زیر استفاده کنید:
purgecss --css ./wwwroot/css/site.bundle.min.css
–content ./Views//*.cshtml ./wwwroot/js//*.js
–output ./wwwroot/css/site.purged.min.css
–safelist show active fade collapsing modal-backdrop
این دستور فایل CSS اصلی را بررسی میکند و نسخهای سبکتر از آن تولید میکند.
جایگزینی فایل CSS در Layout
پس از تولید فایل CSS بهینهشده، باید آن را در Layout پروژه جایگزین کنید.
استفاده از ویژگی asp-append-version باعث میشود در صورت تغییر فایل، نسخه جدید آن توسط مرورگر دانلود شود و کش قدیمی استفاده نشود.
نکته مهم درباره کلاسهای داینامیک
در بسیاری از پروژهها، برخی کلاسها به صورت داینامیک در JavaScript یا Razor ساخته میشوند.
برای مثال:
element.classList.add(“show”);
یا در Razor:
var cssClass = isActive ? “active” : “”;
اگر این کلاسها در فایلهای اسکنشده وجود نداشته باشند، PurgeCSS ممکن است آنها را حذف کند. به همین دلیل باید این کلاسها را در safelist قرار داد.
تأثیر حذف CSSهای بلااستفاده بر Performance
بعد از اجرای PurgeCSS معمولاً نتایج زیر مشاهده میشود:
- کاهش قابل توجه حجم فایل CSS
- لود سریعتر صفحات
- بهبود امتیاز Lighthouse
- کاهش زمان رندر اولیه صفحه
در بسیاری از پروژهها، حذف CSSهای بلااستفاده میتواند بین 50 تا 80 درصد از حجم فایل CSS را کاهش دهد.
این کاهش حجم به خصوص در سایتهایی که از Bootstrap یا کتابخانههای بزرگ CSS استفاده میکنند بسیار چشمگیر است.
جمعبندی
CSSهای بلااستفاده یکی از عوامل پنهان کندی بسیاری از وبسایتها هستند. در حالی که ممکن است در ظاهر مشکلی دیده نشود، اما حجم بالای فایلهای استایل میتواند باعث کاهش سرعت بارگذاری صفحات شود.
ابزار PurgeCSS راهکاری ساده اما بسیار مؤثر برای حذف این استایلهای غیرضروری است. با اسکن فایلهای پروژه و نگه داشتن فقط کلاسهای استفادهشده، میتوان نسخهای بسیار سبکتر از فایل CSS تولید کرد.
در کنار تکنیکهایی مانند Bundling، Minification و بهینهسازی فونتها، استفاده از PurgeCSS میتواند تأثیر قابل توجهی در بهبود Performance پروژههای ASP.NET Core داشته باشد.
قدم بعدی در بهینهسازی فرانتاند
بعد از کاهش حجم CSS، یکی از بزرگترین منابعی که هنوز میتواند سرعت سایت را تحت تأثیر قرار دهد، تصاویر هستند.
در مقاله بعدی بررسی میکنیم چگونه با استفاده از فرمتهای مدرن مانند WebP، تکنیک Lazy Loading و بهینهسازی ابعاد تصاویر، حجم صفحات وب را به شکل قابل توجهی کاهش دهیم.