در بسیاری از پروژههای ASP.NET Core، فایلهای CSS و JavaScript به صورت جداگانه در صفحه بارگذاری میشوند. این موضوع در ظاهر ساده است، اما در عمل باعث افزایش تعداد درخواستهای HTTP، ایجاد زنجیره درخواستهای حیاتی (Chaining Critical Requests) و کاهش امتیاز ابزارهایی مثل GTmetrix میشود.
در این مقاله، یک روش حرفهای برای بهینهسازی سرعت سایت با استفاده از Bundling در ASP.NET Core را به صورت عملی و مرحلهبهمرحله بررسی میکنیم.
- کاهش تعداد HTTP Requests
- حذف Chaining Critical Requests
- بهبود امتیاز GTmetrix
- بهینهسازی برای محیط Production
1. مشکل رایج در پروژههای ASP.NET Core
در بسیاری از پروژهها، Layout شامل چندین فایل CSS و JS است:
<!-- فایلهای CSS متعدد -->
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="swiper.css">
<link rel="stylesheet" href="aos.css">
<!-- فایلهای JS متعدد -->
<script src="bootstrap.js"></script>
<script src="swiper.js"></script>
<script src="main.js"></script>
در این حالت، مرورگر برای هر فایل یک درخواست جداگانه ارسال میکند. اگر فقط 10 فایل CSS و JS داشته باشیم، یعنی 10 درخواست اضافی به سرور.
مشکلات این روش:
- افزایش تعداد Request
- افزایش زمان TTFB و Load Time
- ایجاد Render Blocking
- کاهش امتیاز GTmetrix
2. تفاوت Bundling و Compression
قبل از پیادهسازی، باید تفاوت این دو مفهوم را بدانیم:
- Bundling: ترکیب چند فایل در یک فایل واحد (کاهش تعداد درخواست)
- Compression: فشردهسازی محتوا برای کاهش حجم انتقالی
Bundling باعث کاهش تعداد Request میشود، در حالی که Compression باعث کاهش حجم هر Request میشود. این دو مکمل یکدیگر هستند.
3. پیادهسازی Bundling در زمان Build (روش حرفهای)
بهترین روش در ASP.NET Core استفاده از Build-Time Bundling است؛ یعنی فایلها هنگام Build پروژه ترکیب شوند و در Production آماده باشند.
ابتدا فایل bundleconfig.json را در ریشه پروژه ایجاد میکنیم:
[
{
“outputFileName”: “wwwroot/css/site.bundle.min.css”,
“inputFiles”: [
“wwwroot/assets/vendor/bootstrap/css/bootstrap.min.css”,
“wwwroot/assets/vendor/swiper/swiper-bundle.min.css”,
“wwwroot/assets/css/main.css”
],
“minify”: {
“enabled”: false
}
},
{
“outputFileName”: “wwwroot/js/site.bundle.min.js”,
“inputFiles”: [
“wwwroot/assets/vendor/bootstrap/js/bootstrap.bundle.min.js”,
“wwwroot/assets/vendor/swiper/swiper-bundle.min.js”,
“wwwroot/assets/js/main.js”
],
“minify”: {
“enabled”: false
}
}
]
با این تنظیمات، تمام فایلهای CSS در یک فایل و تمام فایلهای JS در یک فایل ترکیب میشوند.
4. استفاده از فایلهای Bundle در Layout
بعد از Build پروژه، فقط دو فایل زیر را در Layout فراخوانی میکنیم:
<!-- CSS Bundle -->
<link rel="stylesheet" href="~/css/site.bundle.min.css" asp-append-version="true" />
<!-- JS Bundle -->
<script src="~/js/site.bundle.min.js" defer asp-append-version="true"></script>
نکات مهم:
- asp-append-version برای مدیریت Cache ضروری است.
- استفاده از defer مانع Render Blocking میشود.
- ترتیب فایلها در bundle مهم است (فایل main.css در انتها قرار گیرد).
5. نتیجه عملی در GTmetrix
بعد از اعمال Bundling، تغییرات زیر مشاهده میشود:
- کاهش محسوس تعداد HTTP Requests
- حذف Chaining Critical Requests
- بهبود Load Time
- افزایش Structure Score
در بسیاری از پروژهها، امتیاز از D یا C به B یا حتی A ارتقا پیدا میکند.
6. فعالسازی Compression در ASP.NET Core
برای تکمیل بهینهسازی، بهتر است Response Compression را نیز فعال کنیم:
builder.Services.AddResponseCompression(options =>
{
options.EnableForHttps = true;
});
این کار باعث فعال شدن Gzip یا Brotli میشود و حجم انتقالی فایلها را کاهش میدهد.
7. اشتباهات رایج در بهینهسازی سرعت
- Minify دوباره فایلهایی که از قبل min شدهاند
- نادیده گرفتن ترتیب فایلهای CSS
- عدم استفاده از defer برای JavaScript
- عدم بررسی نتیجه در Production
8. جمعبندی نهایی
Bundling یکی از سادهترین اما مؤثرترین روشهای افزایش سرعت در ASP.NET Core است. با کاهش تعداد درخواستهای HTTP و ترکیب آن با Compression، میتوان به بهبود چشمگیر در عملکرد سایت دست یافت.
اگر در پروژههای خود با کاهش سرعت، امتیاز پایین GTmetrix یا تعداد بالای Request مواجه هستید، پیادهسازی Build-Time Bundling میتواند یک راهحل حرفهای و پایدار برای محیط Production باشد.
این تکنیک به خصوص در پروژههای Enterprise که ساختار فرانتاند پیچیدهتری دارند، نقش کلیدی در بهینهسازی عملکرد ایفا میکند.