Přidání verze, která označuje, že stará verze statického souboru uložená v mezipaměti je aktuální, aby se zabránilo použití

Vzhledem k tomu, že přední fáze je dlouhá, pokud chcete vidět pouze program, přeskočte ji.

Prostředí

Visual Studio

• Visual Studio 2019

ASP.NET jádro

• 3.1 (Stránka břitvy, MVC)

Ukládání souborů do mezipaměti na webových stránkách

Když navštívíte webovou stránku, kromě HTML se do klienta stáhnou soubory .js (Javascript), soubory .css (šablony stylů) a obrazové soubory pro zobrazení a spuštění. Některé obrazové soubory jsou však velké a jejich stahování pokaždé může být nákladné. Také .js soubory a .css soubory se často používají na jiných stránkách a není třeba je pokaždé stahovat. Tyto soubory mohou být po stažení dočasně uloženy v prohlížeči. Tomu se říká ukládání do mezipaměti.

Pokud je například soubor uložen do mezipaměti, je při návštěvě stejné stránky z webového serveru stažen kód HTML. Ostatní soubory jsou zobrazeny a spuštěny pomocí místně uložených souborů, aniž by je bylo možné stáhnout, pokud existuje mezipaměť. To snižuje zatížení serveru a umožňuje klientovi zobrazit stránku vysokou rychlostí bez využití šířky pásma komunikace.

Problémy způsobené ukládáním do mezipaměti

To, zda jsou soubory umístěné na serveru a soubory uložené v mezipaměti stejné, obecně závisí na cestě k souboru popsané v jazyce HTML. Stejná cesta k souboru jsou v podstatě soubory uložené v mezipaměti. (Mohou existovat i jiné podmínky, ale cesta k souboru je jistá)

Následuje příklad cesty k souboru. Platí parametry atributů href a src.

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

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

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

Toto chování však může být problém.

Pokud má například uživatel při prvním přístupu soubor JavaScriptu verze 1, soubor JavaScript verze 1 se uchydí do mezipaměti. Server pak publikuje soubor JavaScriptu verze 2. Pokud byla cesta k souboru JavaScriptu stejná, když uživatel navštívil stejnou stránku, může být použit soubor Javascript verze 1 uložený v mezipaměti bez stažení souboru JavaScriptu verze 2 serveru. To může způsobit vady, které veřejnost nezamýšlí.

V tuto chvíli si myslím, že často vidíte "Pokusit se odstranit mezipaměť" jako jedno z protiopatření na straně uživatele, ale to může být příčinou.

Jak řešit problémy s mezipamětí na straně serveru

Jak bylo uvedeno výše, zda jsou soubory uložené v mezipaměti používány, závisí do značné míry na cestě k souboru (URL).

Proto při aktualizaci souboru můžete vynutit jeho stažení novým souborem změnou názvu souboru.

Pokud například soubor verze 1

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

Při aktualizaci souboru verze 2

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

Site2 .css na straně klienta.

Pokud to však děláte ručně, může být obtížné a náchylné ke změnám cest a přejmenování fyzických souborů.

Přidání parametrů dotazu do cesty k souboru

Způsob, jakým web funguje, umožňuje přidat parametry dotazu s kombinací klíčů a hodnot za cestu. V mechanismu ukládání klienta do mezipaměti, i když jsou fyzické soubory stejné, pokud se parametry dotazu liší, budou rozpoznány jako samostatné soubory. Parametry dotazu jsou hodnoty, které nemají žádný význam, pokud neexistuje žádný účel použití, i když jsou přidány.

Parametry dotazu lze k cestě připojit v následujícím formátu:

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

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

Pomocí tohoto mechanismu je třeba změnit cestu, ale není nutné přejmenovávat fyzický soubor.

Automatické přidávání parametrů dotazu do programu (špatný příklad)

Automatickým přidáním tohoto parametru dotazu do programu Pokud změníte statický soubor, nemusíte ručně měnit cestu k souboru.

Jednoduchým příkladem je přidání aktuálního času k parametrům dotazu, když uživatel přistupuje k webové stránce. Je to velmi snadné, protože si myslím, že můžete psát v jednom řádku v jakémkoli programovacím jazyce. Myslím, že příklad generace vypadá takhle:

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

To má však nevýhodu, že výhoda ukládání do mezipaměti je vůbec ztracena. Cesta se změní při každé návštěvě webové stránky, i když se jedná o stejný soubor jako předchozí. Vzhledem k tomu, že je rozpoznán jako samostatný soubor, soubory CSS jsou pokaždé staženy ze serveru. Starší verze souborů již nebudou používány, ale je to stejné jako jednoduše nepoužívání funkcí ukládání do mezipaměti.

ASP.NET verzi přidáním parametrů dotazu do jádra

Alcause neexistuje žádné předběžné ASP.NET Core poskytuje standardní řešení tohoto problému ukládání do mezipaměti.

Ke značce stačí přidat atribut, který popisuje asp-append-version="true" cestu k souboru následujícím způsobem:

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

Pokud stránku skutečně navštívíte po publikování na webu, rozšíří se takto:

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

Je připojen náhodný řetězec, ale to se nezmění při každém přístupu. Tento řetězec je hodnota hash a je generován na základě obsahu odkazovaného souboru. Proto je generován stejný řetězec, pokud se obsah souboru nezmění. Pokud se obsah souboru změní, změní se na nový řetězec.

Tím je zajištěno, že soubory uložené v mezipaměti jsou upřednostňovány, protože pokud jsou soubory stejné, cesty jsou stejné. Při aktualizaci souboru se cesta mění, takže můžete nový soubor stáhnout a použít.

asp-append-version="true"Mimochodem, tento atribut je standardní pouze pro statické soubory umístěné ve složce wwwroot. Všimněte si, že náhodné řetězce nejsou rozbaleny, pokud jsou nastaveny na jiné soubory.

O ukázkové aplikaci

Výchozí šablona projektu .js asp-append-version webu. Web.css asp-append-version nemá připojenou stránku.

Ukázkový program _Layout.cshtml přidá .js a .css asp-append-version souboru. Jako referenci také přidáváme značky asp-append-version img.