Statik dosyanın önbelleğe alınmış eski sürümünün kullanılmamak için güncel olduğunu belirten bir sürüm ekleme

Ön aşama uzun olduğundan, yalnızca programı görmek istiyorsanız, lütfen atlayın.

Ortam

Visual Studio

• Visual Studio 2019

ASP.NET Çekirdek

• 3.1 (Razor sayfası, MVC)

Web sayfalarındaki dosyaları önbelleğe alma hakkında

Bir Web sayfasını ziyaret ettiğinizde, HTML'ye ek olarak, .js dosyaları (Javascript), .css dosyalar (stil sayfaları) ve görüntü dosyaları görüntülenmek ve yürütülmesi için istemciye yüklenir. Ancak, bazı görüntü dosyaları büyüktür ve bunları her zaman indirmek maliyetli olabilir. Ayrıca, .js dosyaları ve .css dosyaları genellikle diğer sayfalarda kullanılır ve her seferinde indirmenize gerek yoktur. Bu dosyalar indirildikten sonra geçici olarak tarayıcınıza kaydedilebilir. Buna önbelleğe alma denir.

Örneğin, dosya önbelleğe alınmışsa, aynı sayfayı ziyaret ettiğinizde HTML Web sunucusundan yüklenir. Diğer dosyalar görüntülenir ve önbellek varsa karşıdan yüklenmeden yerel olarak depolanan dosyalar kullanılarak çalıştırılır. Bu, sunucudaki yükü azaltır ve istemcinin iletişim bant genişliğini tüketmeden sayfayı yüksek hızda görüntülemesini sağlar.

Önbelleğe almanın neden olduğu sorunlar

Sunucuya yerleştirilen dosyaların ve önbelleğe alınan dosyaların aynı olup olmadığı genellikle HTML'de açıklanan dosya yoluna bağlıdır. Aynı dosya yolu temelde önbelleğe alınmış dosyalardır. (Başka koşullar da olabilir, ancak dosya yolu kesindir)

Aşağıda bir dosya yolu örneği verilmiştir. href ve src öznitelik parametreleri uygulanır.

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

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

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

Ancak, bu davranış bir sorun olabilir.

Örneğin, bir kullanıcının ilk erişildiğinde bir sürüm 1 JavaScript dosyası varsa, sürüm 1 JavaScript dosyası önbelleğe alınır. Sunucu daha sonra sürüm 2 JavaScript dosyasını yayımlar. Kullanıcı aynı sayfayı ziyaret ettiğinde JavaScript dosya yolu aynıysa, sunucu sürüm 2 JavaScript dosyası indirilmeden önbelleğe alınan sürüm 1 Javascript dosyası kullanılabilir. Bu, halkın istemediği kusurlara neden olabilir.

Şu anda, kullanıcı tarafındaki karşı önlemlerden biri olarak sık sık "Önbelleği silmeye çalışın" ı gördüğünüzü düşünüyorum, ancak bunun nedeni bu olabilir.

Sunucu tarafındaki önbellek sorunlarıyla nasıl başa çıkılır

Yukarıda belirtildiği gibi, önbelleğe alınan dosyaların kullanılıp kullanılmadığı büyük ölçüde dosya yoluna (URL) bağlıdır.

Bu nedenle, bir dosyayı güncelleştirdiğinizde, dosya adını değiştirerek dosyayı yeni bir dosyayı karşıdan yüklemeye zorlayabilirsiniz.

Örneğin, bir sürüm 1 dosyası

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

Dosya sürüm 2 güncelleştirildiğinde

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

Site2 istemci tarafında .css.

Ancak, bunu el ile yaparsanız, yolları değiştirmek ve fiziksel dosyaları yeniden adlandırmak hantal ve hataya eğilimli olabilir.

Dosya yoluna sorgu parametreleri ekleme

Web'in çalışma şekli, yoldan sonra anahtar ve değer birleşimiyle sorgu parametreleri eklemenize olanak tanır. İstemci önbelleğe alma mekanizmasında, fiziksel dosyalar aynı olsa bile, sorgu parametreleri farklıysa, ayrı dosyalar olarak tanınırlar. Sorgu parametreleri, eklenseler bile kullanım amacı yoksa hiçbir anlamı olmayan değerlerdir.

Sorgu parametreleri yola aşağıdaki biçimde eklenebilir:

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

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

Bu mekanizmayı kullanarak, yolu değiştirmeniz gerekir, ancak fiziksel dosyayı yeniden adlandırmanız gerekmez.

Programa otomatik olarak sorgu parametreleri ekleme (kötü örnek)

Bu sorgu parametresini programa otomatik olarak ekleyerek, Statik dosyayı değiştirirseniz dosya yolunu el ile değiştirmeniz gerekmez.

Kolay bir örnek, kullanıcı bir Web sayfasına erişirken geçerli saati sorgu parametrelerine eklemektir. Bu çok kolay çünkü bence herhangi bir programlama dilinde tek satırda yazabilirsiniz. Bence kuşak örneği şöyle görünüyor:

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

Bununla birlikte, bu, önbelleğe alma avantajının hiç kaybolmadığı dezavantaja sahiptir. Bir Web sayfasını her ziyaret ettinizde, bir öncekiyle aynı dosya olmasına rağmen yol değişir. Ayrı bir dosya olarak tanındığından, css dosyaları her seferinde sunucudan indirilir. Dosyaların eski sürümleri artık kullanılmayacak, ancak bu sadece önbelleğe alma özelliklerini kullanmamakla aynıdır.

Core'a sorgu parametreleri ekleyerek sürüm denetimini ASP.NET

Alcause pre ASP.NET Core bu önbelleğe alma sorununa standart bir çözüm sağlar.

Etikete dosya yolunu aşağıdaki gibi açıklayan bir öznitelik eklemeniz asp-append-version="true" yeterlidir:

<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>

Sayfa web'de yayımlandıktan sonra gerçekten ziyaret ederseniz, aşağıdaki gibi genişler:

<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>

Rasgele bir dize eklenir, ancak bu her erişim yapıldığında değişmez. Bu dize bir karma değerdir ve başvurulan dosyanın içeriğine göre oluşturulur. Bu nedenle, dosyanın içeriği değişmediği sürece aynı dize oluşturulur. Dosyanın içeriği değişirse, yeni bir dizeye değiştirilir.

Bu, önbelleğe alınmış dosyaların tercih edilir, çünkü dosyalar aynıysa, yollar aynıdır. Dosya güncelleştirildikçe, yol değişir, böylece yeni dosyayı indirip kullanabilirsiniz.

Bu asp-append-version="true" arada, bu öznitelik yalnızca wwwroot klasörüne yerleştirilen statik dosyalar için standarttır. Rasgele dizelerin diğer dosyalara ayarlandığında genişletilmediğini unutmayın.

Örnek program hakkında

Varsayılan proje şablonu .js site asp-append-version şablonu. Site.css asp-append-version eklenmiş bir site yok.

Örnek program _Layout.cshtml dosyanın site.js ve site.css asp-append-version ekler. Referans olarak img etiketleri de asp-append-version ekliyoruz.