Problème de cache dans les navigateurs

Le navigateur met en cache les fichiers de styles CSS, les scripts JavaScript et les images qui y sont connectés. La mise en cache signifie que les fichiers connectés ne sont téléchargés par le navigateur que lors de la première visite de l'utilisateur sur le site. Lors des visites suivantes, ces fichiers ne seront plus retéléchargés, mais seront pris dans le cache du navigateur.

La mise en cache est utile. Elle est conçue pour augmenter la vitesse de chargement du site. Il est en effet plus rapide pour le navigateur de prendre un fichier depuis son stockage que de le télécharger à chaque fois depuis Internet.

Cependant, cette rapidité se paye par des inconvénients lors du développement. Le fait est que si vous modifiez quelque chose dans votre code puis publiez les modifications sur l'hébergeur - tous les utilisateurs qui ont déjà visité votre site auront une ancienne copie mise en cache du code.

Première solution au problème

Pour lutter contre ce comportement, il faut renommer à chaque fois les fichiers modifiés. En pratique, ce n'est pas pratique, donc une astuce est utilisée. Son essence est la suivante : lors de la connexion du fichier, après le nom du fichier, nous mettons un point d'interrogation, un signe égal et le numéro de version de votre script. Cette construction s'appelle un paramètre GET.

La présence d'un paramètre GET dans le nom du fichier "ne gâche pas" le chemin du point de vue du serveur, indiquant toujours le même fichier. Mais du point de vue du navigateur, la modification du paramètre GET oblige le navigateur à considérer le chemin du fichier comme ayant changé et à retélécharger le fichier.

Pour lutter contre le cache, lorsque vous apportez des modifications dans votre fichier de code, vous devrez augmenter la valeur du paramètre GET de un. Voyez un exemple d'application de cette approche :

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

Deuxième solution au problème

Il existe une approche plus avancée. Elle consiste à ajouter aux noms de fichiers des chaînes de caractères aléatoires, par exemple, comme ceci :

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

Ces chaînes s'appellent des hash (ou empreintes). Un hash représente une chaîne unique. Il est calculé à partir du contenu du fichier d'une manière spéciale. Cela signifie que à chaque texte correspond son propre hash unique. Si le texte du fichier a été modifié, alors son hash sera différent et nous devrons le changer dans le nom du fichier.

Bien sûr, calculer les hashs manuellement et renommer les fichiers est une activité peu ragoutante. C'est pourquoi cette approche n'est utilisée que si nous avons un outil permettant de calculer automatiquement les hashs et de renommer les fichiers, ainsi que de modifier les noms de fichiers pour les nouveaux dans les fichiers HTML. Webpack permet de faire tout cela. Nous apprendrons cela tout au long du tutoriel.