Automatyczne czyszczenie cache w buildzie React
Powinieneś już wiedzieć, że w przeglądarkach istnieje problem cache statyków. Istota problemu polega na tym, że dla zwiększenia wydajności przeglądarka cache'uje pliki stylów, skryptów i obrazów.
Oznacza to, że jeśli na hostingu zmienisz coś w twoich skryptach lub stylach, to zmiany pojawią się tylko u nowych odwiedzających stronę. Starsi odwiedzający, którzy już wcześniej byli na stronie, będą widzieć zcache'owaną wersję kodu. Jest to, oczywiście, niedopuszczalne.
Na szczęście w React problem ten jest rozwiązywany automatycznie. Jego rozwiązanie polega na tym, że pliki builda, oprócz nazwy i rozszerzenia, mają losowy ciąg znaków, który nazywa się hash. Ten hash odpowiada zawartości pliku. Oznacza to, że przy zmianie kodu w pliku, będzie zmieniać się i hash w jego nazwie. W ten sposób przeglądarka będzie myśleć, że to nowy plik i pobierze go sobie.
Możemy obserwować hash'e plików
przy ich podłączaniu w index.html:
<script defer="defer" src="/static/js/main.3dd63bcb.js"></script>
<link href="/static/css/main.f855e6bc.css" rel="stylesheet">
Wykonaj build projektu. Przeanalizuj, jakie hash'e stoją u plików w buildzie.
Nie zmieniając kodu twojego projektu wykonaj build. Upewnij się, że hash'e plików nie zmienią się.
Zmień kod twojego projektu. Wykonaj build. Upewnij się, że hash'e plików zmienią się.
