Menambahkan versi yang menunjukkan bahwa versi lama cache dari file statis sudah diperbarui untuk menghindari penggunaan

Karena panggung depan panjang, jika Anda hanya ingin melihat program, silakan lewati.

Lingkungan

Visual Studio

• Studio Visual 2019

ASP.NET Inti

• 3.1 (Halaman silet, MVC)

Tentang file cache di halaman Web

Saat Anda mengunjungi halaman Web, selain HTML, file .js (Javascript), .css file (lembar gaya), dan file gambar diunduh ke klien untuk ditampilkan dan dieksekusi. Namun, beberapa file gambar besar, dan mengunduhnya setiap kali bisa mahal. Selain itu, .js file .css file lain sering digunakan di halaman lain, dan tidak perlu mengunduhnya setiap saat. File-file ini dapat disimpan sementara di browser Anda setelah mengunduh. Ini disebut caching.

Jika file di-cache, misalnya, HTML diunduh dari server Web saat Anda mengunjungi halaman yang sama. File lain dilihat dan dijalankan menggunakan file yang disimpan secara lokal tanpa mengunduhnya jika ada cache. Ini mengurangi beban di server dan memungkinkan klien untuk melihat halaman dengan kecepatan tinggi tanpa mengkonsumsi bandwidth komunikasi.

Masalah yang disebabkan oleh caching

Apakah file yang ditempatkan di server dan file yang di-cache sama umumnya tergantung pada jalur file yang dijelaskan dalam HTML. Jalur file yang sama pada dasarnya adalah file yang di-cache. (Mungkin ada kondisi lain, tetapi jalur berkas sudah pasti)

Berikut ini adalah contoh jalur file. Parameter atribut href dan src berlaku.

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

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

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

Namun, perilaku ini bisa menjadi masalah.

Misalnya, jika pengguna memiliki file JavaScript versi 1 saat mereka pertama kali mengaksesnya, file JavaScript versi 1 di-cache. Server kemudian menerbitkan file JavaScript versi 2. Jika jalur file JavaScript sama ketika pengguna mengunjungi halaman yang sama, file Javascript versi 1 yang di-cache tanpa mengunduh file JavaScript versi server dapat digunakan. Hal ini dapat menyebabkan cacat yang tidak diinginkan oleh masyarakat.

Pada saat ini, saya pikir Anda sering melihat "Cobalah untuk menghapus cache" sebagai salah satu penanggulangan di sisi pengguna, tetapi ini mungkin penyebabnya.

Bagaimana menangani masalah cache di sisi server

Seperti disebutkan di atas, apakah file yang di-cache digunakan sangat tergantung pada jalur file (URL).

Oleh karena itu, ketika Anda memperbarui file, Anda dapat memaksanya untuk mengunduh file baru dengan mengubah nama file.

Misalnya, jika file versi 1

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

Ketika file diperbarui versi 2

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

Site2 .css di sisi klien.

Namun, jika Anda melakukan ini secara manual, itu bisa rumit dan rentan terhadap kesalahan untuk mengubah jalur dan mengganti nama file fisik.

Menambahkan parameter kueri ke jalur file

Cara kerja Web memungkinkan Anda menambahkan parameter kueri dengan kombinasi tombol dan nilai setelah jalur. Dalam mekanisme caching klien, bahkan jika file fisik sama, jika parameter kueri berbeda, mereka akan dikenali sebagai file terpisah. Parameter kueri adalah nilai yang tidak memiliki arti jika tidak ada tujuan penggunaan meskipun ditambahkan.

Parameter kueri bisa ditambahkan ke jalur dalam format berikut:

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

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

Dengan menggunakan mekanisme ini, Anda perlu mengubah jalur, tetapi Anda tidak perlu mengganti nama file fisik.

Menambahkan parameter kueri secara otomatis dalam program (contoh buruk)

Dengan menambahkan parameter kueri ini secara otomatis dalam program, Anda tidak perlu mengubah jalur file secara manual jika Anda mengubah file statis.

Contoh mudahnya adalah menambahkan waktu saat ini ke parameter kueri saat pengguna mengakses halaman Web. Ini sangat mudah karena saya pikir Anda dapat menulis dalam satu baris dalam bahasa pemrograman apa pun. Saya pikir contoh generasi terlihat seperti ini:

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

Namun, ini memiliki kerugian bahwa keuntungan dari caching hilang sama sekali. Jalur berubah setiap kali Anda mengunjungi halaman Web, meskipun file tersebut sama dengan yang sebelumnya. Karena diakui sebagai file terpisah, file css diunduh dari server setiap saat. Versi file yang lebih lama tidak akan lagi digunakan, tetapi ini sama dengan tidak menggunakan fitur caching.

ASP.NET versi anda dengan menambahkan parameter kueri di Core

Alcause tidak ada pra ASP.NET Core memberikan solusi standar untuk masalah caching ini.

Anda hanya perlu menambahkan atribut ke tag yang menjelaskan asp-append-version="true" jalur file sebagai berikut:

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

Jika Anda benar-benar mengunjungi halaman setelah diterbitkan ke Web, itu akan berkembang sebagai berikut:

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

String acak ditambahkan, tetapi ini tidak berubah setiap kali akses dibuat. String ini adalah nilai hash dan dihasilkan berdasarkan konten file yang direferensikan. Oleh karena itu, string yang sama dihasilkan selama isi file tidak berubah. Jika isi file berubah, maka akan diubah menjadi string baru.

Ini memastikan bahwa file singgahan lebih disukai karena jika filenya sama, jalurnya sama. Saat file diperbarui, jalur berubah, sehingga Anda dapat mengunduh dan menggunakan file baru.

By the asp-append-version="true" way, atribut ini standar hanya untuk file statis yang ditempatkan di folder wwwroot. Perhatikan bahwa string acak tidak diperluas saat diatur ke file lain.

Tentang program sampel

Templat proyek default .js asp-append-version situs. Situs.css asp-append-version tidak memiliki ditambahkan ke situs tersebut.

Program sampel _Layout.cshtml menambahkan situs.js dan .css asp-append-version file. Kami juga menambahkan tag img sebagai asp-append-version referensi.