Lägga till en version som anger att den cachelagrade gamla versionen av den statiska filen är uppdaterad för att undvika att användas

Eftersom den främre scenen är lång, om du bara vill se programmet, hoppa över det.

Miljö

Visuell studio

• Visual Studio 2019

ASP.NET kärna

• 3.1 (Rakbladssida, MVC)

Om cachelagring av filer på webbsidor

När du besöker en webbsida hämtas förutom HTML-, .js-filer (Javascript), .css-filer (formatmall) och bildfiler till klienten för visning och körning. Vissa bildfiler är dock stora, och att ladda ner dem varje gång kan vara dyrt. Dessutom .js filer och .css filer ofta på andra sidor, och det finns inget behov av att ladda ner dem varje gång. Dessa filer kan tillfälligt sparas i din webbläsare efter nedladdning. Det här kallas cachelagring.

Om filen till exempel cachelagras hämtas HTML från webbservern när du besöker samma sida. Andra filer visas och körs med lokalt lagrade filer utan att ladda ner dem om det finns en cache. Detta minskar belastningen på servern och gör det möjligt för klienten att visa sidan med hög hastighet utan att förbruka kommunikationsbandbredd.

Problem som orsakas av cachelagring

Om filerna som placeras på servern och de cachelagrade filerna är desamma beror i allmänhet på den filsökväg som beskrivs i HTML-koden. Samma filsökväg är i princip cachelagrade filer. (Det kan finnas andra villkor, men filsökvägen är säker)

Följande är ett exempel på en filsökväg. Attributparametrarna href och src gäller.

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

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

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

Det här beteendet kan dock vara ett problem.

Om en användare till exempel har en JavaScript-fil version 1 när de först öppnar den cachelagras JavaScript-filen version 1. Servern publicerar sedan JavaScript-filen version 2. Om JavaScript-filsökvägen var densamma när användaren besökte samma sida kan javascript-filen i version 1 cachelagras utan att servern version 2 JavaScript-filen kan användas. Detta kan orsaka brister som allmänheten inte har för avsikt.

För närvarande tror jag att du ofta ser "Försök att ta bort cachen" som en av motåtgärderna på användarsidan, men det kan vara orsaken.

Så här hanterar du cacheproblem på serversidan

Som nämnts ovan beror huruvida cachelagrade filer används till stor del på filsökvägen (URL).

När du uppdaterar en fil kan du därför tvinga den att hämta en ny fil genom att ändra filnamnet.

Om till exempel en version 1-fil

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

När filen uppdaterades version 2

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

Site2 .css på klientsidan.

Men om du gör detta manuellt kan det vara besvärligt och felbenäget att ändra sökvägar och byta namn på fysiska filer.

Lägga till frågeparametrar i en filsökväg

På det sätt som webben fungerar kan du lägga till frågeparametrar med en kombination av tangenter och värden efter sökvägen. I klientcachemekanismen, även om de fysiska filerna är desamma, om frågeparametrarna är olika, kommer de att kännas igen som separata filer. Frågeparametrar är värden som inte har någon betydelse om det inte finns något användnings syfte även om de läggs till.

Frågeparametrar kan läggas till på sökvägen i följande format:

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

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

Genom att använda den här mekanismen måste du ändra sökvägen, men du behöver inte byta namn på den fysiska filen.

Lägga till frågeparametrar automatiskt i programmet (dåligt exempel)

Genom att automatiskt lägga till den här frågeparametern i programmet Du behöver inte ändra filsökvägen manuellt om du ändrar den statiska filen.

Ett enkelt exempel är att lägga till aktuell tid i frågeparametrar när en användare kommer åt en webbsida. Det är väldigt enkelt eftersom jag tror att du kan skriva i en rad på vilket programmeringsspråk som helst. Jag tycker att generationsexepelt ser ut så här:

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

Detta har dock nackdelen att fördelen med cachelagring över huvud taget går förlorad. Sökvägen ändras varje gång du besöker en webbsida, även om det är samma fil som den föregående. Eftersom det känns igen som en separat fil hämtas css-filer från servern varje gång. Äldre versioner av filer kommer inte längre att användas, men det är samma sak som att helt enkelt inte använda cachefunktioner.

ASP.NET versionskontroll genom att lägga till frågeparametrar i Core

Alcause det finns ingen pre ASP.NET Core ger en standardlösning på detta cacheproblem.

Du behöver bara lägga till ett attribut i taggen som beskriver asp-append-version="true" filsökvägen på följande sätt:

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

Om du faktiskt besöker sidan när den har publicerats på webben expanderas den på följande sätt:

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

En slumpmässig sträng läggs till, men den ändras inte varje gång åtkomst görs. Den här strängen är ett hash-värde och genereras baserat på innehållet i den refererade filen. Därför genereras samma sträng så länge innehållet i filen inte ändras. Om innehållet i filen ändras ändras det till en ny sträng.

Detta säkerställer att cachelagrade filer föredras eftersom sökvägarna är desamma om filerna är desamma. När filen uppdateras ändras sökvägen så att du kan hämta och använda den nya filen.

Förresten asp-append-version="true" är detta attribut standard endast för statiska filer som placeras i wwwroot-mappen. Observera att slumpmässiga strängar inte expanderas när de ställs in på andra filer.

Om exempelprogrammet

Standardprojektmallen .js asp-append-version webbplatsmall. Webbplats.css har asp-append-version ingen bifogad till den.

Exempelprogrammet lägger _Layout.cshtml till webbplats.js och .css av asp-append-version filen. Vi lägger också till img-taggar asp-append-version som referens.