Adăugați o versiune care indică faptul că versiunea veche memorată în cache a fișierului static este actualizată pentru a evita utilizarea

Deoarece scena din față este lungă, dacă doriți să vedeți doar programul, vă rugăm să săriți peste el.

Mediu

Studio vizual

• Studio vizual 2019

ASP.NET Core

• 3.1 (Pagina razor, MVC)

Despre cache-ul fișierelor din paginile Web

Când vizitați o pagină Web, pe lângă HTML, fișierele .js (Javascript), fișierele .css (foile de stil) și fișierele imagine sunt descărcate clientului pentru afișare și execuție. Cu toate acestea, unele fișiere imagine sunt mari, iar descărcarea lor de fiecare dată poate fi costisitoare. De asemenea, fișierele .js și fișierele .css sunt adesea folosite pe alte pagini și nu este nevoie să le descărcați de fiecare dată. Este posibil ca aceste fișiere să fie salvate temporar în browser după descărcare. Asta se numește cache.

Dacă fișierul este memorat în cache, de exemplu, HTML este descărcat de pe serverul Web atunci când vizitați aceeași pagină. Alte fișiere sunt vizualizate și se execută utilizând fișiere stocate local fără a le descărca dacă există o memorie cache. Acest lucru reduce sarcina pe server și permite clientului să vizualizeze pagina la viteză mare, fără a consuma lățime de bandă de comunicare.

Probleme cauzate de caching

Dacă fișierele plasate pe server și fișierele memorate în cache sunt aceleași, în general, depinde de calea fișierului descrise în HTML. Aceeași cale de fișier este practic fișierele memorate în cache. (Pot exista și alte condiții, dar calea fișierului este sigură)

Următorul este un exemplu de cale de fișier. Se aplică parametrii atributului href și src.

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

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

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

Cu toate acestea, acest comportament poate fi o problemă.

De exemplu, dacă un utilizator are un fișier JavaScript versiunea 1 atunci când îl accesează pentru prima dată, fișierul JavaScript versiunea 1 este memorat în cache. Serverul publică apoi fișierul JavaScript versiunea 2. Dacă calea fișierului JavaScript a fost aceeași atunci când utilizatorul a vizitat aceeași pagină, se poate utiliza fișierul Javascript versiunea 1 memorat în cache fără a descărca fișierul JavaScript versiunea serverului 2. Acest lucru poate provoca defecte pe care publicul nu intenționează.

În acest moment, cred că vedeți adesea "Încercați să ștergeți memoria cache" ca fiind una dintre contramăsurile de pe partea de utilizator, dar aceasta poate fi cauza.

să faceți față problemelor de cache pe partea serverului

După sa menționat mai sus, dacă fișierele memorate în cache sunt utilizate depinde în mare măsură de calea fișierului (URL).

De aceea, atunci când actualizați un fișier, îl puteți forța să descarce un fișier nou modificând numele fișierului.

De exemplu, dacă un fișier versiunea 1

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

Când fișierul a fost actualizat versiunea 2

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

Site2 este .css pe partea de client.

Cu toate acestea, dacă faceți acest lucru manual, poate fi greoi și predispus la erori să schimbați căile și să redenumiți fișierele fizice.

Adăugarea parametrilor de interogare la o cale de fișier

Modul în care funcționează Webul vă permite să adăugați parametri de interogare cu o combinație de chei și valori după cale. În mecanismul de cache client, chiar dacă fișierele fizice sunt aceleași, dacă parametrii de interogare sunt diferiți, acestea vor fi recunoscute ca fișiere separate. Parametrii interogării sunt valori care nu au sens dacă nu există un scop de utilizare, chiar dacă sunt adăugate.

Parametrii de interogare pot fi adăugați la cale în următorul format:

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

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

Utilizând acest mecanism, trebuie să modificați calea, dar nu este necesar să redenumiți fișierul fizic.

Adăugarea automată a parametrilor interogării în program (exemplu incorect)

Prin adăugarea automată a acestui parametru de interogare în program, Nu trebuie să modificați manual calea fișierului dacă modificați fișierul static.

Un exemplu simplu este adăugarea orei curente la parametrii interogării atunci când un utilizator accesează o pagină Web. Este foarte ușor pentru că eu cred că puteți scrie într-o singură linie în orice limbaj de programare. Cred că exemplul generației arată astfel:

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

Cu toate acestea, acest lucru are dezavantajul că avantajul cache-ului se pierde deloc. Calea se modifică de fiecare dată când vizitați o pagină Web, chiar dacă este același fișier ca și cel anterior. Deoarece este recunoscut ca un fișier separat, fișierele CSS sunt descărcate de pe server de fiecare dată. Versiunile mai vechi ale fișierelor nu vor mai fi utilizate, dar acest lucru este același lucru cu simpla neutilizare a caracteristicilor de cache.

ASP.NET control al versiunii prin adăugarea parametrilor interogării în Core

Alcause nu există nici o pre ASP.NET Core oferă o soluție standard la această problemă de cache.

Trebuie doar să adăugați un atribut la eticheta care descrie asp-append-version="true" calea fișierului după urmează:

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

Dacă vizitați efectiv pagina după ce este publicată pe Web, aceasta se va extinde după urmează:

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

Un șir aleatoriu este adăugat, dar acest lucru nu se schimbă de fiecare dată când se face accesul. Acest șir este o valoare hash și este generat pe baza conținutului fișierului la care se face referire. De aceea, același șir este generat atâta timp cât conținutul fișierului nu se modifică. Dacă conținutul fișierului se modifică, acesta va fi modificat într-un șir nou.

Acest lucru asigură că fișierele memorate în cache sunt preferate, deoarece dacă fișierele sunt aceleași, căile sunt aceleași. Pe măsură ce fișierul este actualizat, calea se modifică, astfel încât să puteți descărca și utiliza noul fișier.

asp-append-version="true"Apropo, acest atribut este standard numai pentru fișierele statice plasate în folderul wwwroot. Rețineți că șirurile aleatorii nu sunt extinse atunci când sunt setate la alte fișiere.

Despre programul eșantion

Șablonul de proiect implicit .js asp-append-version șablon de site. Site.css nu are asp-append-version un anexat la acesta.

Programul eșantion _Layout.cshtml adaugă site.js și site.css asp-append-version fișierului. Suntem, de asemenea, adăugarea de tag-uri IMG ca asp-append-version o referință.