Réinitialisation automatique du cache dans la build React

Vous devez déjà savoir que dans les navigateurs il existe un problème de cache des ressources statiques. L'essence du problème est que pour améliorer les performances, le navigateur met en cache les fichiers de styles, de scripts et d'images.

Cela signifie que si sur l'hébergement vous modifiez quelque chose dans vos scripts ou styles, les changements n'apparaîtront que chez les nouveaux visiteurs du site. Les anciens visiteurs, qui étaient déjà sur le site auparavant, verront la version mise en cache du code. Ceci, bien sûr, est inacceptable.

Heureusement, dans React, ce problème est résolu automatiquement. Sa solution consiste dans le fait que les fichiers de la build, en plus du nom et de l'extension, ont une chaîne aléatoire, qui s'appelle hash. Cet hash correspond au contenu du fichier. Cela signifie que lors d'un changement du code dans le fichier, le hash dans son nom changera également. Ainsi, le navigateur pensera qu'il s'agit d'un nouveau fichier et le téléchargera.

Nous pouvons observer les hash des fichiers lors de leur inclusion dans index.html :