Hinzufügen einer Version, die angibt, dass die zwischengespeicherte alte Version der statischen Datei auf dem neuesten Stand ist, um zu vermeiden, dass sie verwendet wird

Da die vordere Bühne lang ist, wenn Sie nur das Programm sehen möchten, überspringen Sie es bitte.

Umgebung

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1 (Razor-Seite, MVC)

Informationen zum Zwischenspeichern von Dateien auf Webseiten

Wenn Sie eine Webseite besuchen, werden neben HTML auch .js Dateien (Javascript), .css Dateien (Stylesheets) und Bilddateien zur Anzeige und Ausführung auf den Client heruntergeladen. Einige Bilddateien sind jedoch groß, und das herunterladen jedes Mal kann teuer sein. Außerdem werden .js Dateien und .css Dateien häufig auf anderen Seiten verwendet, und es ist nicht notwendig, sie jedes Mal herunterzuladen. Diese Dateien können vorübergehend in Ihrem Browser nach dem Herunterladen gespeichert werden. Dies wird als Caching bezeichnet.

Wenn die Datei z. B. zwischengespeichert wird, wird HTML vom Webserver heruntergeladen, wenn Sie dieselbe Seite besuchen. Andere Dateien werden mit lokal gespeicherten Dateien angezeigt und ausgeführt, ohne sie herunterzuladen, wenn ein Cache vorhanden ist. Dadurch wird die Serverlast reduziert und der Client kann die Seite mit hoher Geschwindigkeit anzeigen, ohne die Kommunikationsbandbreite zu verbrauchen.

Probleme durch Caching

Ob die auf dem Server abgelegten Dateien und die zwischengespeicherten Dateien identisch sind, hängt im Allgemeinen vom im HTML-Code beschriebenen Dateipfad ab. Derselbe Dateipfad besteht im Grunde aus zwischengespeicherten Dateien. (Es kann andere Bedingungen geben, aber der Dateipfad ist sicher)

Im Folgenden finden Sie ein Beispiel für einen Dateipfad. Die Attributparameter href und src gelten.

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

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

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

Dieses Verhalten kann jedoch ein Problem darstellen.

Wenn ein Benutzer beispielsweise eine JavaScript-Datei der Version 1 hat, wenn er zum ersten Mal darauf zugreift, wird die JavaScript-Datei der Version 1 zwischengespeichert. Der Server veröffentlicht dann die JavaScript-Datei der Version 2. Wenn der JavaScript-Dateipfad derselbe war, als der Benutzer dieselbe Seite besuchte, kann die Javascript-Datei der Version 1 verwendet werden, ohne die JavaScript-Datei der Serverversion 2 herunterzuladen. Dies kann zu Mängeln führen, die die Öffentlichkeit nicht beabsichtigt.

Zu diesem Zeitpunkt, Ich denke, dass Sie oft sehen "Versuchen, den Cache zu löschen" als eine der Gegenmaßnahmen auf der Benutzerseite, aber dies kann die Ursache sein.

Umgang mit Cache-Problemen auf der Serverseite

Wie oben erwähnt, hängt die Verwendung zwischengespeicherter Dateien weitgehend vom Dateipfad (URL) ab.

Wenn Sie eine Datei aktualisieren, können Sie daher erzwingen, dass eine neue Datei heruntergeladen wird, indem Sie den Dateinamen ändern.

Wenn z. B. eine Datei der Version 1

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

Als die Datei aktualisiert wurde, Version 2

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

Site2 ist auf der Clientseite .css.

Wenn Sie dies jedoch manuell tun, kann es umständlich und fehleranfällig sein, Pfade zu ändern und physische Dateien umzubenennen.

Hinzufügen von Abfrageparametern zu einem Dateipfad

Mit der Funktionsweise des Webs können Sie Abfrageparameter mit einer Kombination aus Schlüsseln und Werten nach dem Pfad hinzufügen. Im Client-Caching-Mechanismus werden die physischen Dateien, selbst wenn sie identisch sind, wenn die Abfrageparameter unterschiedlich sind, als separate Dateien erkannt. Abfrageparameter sind Werte, die keine Bedeutung haben, wenn es keinen Verwendungszweck gibt, selbst wenn sie hinzugefügt werden.

Abfrageparameter können im folgenden Format an den Pfad angehängt werden:

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

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

Mit diesem Mechanismus müssen Sie den Pfad ändern, aber Sie müssen die physische Datei nicht umbenennen.

Abfrageparameter automatisch im Programm hinzufügen (schlechtes Beispiel)

Durch automatisches Hinzufügen dieses Abfrageparameters im Programm Sie müssen den Dateipfad nicht manuell ändern, wenn Sie die statische Datei ändern.

Ein einfaches Beispiel ist das Hinzufügen der aktuellen Zeit für Abfrageparameter, wenn ein Benutzer auf eine Webseite zugreift. Es ist sehr einfach, weil ich denke, dass man in einer Zeile in jeder Programmiersprache schreiben kann. Ich denke, das Generationsbeispiel sieht wie folgt aus:

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

Dies hat jedoch den Nachteil, dass der Vorteil des Cachings überhaupt verloren geht. Der Pfad ändert sich bei jedem Besuch einer Webseite, obwohl es sich um dieselbe Datei wie die vorherige handelt. Da es als separate Datei erkannt wird, werden css-Dateien jedes Mal vom Server heruntergeladen. Ältere Versionen von Dateien werden nicht mehr verwendet, aber dies ist das gleiche wie einfach nicht mit Caching-Funktionen.

ASP.NET Versionskontrolle durch Hinzufügen von Abfrageparametern in Core

Da es keine ASP.NET Core eine Standardlösung für dieses Caching-Problem bietet.

Sie müssen dem Tag nur ein Attribut hinzufügen, asp-append-version="true" das den Dateipfad wie folgt beschreibt:

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

Wenn Sie die Seite tatsächlich besuchen, nachdem sie im Web veröffentlicht wurde, wird sie wie folgt erweitert:

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

Eine zufällige Zeichenfolge wird angehängt, die sich jedoch nicht jedes Mal ändert, wenn der Zugriff erfolgt. Diese Zeichenfolge ist ein Hashwert und wird basierend auf dem Inhalt der referenzierten Datei generiert. Daher wird dieselbe Zeichenfolge generiert, solange sich der Inhalt der Datei nicht ändert. Wenn sich der Inhalt der Datei ändert, wird sie in eine neue Zeichenfolge geändert.

Dadurch wird sichergestellt, dass zwischengespeicherte Dateien bevorzugt werden, da, wenn die Dateien identisch sind, die Pfade identisch sind. Wenn die Datei aktualisiert wird, ändert sich der Pfad, sodass Sie die neue Datei herunterladen und verwenden können.

Übrigens asp-append-version="true" ist dieses Attribut nur für statische Dateien Standard, die im Ordner wwwroot abgelegt werden. Beachten Sie, dass zufällige Zeichenfolgen nicht erweitert werden, wenn sie auf andere Dateien festgelegt werden.

Über das Beispielprogramm

Die Standardprojektvorlage .js asp-append-version Websitevorlage. Site.css hat keine asp-append-version angehängte.

Das Beispielprogramm _Layout.cshtml fügt Site.js und Site.css asp-append-version der Datei hinzu. Wir fügen auch img-Tags asp-append-version als Referenz hinzu.