Automatischer Cache-Invalidation im React-Build
Sie sollten bereits wissen, dass es in Browsern ein Problem mit dem Cache von Statischen Dateien gibt. Das Problem besteht darin, dass der Browser zur Leistungssteigerung Dateien wie Stylesheets, Skripte und Bilder zwischenspeichert.
Das bedeutet, wenn Sie auf Ihrem Hosting etwas in Ihren Skripten oder Styles ändern, werden die Änderungen nur für neue Besucher der Website sichtbar sein. Bestehende Besucher, die die Website bereits zuvor besucht haben, werden die zwischengespeicherte Version des Codes sehen. Das ist natürlich inakzeptabel.
Glücklicherweise wird dieses Problem in React automatisch gelöst. Die Lösung besteht darin, dass die Build-Dateien zusätzlich zum Namen und der Erweiterung eine zufällige Zeichenkette haben, die Hash genannt wird. Dieser Hash entspricht dem Inhalt der Datei. Das bedeutet, dass bei einer Änderung des Codes in der Datei sich auch der Hash in ihrem Namen ändert. So wird der Browser denken, dass es eine neue Datei ist und sie herunterladen.
Wir können die Datei-Hashes
bei ihrem Einbindung in der index.html beobachten:
<script defer="defer" src="/static/js/main.3dd63bcb.js"></script>
<link href="/static/css/main.f855e6bc.css" rel="stylesheet">
Führen Sie einen Build des Projekts aus. Untersuchen Sie, welche Hashes die Dateien im Build haben.
Führen Sie, ohne den Code Ihres Projekts zu ändern, erneut einen Build aus. Vergewissern Sie sich, dass sich die Datei-Hashes nicht geändert haben.
Ändern Sie den Code Ihres Projekts. Führen Sie einen Build aus. Vergewissern Sie sich, dass sich die Datei-Hashes geändert haben.
