Automatikus gyorsítótár-ürítés React buildben
Önöknek már tudniuk kell, hogy a böngészőkben létezik a statikus tartalom gyorsítótárazásának problémája. A probléma lényege az, hogy a teljesítmény növelése érdekében a böngésző gyorsítótárazza a stílusfájlokat, szkriptfájlokat és képeket.
Ez azt jelenti, hogy ha a hostingon megváltoztat valamit a szkriptjeiben vagy stílusaiban, akkor a változások csak az új webhelylátogatók számára jelennek meg. A régi látogatók, akik korábban már jártak a webhelyen, a gyorsítótárazott kódverziót fogják látni. Ez természetesen elfogadhatatlan.
Szerencsére a React-ban ez a probléma automatikusan megoldódik. A megoldás abban rejlik, hogy a build fájljai, a név és kiterjesztés mellett, rendelkeznek egy véletlenszerű karakterlánccal, amelyet hash-nek neveznek. Ez a hash a fájl tartalmának felel meg. Ez azt jelenti, hogy a fájlban lévő kód megváltoztatásakor a hash a nevében is megváltozik. Így a böngésző úgy fogja gondolni, hogy ez egy új fájl, és letölti azt.
A fájlok hash-ét megfigyelhetjük
amikor azok be vannak kapcsolva a index.html-ben:
<script defer="defer" src="/static/js/main.3dd63bcb.js"></script>
<link href="/static/css/main.f855e6bc.css" rel="stylesheet">
Hajtsa végre a projekt buildelését. Tanulmányozza, milyen hash-ek találhatók a build fájljaiban.
A projekt kódjának megváltoztatása nélkül hajtsa végre a buildelést. Győződjön meg róla, hogy a fájlok hash-ei nem változnak.
Változtassa meg a projekt kódját. Hajtsa végre a buildelést. Győződjön meg róla, hogy a fájlok hash-ei megváltoznak.
