Երբևէ զգացե՞լ եք, որ ձեր վեբ հավելվածը «Կրիան» է տխրահռչակ «Կրիան և Նապաստակը» առակից: Բացառությամբ այս դեպքի, մրցավազքում դանդաղ և հաստատուն հաղթանակ չկա. միայն ձեր օգտատերերն են անհամբեր թմբկահարում իրենց մատները: Գոյություն ունի սուպերհերոս, որը կարող է ներխուժել օրը փրկելու համար, բայց մենք չափազանց երկար ժամանակ անտեսել ենք այն: Ժամանակն է խոսել Cache-Control-ի մասին:

Այսպիսով, ի՞նչ է սա «Cache-Control»-ը: Այն հնչում է որպես սուպերհերոսի ուժ, այնպես չէ՞: Պատկերացրեք այս սցենարը. դուք մտնում եք ձեր սիրելի սրճարան, և նախքան որևէ բառ ասելը, նրանք ձեզ հանձնում են ձեր սովորականը` թարմ պատրաստված: Դա Cache-Control-ն է ձեր վեբ հավելվածի համար: Ամեն անգամ թարմ բաժակ եփելու փոխարեն այն հիշում է ձեր սիրելին և անմիջապես մատուցում: Թույն, հա՞:

Ահա թե ինչպես է այն աշխատում. երբ զննարկիչը վերցնում է վեբ էջը, այն պահում է դրա պատճենը: Այս կերպ, երբ վերանայում եք էջը, այն պետք չէ նորից վերցնել ամեն ինչ: Այն նայում է պահված պատճենին, քեշին և ասում. «Օ՜հ, ես հենց այստեղ եմ ստացել»: և այն ներկայացնում է ձեզ ավելի արագ, քան «Բազինգա» ասելու համար անհրաժեշտ ժամանակը: Այստեղ է, որ Cache-Control-ը քայլեր է ձեռնարկում այս գործընթացը կառավարելու և ձեր հավելվածի աշխատանքը բարելավելու համար:

Դուք, խելացի վեբ ծրագրավորող, կարող եք հարցնել. «Բայց ինչպե՞ս ենք մենք իրականացնում Cache-Control»: Հիանալի հարց, իմ խորաթափանց ընկեր: Կան բազմաթիվ հրահանգներ, որոնք կարող եք օգտագործել, ինչպիսիք են no-cache, no-store, max-age և այլն: Օրինակ, ձեր HTTP վերնագրում max-age=3600 սահմանելը նշանակում է, որ քեշը լավ է մեկ ժամով: Այնուհետև զննարկիչը պետք է նորը ստանա:

Express.js սերվերում այն ​​նման կլինի հետևյալին.

app.use((req, res, next) => {
  res.set('Cache-control', 'public, max-age=3600');
  next();
});

Եկեք իրական դառնանք այստեղ մի քանի օրինակներով:

Դիտարկենք լրատվական կայք: Հրատապ լուրերի բաժինը թարմացվում է ամեն րոպե: Դուք no-cache-ը կամ max-age-ին կսահմանեիք շատ ցածր արժեք՝ համոզվելու համար, որ ձեր օգտատերերը վերջին ժամվա հին վերնագրերի փոխարեն ստանում են ամենավերջին նորությունները: Բայց ձեր կայքի լոգոյի համար, որը փոխվում է նույնքան հաճախ, որքան նահանջ տարին, ավելի երկար max-age օգտագործելն օգնում է: Բրաուզերը կարիք չունի ամեն անգամ ներբեռնելու լոգոն՝ խնայելով ռեսուրսները և բեռնման ժամանակը:

Նորությունների սերվերում դա կարող է այսպիսի տեսք ունենալ.

app.use('/news', (req, res, next) => {
  res.set('Cache-Control', 'public, max-age=60');
  next();
});

app.use('/static/logo', (req, res, next) => {
  res.set('Cache-Control', 'public, max-age=31536000');  // A year
  next();
});

Հիշեք, որ մեծ զորությամբ մեծ պատասխանատվություն է գալիս: Cache-Control-ը կարող է զգալիորեն բարելավել ձեր վեբ հավելվածի աշխատանքը, սակայն ոչ պատշաճ օգտագործումը կարող է հանգեցնել հնացած տվյալների կամ ավելի մեծ սերվերի բեռի: Ուրեմն խելամտորեն օգտագործեք այս ուժը:

Որպես վեբ մշակողներ, ուսանողներ կամ մասնագետներ, Cache-Control-ի ըմբռնումն ու իրականացումը նման է թաքնված Infinity Stone-ի հայտնաբերմանը վեբ զարգացման հսկայական Marvel տիեզերքում: Դա հզոր գործիք է, որը կարող է կտրուկ բարելավել ձեր վեբ հավելվածի աշխատանքը՝ դարձնելով ձեր օգտատերերի փորձը նույնքան անխափան, որքան doggo meme էջը պտտելը:

Այսպիսով, հաջորդ անգամ, երբ պատրաստում եք վեբ հավելված, մի մոռացեք ավելացնել Cache-Control-ի մի տող: Դա պարզապես կարող է լինել այն գաղտնի բաղադրիչը, որը ձեզ անհրաժեշտ է, որպեսզի ձեր հավելվածը սեղմվի Flash-ի պես, այլ ոչ թե մեր խեղճ Կրիայի պես թափառեք:

Լրացուցիչ բովանդակություն shubhamgautamlog.medium.com կայքում: Միացեք ինձ հետ Twitter, Linkedinև կիսվեք նաև այն :)



Ընտրելով REST-ի, GraphQL-ի և gRPC-ի միջև՝ պարզ ուղեցույց
API-ների աշխարհը արագորեն զարգանում է՝ ներկայացնելով ծրագրավորողների համար բազմաթիվ ընտրություններ: Այս ուղեցույցը կօգնի ձեզ նավարկելու…shubhamgautamlog.medium.com



https://shubhamgautamlog.medium.com/top-frontend-build-tools-to-use-in-2023-d890b2ce1908