Խնդիր բրաուզերների քեշի հետ
Բրաուզերը քեշավորում է միացված CSS ոճերի ֆայլերը, JavaScript սկրիպտները և նկարները: Քեշավորումը նշանակում է, որ միացված ֆայլերը բրաուզերը ներբեռնում է միայն օգտագործողի կայք առաջին անգամ մուտք գործելու ժամանակ: Հաջորդ մուտքերի ժամանակ այդ ֆայլերը այլևս չեն ներբեռնվում կրկին, այլ կվերցվեն բրաուզերի քեշից:
Քեշավորումը օգտակար է: Այն ստեղծվել է կայքի բեռնման արագությունը բարձրացնելու համար: Քանի որ բրաուզերի համար ավելի արագ է իր պահեստից վերցնել ֆայլը, քան այն ամեն անգամ ինտերնետից ներբեռնել:
Սակայն, արագության համար պետք է վճարել զարգացման ընթացքում անհարմարությամբ: Բանը նրանում է, որ եթե դուք ինչ-որ բան փոխեք ձեր կոդում և ապա տեղադրեք փոփոխությունները հոստինգում - բոլոր օգտագործողները, որոնք արդեն մուտք են գործել ձեր կայք, կունենան կոդի հին քեշավորված պատճեն:
Խնդիրը լուծելու առաջին մեթոդը
Նման վարքագծի դեմ պայքարելու համար անհրաժեշտ է ամեն անգամ վերանվանել փոփոխված ֆայլերը: Գործնականում դա հարմար չէ, այդ պատճառով օգտագործվում է խորամանկ հնարք: Դրա էությունը կայանում է նրանում, որ ֆայլը միացնելիս ֆայլի անունից հետո դնում ենք հարցական նշան, հավասարության նշան և ձեր սկրիպտի տարբերակի համարը: Նման կոնստրուկցիան կոչվում է GET պարամետր:
GET պարամետրի առկայությունը ֆայլի անվան մեջ «չի փչացնում» ուղին սերվերի տեսանկյունից, դեռևս ցույց տալով նույն ֆայլին: Բայց բրաուզերի տեսանկյունից GET պարամետրը փոխելը ստիպում է բրաուզերին համարել, որ ֆայլի ուղին փոխվել է և ներբեռնել ֆայլը կրկին:
Քեշի դեմ պայքարելու համար, երբ դուք փոփոխություններ եք մտցնում ձեր կոդի ֆայլում, դուք պետք է մեծացնեք GET պարամետրի արժեքը մեկով: Տեսեք նմանատիպ մոտեցման կիրառման օրինակ:
<!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>
Խնդիրը լուծելու երկրորդ մեթոդը
Գոյություն ունի նաև ավելի առաջադեմ մոտեցում: Այն կայանում է նրանում, որ ֆայլերի անուններին ավելացվում են պատահական տողեր, օրինակ, ահա այսպես:
<!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>
Այս տողերը կոչվում են հեշեր: Հեշը ներկայացնում է ունիկալ տող: Այն հաշվարկվում է ֆայլի պարունակությունից հատուկ եղանակով: Սա նշանակում է, որ յուրաքանչյուր տեքստ համապատասխանում է իր ունիկալ հեշին: Եթե ֆայլի տեքստը փոփոխվել է, ապա նրա հեշը կլինի այլ և մենք պետք է փոխենք այն ֆայլի անվան մեջ:
Իհարկե, ձեռքով հաշվարկել հեշերը և վերանվանել ֆայլերը լավ զբաղմունք չէ: Այդ պատճառով այս մոտեցումը օգտագործվում է միայն այն դեպքում, եթե մենք ունենք ինչ-որ գործիք, որը թույլ է տալիս ավտոմատ կերպով հաշվարկել հեշերը և վերանվանել ֆայլերը, ինչպես նաև փոխել ֆայլերի անունները նորերի HTML ֆայլերում: Այս ամենը թույլ է տալիս անել Webpack-ը: Սրան մենք կսովորենք ամբողջ ձեռնարկի ընթացքում:
