Agregue una versión que indique que la versión antigua almacenada en caché del archivo estático está actualizada para evitar ser utilizada

Dado que la etapa frontal es larga, si desea ver sólo el programa, por favor omita.

medio ambiente

Estudio visual

• Visual Studio 2019

Núcleo de ASP.NET

• 3.1 (Página de Razor, MVC)

Acerca del almacenamiento en caché de archivos en páginas Web

Cuando visita una página Web, además de HTML, .js archivos (Javascript), .css archivos (hojas de estilo) y archivos de imagen se descargan en el cliente para su visualización y ejecución. Sin embargo, algunos archivos de imagen son grandes, y descargarlos cada vez puede ser costoso. Además, .js archivos y archivos de .css se utilizan a menudo en otras páginas, y no hay necesidad de descargarlos cada vez. Estos archivos se pueden guardar temporalmente en su navegador después de la descarga. Esto se llama almacenamiento en caché.

Si el archivo se almacena en caché, por ejemplo, HTML se descarga desde el servidor Web cuando visita la misma página. Otros archivos se ven y se ejecutan utilizando archivos almacenados localmente sin descargarlos si hay una caché. Esto reduce la carga en el servidor y permite al cliente ver la página a alta velocidad sin consumir ancho de banda de comunicación.

Problemas causados por el almacenamiento en caché

Si los archivos colocados en el servidor y los archivos almacenados en caché son los mismos generalmente depende de la ruta de acceso del archivo descrita en el CÓDIGO HTML. La misma ruta de acceso de archivo son básicamente archivos almacenados en caché. (Puede haber otras condiciones, pero la ruta de acceso del archivo es cierta)

A continuación se muestra un ejemplo de una ruta de acceso de archivo. Se aplican los parámetros de atributo de href y src.

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

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

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

Sin embargo, este comportamiento puede ser un problema.

Por ejemplo, si un usuario tiene un archivo JavaScript de la versión 1 cuando accede a él por primera vez, se almacena en caché el archivo JavaScript de la versión 1. A continuación, el servidor publica el archivo JavaScript de la versión 2. Si la ruta de acceso del archivo JavaScript era la misma cuando el usuario visitaba la misma página, se puede utilizar el archivo Javascript de la versión 1 almacenado en caché sin descargar el archivo JavaScript de la versión 2 del servidor. Esto puede causar defectos que el público no pretende.

En este momento, creo que a menudo se ve "Tratar de eliminar la memoria caché" como una de las contramedidas en el lado del usuario, pero esta puede ser la causa.

Cómo lidiar con los problemas de caché en el lado del servidor

Como se mencionó anteriormente, si los archivos almacenados en caché se utilizan depende en gran medida de la ruta de acceso del archivo (URL).

Por lo tanto, al actualizar un archivo, puede forzarlo a descargar un nuevo archivo cambiando el nombre del archivo.

Por ejemplo, si un archivo de la versión 1

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

Cuando se actualizó el archivo versión 2

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

Site2 se .css en el lado del cliente.

Sin embargo, si lo hace manualmente, puede ser engorroso y propenso a errores cambiar rutas y cambiar el nombre de los archivos físicos.

Agregar parámetros de consulta a una ruta de acceso de archivo

La forma en que funciona la Web le permite agregar parámetros de consulta con una combinación de claves y valores después de la ruta de acceso. En el mecanismo de almacenamiento en caché del cliente, incluso si los archivos físicos son los mismos, si los parámetros de consulta son diferentes, se reconocerán como archivos independientes. Los parámetros de consulta son valores que no tienen ningún significado si no hay ningún propósito de uso, incluso si se agregan.

Los parámetros de consulta se pueden anexar a la ruta de acceso en el siguiente formato:

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

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

Mediante este mecanismo, debe cambiar la ruta de acceso, pero no es necesario cambiar el nombre del archivo físico.

Agregar parámetros de consulta automáticamente en el programa (ejemplo incorrecto)

Al agregar automáticamente este parámetro de consulta en el programa, No es deba cambiar manualmente la ruta de acceso del archivo si cambia el archivo estático.

Un ejemplo fácil es agregar el tiempo actual a los parámetros de consulta cuando un usuario accede a una página Web. Es muy fácil porque creo que puedes escribir en una línea en cualquier lenguaje de programación. Creo que el ejemplo de la generación se ve así:

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

Sin embargo, esto tiene la desventaja de que la ventaja del almacenamiento en caché se pierde en absoluto. La ruta cambia cada vez que visita una página Web, aunque sea el mismo archivo que la anterior. Dado que se reconoce como un archivo independiente, los archivos css se descargan del servidor cada vez. Las versiones anteriores de los archivos ya no se utilizarán, pero esto es lo mismo que simplemente no usar características de almacenamiento en caché.

ASP.NET control de versiones agregando parámetros de consulta en Core

Alcause no hay pre ASP.NET Core proporciona una solución estándar a este problema de almacenamiento en caché.

Solo tiene que agregar un atributo a la etiqueta que describe asp-append-version="true" la ruta de acceso del archivo de la siguiente manera:

<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 realmente visita la página después de que se publique en la Web, se expandirá de la siguiente 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>

Se anexa una cadena aleatoria, pero esto no cambia cada vez que se realiza el acceso. Esta cadena es un valor hash y se genera en función del contenido del archivo al que se hace referencia. Por lo tanto, se genera la misma cadena siempre y cuando el contenido del archivo no cambie. Si el contenido del archivo cambia, se cambiará a una nueva cadena.

Esto garantiza que se prefieren los archivos almacenados en caché porque si los archivos son los mismos, las rutas son las mismas. A medida que se actualiza el archivo, la ruta cambia, por lo que puede descargar y utilizar el nuevo archivo.

Por asp-append-version="true" cierto, este atributo es estándar solo para los archivos estáticos colocados en la carpeta wwwroot. Tenga en cuenta que las cadenas aleatorias no se expanden cuando se establecen en otros archivos.

Acerca del programa de muestra

La plantilla de proyecto predeterminada .js plantilla de asp-append-version sitio. Sitio.css no asp-append-version tiene un anexo a él.

El programa de ejemplo _Layout.cshtml añade site.js y site.css asp-append-version del archivo. También estamos agregando etiquetas img como asp-append-version referencia.