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

از آنجا که مرحله اول طولانی است، اگر می خواهید فقط برنامه را ببینید، لطفا از آن بگذرید.

محیط

ویژوال استودیو

• ویژوال استودیو ۲۰۱۹

ASP.NET هسته

• 3.1 (صفحه تیغ، MVC)

درباره پرونده های ذخیره شده در صفحات وب

هنگامی که به یک صفحه وب مراجعه می کنید، علاوه بر HTML، .js فایل (جاوا اسکریپت)، .css فایل (stylesheets)، و فایل های تصویر برای نمایش و اجرا به مشتری دانلود می شوند. با این حال ، برخی از فایل های تصویر بزرگ هستند ، و دانلود آنها را هر بار می تواند پر هزینه باشد. همچنین اغلب از .js و .css در صفحات دیگر استفاده می شود و هر بار نیازی به دانلود آن ها نیست. این فایل ها ممکن است پس از دانلود به طور موقت در مرورگر شما ذخیره شوند. این را caching می نامند.

اگر فایل ذخیره شده باشد، به عنوان مثال، HTML از سرور وب هنگام بازدید از همان صفحه دانلود می شود. فایل های دیگر مشاهده و اجرا با استفاده از فایل های محلی ذخیره شده بدون دانلود آنها را اگر کش وجود دارد. این کار باعث کاهش بار روی سرور می شود و به مشتری اجازه می دهد تا بدون مصرف پهنای باند ارتباطی، صفحه را با سرعت بالا مشاهده کند.

مشکلات ناشی از درد

این که آیا فایل های قرار داده شده بر روی سرور و فایل های cached یکسان هستند به طور کلی بستگی به مسیر فایل شرح داده شده در HTML. همان مسیر فایل اساسا فایل های cached است. (ممکن است شرایط دیگری هم وجود داشته باشد، اما مسیر فایل قطعی است)

در زیر مثالی از یک مسیر پرونده می باشد. پارامترهای ویژگی href و src اعمال می شود.

<!-- スタイルシート (.css) -->
<link rel="stylesheet" href="/css/site.css" />

<!-- 画像ファイル -->
<img src="/image/sample.png" alt="サンプル画像" />

<!-- JavaScript (.js) -->
<script src="/js/site.js"></script>

با این حال، این رفتار می تواند یک مشکل باشد.

به عنوان مثال، اگر یک کاربر یک فایل نسخه ۱ جاوا اسکریپت داشته باشد وقتی برای اولین بار به آن دسترسی پیدا می کند، فایل نسخه ۱ جاوا اسکریپت کش می شود. سپس سرور فایل نسخه ۲ جاوا اسکریپت را منتشر می کند. اگر مسیر فایل جاوا اسکریپت همان زمانی بود که کاربر از همان صفحه بازدید کرد، ممکن است از فایل نسخه ۱ جاوا اسکریپت ذخیره شده بدون دانلود فایل سرور نسخه ۲ جاوا اسکریپت استفاده شود. این امر می تواند باعث نقص هایی شود که مردم قصد آن را ندارد.

در این زمان، من فکر می کنم که شما اغلب می بینید "سعی کنید برای حذف کش" به عنوان یکی از اندازه های متقابل در سمت کاربر، اما این ممکن است علت.

نحوه مقابله با مشکلات کش در سمت سرور

همانطور که در بالا ذکر شد، اینکه آیا از فایل های cached استفاده می شود تا حد زیادی به مسیر فایل (URL) بستگی دارد.

بنابراین وقتی فایلی را به روز می کنید، می توانید با تغییر نام فایل، آن را مجبور به دانلود یک فایل جدید کنید.

به عنوان مثال، اگر یک فایل نسخه 1

<link rel="stylesheet" href="/css/site.css" />

هنگامی که فایل نسخه 2 به روز شد

<link rel="stylesheet" href="/css/site2.css" />

سایت 2 .css سمت مشتری است.

با این حال، اگر این کار را به صورت دستی انجام دهید، می تواند دست و پا گیر و مستعد خطا برای تغییر مسیرها و تغییر نام فایل های فیزیکی باشد.

افزودن پارامترهای پرس و جو به یک مسیر پرونده

نحوه کار وب به شما اجازه می دهد تا پارامترهای پرس و جو را با ترکیبی از کلیدها و مقادیر پس از مسیر اضافه کنید. در مکانیزم caching کلاینت، حتی اگر فایل های فیزیکی یکسان باشند، اگر پارامترهای پرس و جو متفاوت باشند، به عنوان فایل های جداگانه شناخته خواهند شد. پارامترهای پرس و جو مقادیری هستند که هیچ معنایی در صورتی که هیچ هدفی برای استفاده وجود ندارد حتی اگر اضافه شوند.

پارامترهای پرس و جو را می توان به مسیر در قالب زیر آپانش کرد:

<!-- クエリパラメータなし -->
<link rel="stylesheet" href="/css/site.css" />

<!-- クエリパラメータあり -->
<link rel="stylesheet" href="/css/site.css?key=value" />

با استفاده از این مکانیزم باید مسیر را تغییر دهید، اما نیازی به تغییر نام پرونده فیزیکی نیست.

اضافه کردن پارامترهای پرس و جو به طور خودکار در برنامه (مثال بد)

با افزودن خودکار این پارامتر پرس و جو در برنامه، لازم نیست در صورت تغییر فایل ایستا، مسیر پرونده را به صورت دستی تغییر دهید.

یک مثال آسان این است که زمان فعلی را به پارامترهای پرس و جو اضافه کنید زمانی که یک کاربر به یک صفحه وب دسترسی پیدا می کند. این بسیار آسان است چرا که من فکر می کنم شما می توانید در یک خط در هر زبان برنامه نویسی بنویسید. من فکر می کنم مثال نسل به این شکل به نظر می رسد:

<link rel="stylesheet" href="/css/site.css?20210223120000" />

با این حال، این نقطه ضعف است که مزیت caching در همه از دست رفته است. مسیر هر بار که از یک صفحه وب بازدید می کنید تغییر می کند، با اینکه همان فایل قبلی است. از آنجا که آن را به عنوان یک فایل جداگانه به رسمیت شناخته شده, فایل های CSS از سرور هر بار دانلود. نسخه های قدیمی تر از فایل ها دیگر استفاده نخواهد شد، اما این همان است که به سادگی با استفاده از ویژگی های caching نیست.

ASP.NET کنترل نسخه با اضافه کردن پارامترهای پرس و جو در هسته

از آنجا که هیچ پیش از ASP.NET هسته فراهم می کند یک راه حل استاندارد برای این مشکل caching وجود دارد.

شما فقط نیاز به اضافه کردن یک ویژگی به برچسب است که توصیف asp-append-version="true" مسیر فایل به شرح زیر است:

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
<img src="/image/sample.png" asp-append-version="true"/>
<script src="~/js/site.js" asp-append-version="true"></script>

اگر شما در واقع پس از انتشار به وب به صفحه مراجعه کنید، به صورت زیر گسترش خواهد یافت:

<link rel="stylesheet" href="/css/site.css?v=S2ihmzMFFc3FWmBWsR-NiddZWa8kbyaQYBx2FDkIoHs" />
<img src="/image/sample.png?v=Z0tUqQmLt_3L_NSzPmkbZKxL8cMxglf08BwWb5Od5z4" />
<script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>

یک رشته تصادفی به هم متصل می شود، اما این کار هر بار که دسترسی انجام می شود تغییر نمی کند. این رشته یک مقدار هش است و بر اساس محتویات فایل مرجع تولید می شود. بنابراین تا زمانی که محتویات فایل تغییر نمی کند، همان رشته تولید می شود. اگر محتویات فایل تغییر کند، به یک رشته جدید تغییر می کند.

این تضمین می کند که فایل های cached ترجیح داده می شوند زیرا اگر فایل ها یکسان هستند، مسیرها یکسان هستند. همانطور که فایل به روز شده است، مسیر تغییر می کند، بنابراین شما می توانید فایل جدید را دانلود و استفاده کنید.

به هر حال، این ویژگی تنها برای فایل های استاتیک قرار داده شده asp-append-version="true" در پوشه wwwroot استاندارد است. توجه داشته باشید که رشته های تصادفی در هنگام تنظیم به فایل های دیگر گسترش نمی یابند.

درباره برنامه نمونه

قالب پروژه پیش فرض .js سایت asp-append-version است. سایت.css آن را asp-append-version ندارد.

برنامه نمونه اضافه _Layout.cshtml می کند .js سایت و .css از asp-append-version فایل. ما همچنین اضافه کردن برچسب های img به asp-append-version عنوان یک مرجع.