Afegeix una versió que indiqui que la versió anterior emmagatzemada a la memòria cau del fitxer està actualitzat per evitar que s'utilitzi

Data de creació de la pàgina :

Com que la fase inicial és llarga, si voleu veure només el programa, ometeu-lo.

Medi ambient

Estudi Visual
  • Estudi Visual 2019
Nucli ASP.NET
  • 3.1 (Pàgina de la navalla, MVC)

Quant a l'emmagatzematge de fitxers en memòria cau a les pàgines web

Quan visiteu una pàgina web, a més d'HTML, .js fitxers (Javascript), .css fitxers (fulls d'estil) i fitxers d'imatge es descarreguen al client per a la seva visualització i execució. No obstant això, alguns fitxers d'imatge són grans i descarregar-los cada vegada pot ser costós. A més, .js fitxers i fitxers .css s'utilitzen sovint en altres pàgines, i no cal descarregar-los cada vegada. Aquests fitxers es poden desar temporalment al navegador després de baixar-los. Això s'anomena memòria cau.

Si el fitxer està emmagatzemat a la memòria cau, per exemple, HTML es baixa del servidor web quan visiteu la mateixa pàgina. Altres fitxers es visualitzen i s'executen utilitzant fitxers emmagatzemats localment sense baixar-los si hi ha una memòria cau. Això redueix la càrrega al servidor i permet al client veure la pàgina a gran velocitat sense consumir ample de banda de comunicació.

Problemes causats per l'emmagatzematge en memòria cau

Si els fitxers col·locats al servidor i als fitxers emmagatzemats a la memòria cau són els mateixos generalment depèn del camí del fitxer descrit a l'HTML. El mateix camí de fitxer són bàsicament fitxers en memòria cau. (Pot haver-hi altres condicions, però el camí del fitxer és segur)

El següent és un exemple d'un camí de fitxer. S'apliquen els paràmetres d'atribut de 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>

No obstant això, aquest comportament pot ser un problema.

Per exemple, si un usuari té un fitxer JavaScript de la versió 1 quan accedeix per primera vegada, el fitxer JavaScript de la versió 1 s'emmagatzema a la memòria cau. A continuació, el servidor publica el fitxer JavaScript de la versió 2. Si el camí del fitxer JavaScript era el mateix quan l'usuari va visitar la mateixa pàgina, es pot utilitzar la versió 1 de Javascript arxiu emmagatzemat en memòria cau sense descarregar el fitxer JavaScript versió 2 del servidor. Això pot causar defectes que el públic no pretén.

En aquest moment, crec que sovint veieu "Intenta eliminar la memòria cau" com una de les contramesures del costat de l'usuari, però aquesta pot ser la causa.

Com tractar els problemes de la memòria cau al costat del servidor

Com es va esmentar anteriorment, si s' usen fitxers en memòria cau depèn en gran mesura del camí del fitxer (URL).

Per tant, quan actualitzeu un fitxer, podeu forçar-lo a baixar un fitxer nou canviant el nom del fitxer.

Per exemple, si un fitxer de la versió 1

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

Quan es va actualitzar el fitxer versió 2

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

Site2 és .css al costat del client.

No obstant això, si ho feu manualment, pot ser molest i propens a errors canviar els camins i canviar el nom dels fitxers físics.

Afegeix paràmetres de consulta a un camí de fitxer

La manera com funciona el web us permet afegir paràmetres de consulta amb una combinació de tecles i valors després del camí. En el mecanisme d'emmagatzematge en memòria cau del client, fins i tot si els fitxers físics són els mateixos, si els paràmetres de consulta són diferents, es reconeixeran com a fitxers separats. Els paràmetres de consulta són valors que no tenen sentit si no hi ha cap propòsit d'ús encara que s'afegeixin.

Els paràmetres de consulta es poden afegir al camí amb el format següent:

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

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

En utilitzar aquest mecanisme, heu de canviar el camí, però no cal canviar el nom del fitxer físic.

Afegeix paràmetres de consulta automàticament al programa (exemple defectuari)

Si afegiu automàticament aquest paràmetre de consulta al programa, No heu de canviar manualment el camí del fitxer si canvieu el fitxer estàtic.

Un exemple fàcil és afegir l'hora actual als paràmetres de consulta quan un usuari accedeix a una pàgina web. És molt fàcil perquè crec que es pot escriure en una sola línia en qualsevol llenguatge de programació. Crec que l'exemple de generació té aquest aspecte:

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

No obstant això, això té l'inconvenient que l'avantatge de l'emmagatzematge en memòria cau es perd en absolut. El camí canvia cada vegada que visiteu una pàgina web, tot i que és el mateix fitxer que l'anterior. Com que es reconeix com un fitxer separat, els fitxers css es descarreguen del servidor cada vegada. Les versions anteriors dels fitxers ja no s'utilitzaran, però és el mateix que simplement no s'utilitzen funcions d'emmagatzematge en memòria cau.

ASP.NET control de versions afegint paràmetres de consulta al nucli

Alcause no hi ha cap pre-ASP.NET Core proporciona una solució estàndard a aquest problema d'emmagatzematge en memòria cau.

Només cal que afegiu un atribut a l'etiqueta que descriu asp-append-version="true" el camí del fitxer de la manera següent:

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

Si realment visiteu la pàgina després de la seva publicació al web, s'expandirà de la següent manera:

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

S'afegeix una cadena aleatòria, però això no canvia cada vegada que es fa l'accés. Aquesta cadena és un valor hash i es genera en funció del contingut del fitxer referenciat. Per tant, es genera la mateixa cadena sempre que el contingut del fitxer no canviï. Si el contingut del fitxer canvia, es canviarà a una cadena nova.

Això garanteix que es prefereixin els fitxers de la memòria cau perquè si els fitxers són els mateixos, els camins són els mateixos. A mesura que el fitxer s'actualitza, el camí canvia, de manera que podeu baixar i utilitzar el fitxer nou.

Per asp-append-version="true" cert, aquest atribut és estàndard només per als fitxers estàtics col·locats a la carpeta wwwroot. Tingueu en compte que les cadenes aleatòries no s' expandeixen quan s' estableixen a altres fitxers.

Sobre el programa d'exemple

La plantilla de projecte per defecte .js plantilla de asp-append-version lloc. Lloc.css no asp-append-version té afegit.

El programa d'exemple _Layout.cshtml afegeix .js lloc i el lloc.css del asp-append-version fitxer. També estem afegint etiquetes img com a asp-append-version referència.