Resetarea automată a cache-ului în build-ul React
Ar trebui să știți deja că în browsere există problema cache-ului pentru statică. Esența problemei este că pentru a crește viteza, browserul cache-uită fișierele de stiluri, scripturi și imagini.
Aceasta înseamnă că dacă pe hosting schimbați ceva în scripturile sau stilurile voastre, schimbările vor apărea doar la noii vizitatori ai site-ului. Vechii vizitatori, care au fost deja pe site anterior, vor vedea versiunea de cod cache-uită. Acest lucru, desigur, este inacceptabil.
Din fericire, în React această problemă este rezolvată automat. Soluția ei constă în faptul că fișierele din build, pe lângă nume și extensie, au un șir aleatoriu, care se numește hash. Acest hash corespunde conținutului fișierului. Aceasta înseamnă că la modificarea codului din fișier, se va schimba și hash-ul din numele său. Astfel, browserul va crede că este un fișier nou și îl va descărca.
Putem observa hash-urile fișierelor
la conectarea lor în index.html:
<script defer="defer" src="/static/js/main.3dd63bcb.js"></script>
<link href="/static/css/main.f855e6bc.css" rel="stylesheet">
Efectuați build-ul proiectului. Studiați, ce hash-uri sunt la fișierele din build.
Fără a modifica codul proiectului dvs. efectuați build-ul. Asigurați-vă, că hash-urile fișierelor nu se vor schimba.
Modificați codul proiectului dvs. Efectuați build-ul. Asigurați-vă, că hash-urile fișierelor se vor schimba.
