Ajoutez une version qui indique que l’ancienne version mise en cache du fichier statique est à jour pour éviter d’être utilisée

Puisque la scène avant est longue, si vous voulez voir seulement le programme, svp sautez-le.

environnement

Studio visuel

• Studio visuel 2019

ASP.NET noyau

• 3.1 (Page Razor, MVC)

À propos de la mise en cache de fichiers sur les pages Web

Lorsque vous visitez une page Web, en plus des fichiers HTML, .js (Javascript), .css (feuilles de style) et des fichiers d’images sont téléchargés sur le client pour affichage et exécution. Cependant, certains fichiers d’images sont volumineux, et les télécharger à chaque fois peut être coûteux. En outre, .js fichiers et .css fichiers sont souvent utilisés sur d’autres pages, et il n’est pas nécessaire de les télécharger à chaque fois. Ces fichiers peuvent être temporairement enregistrés dans votre navigateur après téléchargement. C’est ce qu’on appelle la mise en cache.

Si le fichier est mis en cache, par exemple, HTML est téléchargé à partir du serveur Web lorsque vous visitez la même page. D’autres fichiers sont consultés et exécutés à l’aide de fichiers stockés localement sans les télécharger s’il y a un cache. Cela réduit la charge sur le serveur et permet au client de voir la page à grande vitesse sans consommer la bande passante de communication.

Problèmes causés par la mise en cache

La question de savoir si les fichiers placés sur le serveur et les fichiers mis en cache sont les mêmes dépend généralement du cheminement de fichiers décrit dans le HTML. Le même chemin de fichiers est essentiellement mis en cache des fichiers. (Il peut y avoir d’autres conditions, mais le chemin de fichier est certain)

Ce qui suit est un exemple de cheminement de fichiers. Les paramètres d’attribut de href et src s’appliquent.

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

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

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

Cependant, ce comportement peut être un problème.

Par exemple, si un utilisateur dispose d’un fichier JavaScript version 1 lorsqu’il y accède pour la première fois, le fichier JavaScript version 1 est mis en cache. Le serveur publie ensuite le fichier JavaScript version 2. Si le chemin de fichier JavaScript était le même lorsque l’utilisateur a visité la même page, le fichier Javascript version 1 mis en cache sans télécharger le fichier JavaScript de la version serveur 2 peut être utilisé. Cela peut causer des défauts que le public n’a pas l’intention.

En ce moment, je pense que vous voyez souvent « Essayez de supprimer le cache » comme l’une des contre-mesures du côté des utilisateurs, mais cela peut être la cause.

Comment traiter les problèmes de cache du côté serveur

Comme mentionné ci-dessus, si les fichiers mis en cache sont utilisés dépend en grande partie de la trajectoire de fichier (URL).

Par conséquent, lorsque vous mettez à jour un fichier, vous pouvez le forcer à télécharger un nouveau fichier en changeant le nom du fichier.

Par exemple, si un fichier de version 1

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

Lorsque le fichier a été mis à jour version 2

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

Site2 est .css du côté du client.

Toutefois, si vous le faites manuellement, il peut être lourd et sujet aux erreurs de changer de chemin et de renommer les fichiers physiques.

Ajouter des paramètres de requête à un chemin de fichiers

Le fonctionnement du Web vous permet d’ajouter des paramètres de requête avec une combinaison de touches et de valeurs après le chemin. Dans le mécanisme de mise en cache du client, même si les fichiers physiques sont les mêmes, si les paramètres de requête sont différents, ils seront reconnus comme des fichiers distincts. Les paramètres de requête sont des valeurs qui n’ont aucun sens s’il n’y a pas de but d’utilisation même si elles sont ajoutées.

Les paramètres de requête peuvent être annexés au chemin dans le format suivant :

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

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

En utilisant ce mécanisme, vous devez changer le chemin, mais vous n’avez pas besoin de renommer le fichier physique.

Ajouter automatiquement les paramètres de requête dans le programme (mauvais exemple)

En ajoutant automatiquement ce paramètre de requête dans le programme, Vous n’avez pas à modifier manuellement le chemin de fichiers si vous modifiez le fichier statique.

Un exemple facile est d’ajouter l’heure actuelle aux paramètres de requête lorsqu’un utilisateur accède à une page Web. C’est très facile parce que je pense que vous pouvez écrire en une seule ligne dans n’importe quel langage de programmation. Je pense que l’exemple de génération ressemble à ceci :

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

Toutefois, cela a l’inconvénient que l’avantage de la mise en cache est perdu à tous. Le chemin change chaque fois que vous visitez une page Web, même si c’est le même fichier que le précédent. Parce qu’il est reconnu comme un fichier distinct, les fichiers css sont téléchargés à partir du serveur à chaque fois. Les anciennes versions de fichiers ne seront plus utilisées, mais c’est la même chose que de simplement ne pas utiliser de fonctionnalités de mise en cache.

ASP.NET contrôle de la version en ajoutant des paramètres de requête dans Core

Alcause il n’y a pas ASP.NET le noyau fournit une solution standard à ce problème de mise en cache.

Vous avez juste besoin d’ajouter un attribut à la balise qui décrit asp-append-version="true" le chemin de fichier comme suit:

<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 vous visitez réellement la page après sa publication sur le Web, elle s’étendra comme suit :

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

Une chaîne aléatoire est annexée, mais cela ne change pas chaque fois que l’accès est effectué. Cette chaîne est une valeur de hachage et est générée en fonction du contenu du fichier référencé. Par conséquent, la même chaîne est générée tant que le contenu du fichier ne change pas. Si le contenu du fichier change, il sera changé en une nouvelle chaîne.

Cela garantit que les fichiers mis en cache sont préférés parce que si les fichiers sont les mêmes, les chemins sont les mêmes. Au fur et à mesure que le fichier est mis à jour, le chemin change, de sorte que vous pouvez télécharger et utiliser le nouveau fichier.

Soit dit asp-append-version="true" en passant, cet attribut est standard uniquement pour les fichiers statiques placés dans le dossier wwwroot. Notez que les chaînes aléatoires ne sont pas étendues lorsqu’elles sont définies sur d’autres fichiers.

À propos du programme d’échantillons

Le modèle de projet par défaut .js modèle de asp-append-version site. Site.css asp-append-version n’y a pas d’appendice.

Le programme _Layout.cshtml d’échantillons ajoute .js site et .css site asp-append-version du fichier. Nous ajoutons également des balises img asp-append-version comme référence.