Aggiungere una versione che indichi che la versione precedente memorizzata nella cache del file statico è aggiornata per evitare di essere utilizzata

Poiché la fase frontale è lunga, se vuoi vedere solo il programma, saltalo.

ambiente

Visual Studio

• Visual Studio 2019

ASP.NET Nucleo

• 3.1 (pagina Razor, MVC)

Informazioni sulla memorizzazione nella cache dei file nelle pagine Web

Quando si visita una pagina Web, oltre a HTML, i file .js (Javascript), i file .css (fogli di stile) e i file di immagine vengono scaricati nel client per la visualizzazione e l'esecuzione. Tuttavia, alcuni file di immagine sono di grandi dimensioni e scaricarli ogni volta può essere costoso. Inoltre, .js file e .css file vengono spesso utilizzati su altre pagine e non è necessario scaricarli ogni volta. Questi file possono essere temporaneamente salvati nel browser dopo il download. Questo è chiamato memorizzazione nella cache.

Se il file viene memorizzato nella cache, ad esempio, il codice HTML viene scaricato dal server Web quando si visita la stessa pagina. Altri file vengono visualizzati ed eseguiti utilizzando file memorizzati localmente senza scaricarli se c'è una cache. Ciò riduce il carico sul server e consente al client di visualizzare la pagina ad alta velocità senza consumare larghezza di banda di comunicazione.

Problemi causati dalla memorizzazione nella cache

Se i file inseriti nel server e i file memorizzati nella cache sono gli stessi dipende in genere dal percorso del file descritto nel codice HTML. Lo stesso percorso del file è fondamentalmente file memorizzati nella cache. (Potrebbero esserci altre condizioni, ma il percorso del file è certo)

Di seguito è riportato un esempio di percorso di file. Si applicano i parametri dell'attributo href e src.

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

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

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

Tuttavia, questo comportamento può essere un problema.

Ad esempio, se un utente ha un file JavaScript versione 1 quando vi accede per la prima volta, il file JavaScript versione 1 viene memorizzato nella cache. Il server pubblica quindi il file JavaScript versione 2. Se il percorso del file JavaScript era lo stesso quando l'utente visitava la stessa pagina, è possibile utilizzare il file Javascript versione 1 memorizzato nella cache senza scaricare il file JavaScript versione 2 del server. Ciò può causare difetti che il pubblico non intende.

In questo momento, penso che spesso vedi "Prova a eliminare la cache" come una delle contromisure sul lato utente, ma questa potrebbe essere la causa.

Come gestire i problemi di cache sul lato server

Come accennato in precedenza, se vengono utilizzati file memorizzati nella cache dipende in gran parte dal percorso del file (URL).

Pertanto, quando si aggiorna un file, è possibile forzarlo a scaricare un nuovo file modificando il nome del file.

Ad esempio, se un file versione 1

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

Quando il file è stato aggiornato versione 2

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

Site2 è .css sul lato client.

Tuttavia, se lo si fa manualmente, può essere ingombrante e soggetto a errori modificare i percorsi e rinominare i file fisici.

Aggiungere parametri di query a un percorso di file

Il funzionamento del Web consente di aggiungere parametri di query con una combinazione di tasti e valori dopo il percorso. Nel meccanismo di memorizzazione nella cache client, anche se i file fisici sono gli stessi, se i parametri della query sono diversi, verranno riconosciuti come file separati. I parametri di query sono valori che non hanno alcun significato se non esiste uno scopo di utilizzo anche se vengono aggiunti.

I parametri di query possono essere aggiunti al percorso nel formato seguente:

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

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

Utilizzando questo meccanismo, è necessario modificare il percorso, ma non è necessario rinominare il file fisico.

Aggiungere automaticamente parametri di query nel programma (cattivo esempio)

Aggiungendo automaticamente questo parametro di query nel programma, Non è necessario modificare manualmente il percorso del file se si modifica il file statico.

Un esempio semplice è quello di aggiungere l'ora corrente per eseguire query sui parametri quando un utente accede a una pagina Web. È molto facile perché penso che tu possa scrivere in una riga in qualsiasi linguaggio di programmazione. Penso che l'esempio di generazione sia simile al seguente:

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

Tuttavia, questo ha lo svantaggio che il vantaggio della memorizzazione nella cache viene perso. Il percorso cambia ogni volta che si visita una pagina Web, anche se è lo stesso file del precedente. Poiché viene riconosciuto come file separato, i file CSS vengono scaricati dal server ogni volta. Le versioni precedenti dei file non verranno più utilizzate, ma questo è lo stesso che semplicemente non utilizzare le funzionalità di memorizzazione nella cache.

ASP.NET controllo versione aggiungendo parametri di query in Core

Alcausa non esiste una pre-ASP.NET Core fornisce una soluzione standard a questo problema di memorizzazione nella cache.

Devi solo aggiungere un attributo al tag che descrive il asp-append-version="true" percorso del file come segue:

<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 si visita effettivamente la pagina dopo che è stata pubblicata sul Web, verrà espansa come segue:

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

Viene aggiunta una stringa casuale, ma questa non cambia ogni volta che viene effettuato l'accesso. Questa stringa è un valore hash e viene generata in base al contenuto del file a cui si fa riferimento. Pertanto, la stessa stringa viene generata purché il contenuto del file non cambi. Se il contenuto del file cambia, verrà modificato in una nuova stringa.

Ciò garantisce che i file memorizzati nella cache siano preferiti perché se i file sono gli stessi, i percorsi sono gli stessi. Man mano che il file viene aggiornato, il percorso cambia, in modo da poter scaricare e utilizzare il nuovo file.

A asp-append-version="true" proposito, questo attributo è standard solo per i file statici inseriti nella cartella wwwroot. Si noti che le stringhe casuali non vengono espanse quando sono impostate su altri file.

Informazioni sul programma di esempio

Modello di progetto predefinito .js modello di asp-append-version sito. Sito.css non asp-append-version ha un allegato.

Il programma di _Layout.cshtml esempio aggiunge .js sito e .css del asp-append-version file. Stiamo anche aggiungendo tag img asp-append-version come riferimento.