Adicione uma versão que indica que a versão antiga em cache do arquivo estático está atualizada para evitar ser usada

Já que o palco principal é longo, se você quiser ver apenas o programa, por favor, pule.

ambiente

Estúdio Visual

• Visual Studio 2019

Núcleo ASP.NET

• 3.1 (Página de navalha, MVC)

Sobre caching arquivos em páginas da Web

Quando você visita uma página da Web, além de HTML, .js arquivos (Javascript), .css arquivos (folhas de estilo) e arquivos de imagem são baixados para o cliente para exibição e execução. No entanto, alguns arquivos de imagem são grandes, e baixá-los todas as vezes pode ser caro. Além disso, .js arquivos e arquivos .css são frequentemente usados em outras páginas, e não há necessidade de baixá-los todas as vezes. Esses arquivos podem ser temporariamente salvos no seu navegador após o download. Isso se chama caching.

Se o arquivo estiver em cache, por exemplo, o HTML será baixado do servidor web quando você visitar a mesma página. Outros arquivos são visualizados e executados usando arquivos armazenados localmente sem baixá-los se houver um cache. Isso reduz a carga no servidor e permite que o cliente visualize a página em alta velocidade sem consumir largura de banda de comunicação.

Problemas causados pelo cache

Se os arquivos colocados no servidor e nos arquivos em cache são os mesmos geralmente depende do caminho do arquivo descrito no HTML. O mesmo caminho de arquivo é basicamente arquivos armazenados em cache. (Pode haver outras condições, mas o caminho do arquivo é certo)

A seguir, um exemplo de um caminho de arquivo. Os parâmetros de atributo de href e src se aplicam.

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

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

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

No entanto, esse comportamento pode ser um problema.

Por exemplo, se um usuário tiver um arquivo JavaScript versão 1 quando acessá-lo pela primeira vez, o arquivo JavaScript da versão 1 será armazenado em cache. Em seguida, o servidor publica o arquivo JavaScript versão 2. Se o caminho do arquivo JavaScript fosse o mesmo quando o usuário visitou a mesma página, o arquivo Javascript versão 1 armazenado em cache sem baixar o arquivo JavaScript versão do servidor 2 pode ser usado. Isso pode causar defeitos que o público não pretende.

Neste momento, eu acho que muitas vezes você vê "Tente excluir o cache" como uma das contramedidas do lado do usuário, mas esta pode ser a causa.

Como lidar com problemas de cache no lado do servidor

Como mencionado acima, se os arquivos em cache são usados depende em grande parte do caminho do arquivo (URL).

Portanto, quando você atualiza um arquivo, você pode forçá-lo a baixar um novo arquivo alterando o nome do arquivo.

Por exemplo, se um arquivo versão 1

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

Quando o arquivo foi atualizado versão 2

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

O Site2 está .css do lado do cliente.

No entanto, se você fizer isso manualmente, ele pode ser complicado e propenso a erros para alterar caminhos e renomear arquivos físicos.

Adicione parâmetros de consulta a um caminho de arquivo

A forma como a Web funciona permite adicionar parâmetros de consulta com uma combinação de chaves e valores após o caminho. No mecanismo de cache do cliente, mesmo que os arquivos físicos sejam os mesmos, se os parâmetros de consulta forem diferentes, eles serão reconhecidos como arquivos separados. Os parâmetros de consulta são valores que não têm sentido se não houver propósito de uso, mesmo que sejam adicionados.

Os parâmetros de consulta podem ser anexados ao caminho no seguinte formato:

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

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

Ao usar este mecanismo, você precisa mudar o caminho, mas você não precisa renomear o arquivo físico.

Adicione parâmetros de consulta automaticamente no programa (mau exemplo)

Adicionando automaticamente este parâmetro de consulta no programa, Você não precisa alterar manualmente o caminho do arquivo se você alterar o arquivo estático.

Um exemplo fácil é adicionar o tempo atual aos parâmetros de consulta quando um usuário acessa uma página da Web. É muito fácil porque eu acho que você pode escrever em uma linha em qualquer linguagem de programação. Acho que o exemplo da geração é assim:

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

No entanto, isso tem a desvantagem de que a vantagem do cache se perde em tudo. O caminho muda cada vez que você visita uma página da Web, mesmo que seja o mesmo arquivo do anterior. Por ser reconhecido como um arquivo separado, os arquivos css são baixados do servidor todas as vezes. Versões mais antigas de arquivos não serão mais usadas, mas isso é o mesmo que simplesmente não usar recursos de cache.

ASP.NET controle de versão adicionando parâmetros de consulta no Core

Alcause não há pré-ASP.NET Core fornece uma solução padrão para este problema de cache.

Você só precisa adicionar um atributo à tag que descreve asp-append-version="true" o caminho do arquivo da seguinte forma:

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

Se você realmente visitar a página depois de publicada na Web, ela se expandirá da seguinte forma:

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

Uma sequência aleatória é anexada, mas isso não muda toda vez que o acesso é feito. Esta sequência é um valor hash e é gerada com base no conteúdo do arquivo referenciado. Portanto, a mesma sequência é gerada desde que o conteúdo do arquivo não mude. Se o conteúdo do arquivo mudar, ele será alterado para uma nova sequência.

Isso garante que os arquivos armazenados em cache sejam preferidos porque se os arquivos forem os mesmos, os caminhos são os mesmos. À medida que o arquivo é atualizado, o caminho muda, para que você possa baixar e usar o novo arquivo.

A asp-append-version="true" propósito, este atributo é padrão apenas para arquivos estáticos colocados na pasta wwwroot. Observe que as sequências aleatórias não são expandidas quando definidas para outros arquivos.

Sobre o programa de amostragem

O modelo de projeto padrão .js asp-append-version modelo do site. Site.css não asp-append-version tem um anexo a ele.

O programa de amostra _Layout.cshtml adiciona site.js e site.css asp-append-version do arquivo. Também estamos adicionando tags img como asp-append-version referência.