Problem mit dem Cache in Browsern

Der Browser cached eingebundene CSS-Stylesheets, JavaScript-Skripte und Bilder. Caching bedeutet, dass die eingebundenen Dateien nur beim ersten Besuch eines Benutzers auf der Website heruntergeladen werden. Bei späteren Besuchen werden diese Dateien nicht erneut heruntergeladen, sondern aus dem Cache des Browsers geladen.

Caching ist nützlich. Es wurde geschaffen, um die Ladegeschwindigkeit der Website zu erhöhen. Es ist für den Browser nämlich schneller, eine Datei aus seinem Speicher zu laden, als sie jedes Mal aus dem Internet herunterzuladen.

Allerdings bezahlt man für die Geschwindigkeit mit Unannehmlichkeiten bei der Entwicklung. Die Sache ist die, dass wenn Sie etwas in Ihrem Code ändern und die Änderungen dann auf dem Hosting veröffentlichen - alle Benutzer, die bereits auf Ihrer Website waren, werden eine alte zwischengespeicherte Kopie des Codes haben.

Erste Lösung des Problems

Um dieses Verhalten zu bekämpfen, muss man jede veränderte Datei umbenennen. In der Praxis ist das nicht praktikabel, daher wird ein Trick verwendet. Sein Prinzip besteht darin, dass beim Einbinden der Datei nach dem Dateinamen ein Fragezeichen, ein Gleichheitszeichen und die Versionsnummer Ihres Skripts gesetzt wird. Eine solche Konstruktion wird GET-Parameter genannt.

Das Vorhandensein eines GET-Parameters im Dateinamen "beschädigt" den Pfad aus Sicht des Servers nicht, er zeigt nach wie vor auf die gleiche Datei. Aber aus Sicht des Browsers zwingt eine Änderung des GET-Parameters den Browser dazu, den Pfad zur Datei als geändert zu betrachten und die Datei erneut herunterzuladen.

Um dem Cache entgegenzuwirken, wenn Sie Änderungen in Ihrer Codedatei vornehmen, müssen Sie den Wert des GET-Parameters um eins erhöhen. Sehen Sie sich ein Beispiel zur Anwendung dieses Ansatzes an:

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

Zweite Lösung des Problems

Es gibt auch einen fortschrittlicheren Ansatz. Er besteht darin, dass an die Dateinamen zufällige Zeichenketten angehängt werden, zum Beispiel so:

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

Diese Zeichenketten werden Hashes genannt. Ein Hash stellt eine eindeutige Zeichenkette dar. Er wird auf spezielle Weise aus dem Inhalt der Datei berechnet. Das bedeutet, dass jeder Text seinen eigenen eindeutigen Hash entspricht. Wenn der Text der Datei geändert wurde, dann wird auch ihr Hash ein anderer sein und wir müssen ihn im Dateinamen ändern.

Natürlich ist es eine mühsame Beschäftigung, Hashes von Hand zu berechnen und Dateien umzubenennen. Daher wird dieser Ansatz nur dann verwendet, wenn wir ein Tool haben, das automatisch Hashes berechnen und Dateien umbenennen kann, sowie die Dateinamen in den HTML-Dateien auf die neuen ändern kann. All dies ermöglicht Webpack. Das werden wir throughout des gesamten Tutorials lernen.