Dodajanje različice, ki označuje, da je predpomnjena stara različica statične datoteke posodobljen, da se izognete uporabi

Ker je sprednji oder dolg, če želite videti samo program, ga preskočite.

Okolje

Vizualni studio

• Vizualni studio 2019

ASP.NET Core

• 3.1 (Stran z britvicami, MVC)

Predpomnjenje datotek na spletnih straneh

Ko obiščete spletno stran, se poleg HTML datotek .js datotek (Javascript), .css datotek (slogovnih listov) in slikovne datoteke prenesejo v odjemalca za prikaz in izvršitev. Vendar pa so nekatere slikovne datoteke velike in jih lahko vsakič prenesete drago. Prav tako .js datoteke in .css datotek pogosto uporabljajo na drugih straneh, zato jih ni treba vsakič prenesti. Te datoteke so po prenosu morda začasno shranjene v brskalniku. Temu se reče predpomnitev.

Če je datoteka predpomnjena, se na primer HTML prenese iz spletnega strežnika, ko obiščete isto stran. Druge datoteke si ogledajo in zaženejo z lokalno shranjene datoteke, ne da bi jih prenesli, če obstaja predpomnilnik. To zmanjša obremenitev strežnika in omogoča odjemalcu, da si ogleda stran z veliko hitrostjo, ne da bi porabil komunikacijsko pasovno širino.

Težave, ki jih povzroča predpomnjenje

Ali so datoteke, ki so dane v strežnik in predpomnjene datoteke, na splošno enake, je odvisno od poti datoteke, opisane v HTML. Enaka pot do datoteke so v bistvu predpomnjene datoteke. (Morda obstajajo drugi pogoji, vendar je pot datoteke določena)

To je primer poti datoteke. Uporabljajo se atributni parametri href in src.

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

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

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

Vendar je to vedenje lahko problem.

Če ima na primer uporabnik datoteko JavaScript različice 1, ko prvič dostopa do datoteke, je predpomnjena javascriptna datoteka različice 1. Strežnik nato objavi datoteko JavaScript različice 2. Če je bila pot datoteke JavaScript enaka, ko je uporabnik obiskal isto stran, se lahko uporabi predpomnilnik javascriptne datoteke različice 1, ne da bi prenesel datoteko JavaScript v strežniku različice 2. To lahko povzroči napake, ki jih javnost ne namerava.

V tem času, mislim, da pogosto vidite "Poskusite izbrisati predpomnilnik" kot eden od protiuredov na uporabniški strani, vendar je to lahko vzrok.

Reševanje težav s predpomnilnikom na strani strežnika

Kot je navedeno zgoraj, ali se predpomnjene datoteke uporabljajo, je v veliki meri odvisno od poti datoteke (URL).

Ko posodobite datoteko, jo lahko prisilite, da prenese novo datoteko tako, da spremenite ime datoteke.

Če je na primer datoteka različice 1

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

Ko je bila datoteka posodobljena različica 2

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

Stran2 je .css strani odjemalca.

Če pa to storite ročno, je lahko za spreminjanje poti in preimenovanje fizičnih datotek nalagano z napakami.

Dodajanje parametrov poizvedbe v pot datoteke

Način delovanja spleta omogoča dodajanje parametrov poizvedbe s kombinacijo ključev in vrednosti po poti. V predpomnilnem mehanizmu odjemalca, tudi če so fizične datoteke enake, če so parametri poizvedbe različni, bodo prepoznane kot ločene datoteke. Parametri poizvedbe so vrednosti, ki nimajo nobenega smisla, če ni namena uporabe, tudi če so dodani.

Parametre poizvedbe je mogoče prilegati poti v tej obliki:

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

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

Z uporabo tega mehanizma morate spremeniti pot, vendar vam ni treba preimenovati fizične datoteke.

Samodejno dodajanje parametrov poizvedbe v programu (slab primer)

Če samodejno dodate ta parameter poizvedbe v program, Če spremenite statično datoteko, vam ni treba ročno spreminjati poti datoteke.

Preprost primer je dodajanje trenutnega časa parametrom poizvedbe, ko uporabnik dostopa do spletne strani. To je zelo enostavno, ker mislim, da lahko pišete v eni vrstici v katerem koli programskem jeziku. Mislim, da zgled generacije zgleda takole:

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

Vendar pa ima to pomanjkljivost, da se prednost predpomnjenja izgubi na vseh. Pot se spremeni vsakič, ko obiščete spletno stran, čeprav je enaka kot prejšnja. Ker je prepoznana kot ločena datoteka, se datoteke CSS vsakič prenesejo iz strežnika. Starejše različice datotek ne bodo več uporabljene, vendar je to enako, kot če preprosto ne uporabljate predpomnilnih funkcij.

ASP.NET različice z dodajanjem parametrov poizvedbe v jedru

Alcause ni pred ASP.NET Core zagotavlja standardno rešitev za to predpomnilno težavo.

Oznaki morate dodati atribut, ki opisuje pot datoteke na asp-append-version="true" naslednji način:

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

Če stran dejansko obiščete po objavi v spletu, se bo razširila na naslednji način:

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

Priložen je naključni niz, vendar se to ne spremeni vsakič, ko je dostop narejen. Ta niz je vrednost hasha in se generira na podlagi vsebine referenčne datoteke. Zato je enak niz ustvarjen, dokler se vsebina datoteke ne spremeni. Če se vsebina datoteke spremeni, se spremeni v nov niz.

To zagotavlja, da so predpomnjene datoteke prednostne, ker če so datoteke enake, so poti enake. Ko je datoteka posodobljena, se pot spremeni, tako da lahko prenesete in uporabite novo datoteko.

Mimogrede, ta atribut je standarden samo za statične datoteke, ki so v asp-append-version="true" mapi wwwroot. Upoštevajte, da naključni nizi niso razširjeni, ko so nastavljeni na druge datoteke.

O vzorčnem programu

Privzeta predloga projekta .js asp-append-version mesta. Mesto.css asp-append-version nima dodatka k tem.

Vzorčni program doda mesto.js in _Layout.cshtml mesto.css asp-append-version datoteke. Dodajamo tudi img oznake kot asp-append-version referenco.