در توسعه وب، سرعت بارگذاری و بهینهسازی عملکرد از اهمیت بالایی برخوردار است. پلتفرم Microsoft .NET همواره در تلاش بوده تا ابزارهایی قدرتمند برای ساخت برنامههای سریع و کارآمد ارائه دهد. با معرفی .NET 10، تغییری بنیادین در نحوه سرویسدهی اسکریپتهای Blazor ایجاد شده است که تأثیری مستقیم بر عملکرد و بهینهسازی کش مرورگرها دارد. این تغییر، انتقال اسکریپتهای Blazor از یک منبع جاسازیشده (Embedded Resource) به یک دارایی ثابت وب (Static Web Asset) است. در این مقاله جامع، به بررسی عمیق این تغییر، مزایای آن، نحوه استفاده صحیح از آن در انواع مختلف برنامههای Blazor و نکات فنی مرتبط خواهیم پرداخت تا توسعهدهندگان بتوانند از این قابلیت جدید به بهترین نحو بهره ببرند.
دارایی ثابت وب (Static Web Asset) چیست و چرا اهمیت دارد؟
در نسخههای قبلی .NET، اسکریپت Blazor (مانند blazor.webassembly.js یا blazor.server.js) به عنوان یک منبع جاسازیشده درون اسمبلیهای ASP.NET Core قرار میگرفت. این روش، اگرچه کارآمد بود، اما قابلیتهای بهینهسازی پیشرفته مانند فشردهسازی خودکار و Fingerprinting (اثرانگشتگذاری) را محدود میکرد. با .NET 10، اسکریپت Blazor به یک دارایی ثابت وب تبدیل شده است. این تغییر به چه معناست؟
- فشردهسازی خودکار (Automatic Compression): سرویسدهی به عنوان یک دارایی ثابت، به فریمورک اجازه میدهد تا اسکریپت را به صورت خودکار فشرده کند (مثلاً با استفاده از الگوریتمهای Gzip یا Brotli). این کار به طور چشمگیری حجم فایل را کاهش میدهد و در نتیجه سرعت بارگذاری اولیه برنامه را افزایش میدهد.
- کشینگ هوشمند با Fingerprinting: یکی از مهمترین مزایای این رویکرد، قابلیت Fingerprinting است. در این روش، یک هش از محتوای فایل به نام آن اضافه میشود (مثلاً
blazor.webassembly.1a2b3c4d5e.js). این نام منحصربهفرد، به مرورگر اجازه میدهد تا فایل را به صورت «ابد» (forever) کش کند. هر زمان که محتوای فایل تغییر کند (مثلاً در یک بهروزرسانی جدید)، نام فایل نیز تغییر میکند و مرورگر مجبور به دانلود نسخه جدید میشود. این استراتژی، مشکل کشهای منقضیشده را حل کرده و پایداری عملکرد برنامه را تضمین میکند.
محل قرارگیری اسکریپت Blazor بر اساس مدلهای مختلف میزبانی
محل قرارگیری تگ اسکریپت (script tag) برای هر یک از مدلهای میزبانی Blazor متفاوت است. در .NET 10، این مسیرها به صورت استاندارد و قابل پیشبینی درآمدهاند.
Blazor Web App: این مدل، که از جدیدترین قابلیتهای Blazor مانند رندرینگ ترکیبی (Hybrid Rendering) بهره میبرد، اسکریپت خود را در کامپوننت ریشه برنامه با نام App.razor قرار میدهد. مسیر اسکریپت به شکل زیر است:
<script src="_framework/blazor.web.js"></script>
این اسکریپت، مسئول راهاندازی و مدیریت هر دو حالت رندرینگ سمت سرور و سمت کلاینت در Blazor Web App است.
Blazor Server: در این مدل، که پردازشها عمدتاً سمت سرور انجام میشود و از طریق SignalR با کلاینت ارتباط برقرار میشود، اسکریپت در صفحه میزبان (Host Page) قرار میگیرد. این فایل معمولاً _Host.cshtml یا _Layout.cshtml است. مسیر اسکریپت به این صورت است:
<script src="_framework/blazor.server.js"></script>
Standalone Blazor WebAssembly: برای برنامههایی که تماماً سمت کلاینت (Client-Side) اجرا میشوند، اسکریپت در فایل wwwroot/index.html قرار داده میشود. مسیر اسکریپت در این حالت به شکل زیر است:
<script src="_framework/blazor.webassembly.js"></script>
توجه: اگر پروژه Blazor Web App یا Server شما هیچ فایل *.razor نداشته باشد، فرآیند پابلیش (Publish) ممکن است از تولید داراییهای ثابت وب صرفنظر کند. برای اطمینان از تولید این داراییها، میتوانید خاصیت RequiresAspNetWebAssets را در فایل پروژه (با پسوند .csproj) به صورت صریح فعال کنید:
<PropertyGroup>
<RequiresAspNetWebAssets>true</RequiresAspNetWebAssets>
</PropertyGroup>
کشینگ کلاینت و Fingerprinting
Fingerprinting روشی است که به مرورگر اجازه میدهد فایلها را برای همیشه کش کند و تنها زمانی دوباره دانلود کند که محتوای آن فایل تغییر کرده باشد. این قابلیت در .NET 10 به شکلهای مختلفی در مدلهای میزبانی Blazor پیادهسازی شده است.
Standalone Blazor WebAssembly: برای فعال کردن Fingerprinting در این مدل، ابتدا باید خاصیت OverrideHtmlAssetPlaceholders را در فایل .csproj پروژه فعال کنید. سپس در فایل wwwroot/index.html، تگ اسکریپت را با یک نشانگر (Marker) خاص به شکل زیر تغییر دهید:
<script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>با این تغییر، فرآیند Build یا Publish به صورت خودکار نشانگر #[.{fingerprint}] را با هش محتوای فایل جایگزین میکند.
Blazor Web App (CSR): در این مدل، Fingerprinting به صورت پیشفرض و سمت سرور (Server-Side) مدیریت میشود. برای ارجاع به فایلهای CSS و JS با نام Fingerprint شده، باید از کامپوننت ImportMap و سینتکس @Assets استفاده کنید. کامپوننت ImportMap یک نقشه درونخط (inline) از داراییهای ثابت تولید میکند که مرورگر میتواند از آن برای یافتن مسیرهای صحیح استفاده کند.
<ImportMap />
<link rel="stylesheet" href="@Assets["app.css"]" />
<script type="module" src="@Assets["js/my-module.mjs"]"></script>
ImportMap به مرورگر میگوید که app.css در واقع به فایلی مانند _framework/static-assets/app.1a2b3c4d5e.css ارجاع دارد. این روش، Fingerprinting را بدون نیاز به تغییر دستی تگها، فعال میکند.
نحوه عملکرد تحویل دارایی ثابت
در نسخههای جدید ASP.NET Core، داراییهای ثابت با استفاده از روتینگهای سفارشی (MapStaticAssets) به جای میانافزار (Middleware) پیشفرض StaticFiles سرویسدهی میشوند. این روش به Blazor اجازه میدهد تا Fingerprinting، فشردهسازی و نقشهکشی (mapping) داراییها به مسیر _framework/ را به صورت هوشمند مدیریت کند. با این حال، در برخی سناریوها، ممکن است همچنان به استفاده از میانافزار UseStaticFiles نیاز داشته باشید:
- سرویسدهی فایلهایی که بخشی از فرآیند Build یا Publish نیستند.
- تعریف نگاشتهای سفارشی برای انواع محتوا (مانند فایلهای .wasm).
- اعمال یک پیشوند مسیر (path prefix) برای داراییهای WebAssembly در تنظیمات خاص میزبانی.
کد زیر نشان میدهد که چگونه میتوانید یک ContentTypeProvider سفارشی را بدون تداخل با نگاشتهای Blazor تعریف کنید:
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".wasm"] = "application/wasm";
app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
app.UseStaticFiles(); // تماس دوم برای حفظ تنظیمات پیشفرض Blazor
ملاحظات CSP (Content Security Policy)
اگر برنامه شما از یک CSP سختگیرانه استفاده میکند، باید به ImportMap توجه کنید. این کامپوننت یک تگ درونخط (inline) ایجاد میکند که ممکن است توسط CSP مسدود شود. برای حل این مشکل، میتوانید از SRI (Subresource Integrity) یا Nonces (یک توکن تصادفی) استفاده کنید.
خودآزمایی
کدام یک از عبارات زیر درباره تغییر Blazor در .NET 10 صحیح است؟
- اسکریپت Blazor اکنون به عنوان یک منبع جاسازیشده سرویسدهی میشود تا سرعت بیشتری داشته باشد.
- Fingerprinting اسکریپت تنها برای مدل Blazor Server فعال است.
- Static Web Asset امکان فشردهسازی و Fingerprinting خودکار را فراهم میکند.
- برای استفاده از
ImportMap نیازی به تغییر در CSP نیست.
نتیجهگیری
انتقال اسکریپت Blazor به Static Web Asset در .NET 10 یک گام مهم رو به جلو برای بهینهسازی عملکرد برنامههای Blazor است. این تغییر با فعال کردن فشردهسازی و Fingerprinting، به توسعهدهندگان کمک میکند تا سرعت بارگذاری اولیه را کاهش داده و از کشینگ مرورگر به صورت هوشمندانه و پایدار بهره ببرند. با درک صحیح محل قرارگیری اسکریپت در هر مدل میزبانی و استفاده درست از ابزارهایی مانند ImportMap و سینتکس @Assets، میتوان برنامههای Blazor سریعتر و پایدارتری ساخت. این رویکرد جدید، Blazor را به ابزاری قدرتمندتر و رقابتیتر در اکوسیستم توسعه وب تبدیل میکند.
پاسخ خودآزمایی
پاسخ صحیح: گزینه 3. Static Web Asset امکان فشردهسازی و Fingerprinting خودکار را فراهم میکند.