Problema di cache nei browser

Il browser memorizza nella cache i file CSS, gli script JavaScript e le immagini collegati. La memorizzazione nella cache significa che i file collegati vengono scaricati dal browser solo al primo accesso dell'utente al sito. Ai successivi accessi, questi file non verranno scaricati nuovamente, ma presi dalla cache del browser.

La cache è utile. È stata creata per migliorare la velocità di caricamento del sito. È infatti più veloce per il browser prendere un file dall'archivio locale, piuttosto che scaricarlo ogni volta da internet.

Tuttavia, la velocità ha un costo in termini di inconvenienti durante lo sviluppo. Il fatto è che se modifichi qualcosa nel tuo codice e poi pubblichi le modifiche sull'hosting, tutti gli utenti che hanno già visitato il tuo sito avranno una vecchia copia del codice in cache.

Prima soluzione al problema

Per contrastare questo comportamento, è necessario rinominare ogni volta i file modificati. Nella pratica questo non è conveniente, quindi si utilizza un trucco astuto. La sua essenza consiste nel fatto che, quando si collega un file, dopo il nome del file si mette un punto interrogativo, il segno di uguale e il numero di versione del tuo script. Questa costruzione è chiamata parametro GET.

La presenza di un parametro GET nel nome del file "non rovina" il percorso dal punto di vista del server, indicando comunque lo stesso file. Ma dal punto di vista del browser, la modifica del parametro GET costringe il browser a considerare cambiato il percorso del file e a scaricare nuovamente il file.

Per combattere la cache, quando apporti modifiche al tuo file di codice, dovrai aumentare il valore del parametro GET di uno. Guarda un esempio di applicazione di questo approccio:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.css?v=1">
		<script src="script.js?v=1"></script>
	</head>
	<body>
		
	</body>
</html>

Seconda soluzione al problema

Esiste anche un approccio più avanzato. Consiste nell'aggiungere ai nomi dei file stringhe casuali, ad esempio così:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
		<script src="script.1d12c304c284a752cb9a.js"></script>
	</head>
	<body>
		
	</body>
</html>

Queste stringhe sono chiamate hash. L'hash rappresenta una stringa unica. Viene calcolato dal contenuto del file in un modo speciale. Ciò significa che a ogni testo corrisponde il proprio hash univoco. Se il testo del file è stato modificato, allora anche il suo hash sarà diverso e dovremo cambiarlo nel nome del file.

Naturalmente, calcolare manualmente gli hash e rinominare i file è un'attività poco piacevole. Pertanto, questo approccio viene utilizzato solo se abbiamo qualche strumento che permetta di calcolare automaticamente gli hash e rinominare i file, nonché di modificare i nomi dei file con quelli nuovi nei file HTML. Tutto questo è possibile con Webpack. Lo impareremo throughout tutto il tutorial.