Thank you for reading this post, don't forget to subscribe!

Заго­ло­вок Cache-control поз­во­ля­ет зна­чи­тель­но уве­ли­чить ско­рость загруз­ки сай­та, а так­же раз­гру­зить канал меж­ду сер­ве­ром и поль­зо­ва­те­лем. Этот заго­ло­вок вклю­ча­ет кэши­ро­ва­ние и про­сто в при­ме­не­нии для фай­лов, кото­рые нико­гда не меня­ют­ся. Но для того, что­бы исполь­зо­вать это пре­иму­ще­ство для фай­лов, кото­рые могут менять­ся, нуж­но деталь­нее разо­брать­ся в кли­ент­ском кэшировании:

1. Сер­вер отправ­ля­ет допол­ни­тель­ный заго­ло­вок Cache-control
2. Бра­у­зер видит этот заго­ло­вок и сохра­ня­ет файл в свой кэш
3. При сле­ду­ю­щем запро­се к фай­лу (напри­мер, посе­ти­тель пере­шел на дру­гую стра­ни­цу, а на ней опять есть загруз­ка биб­лио­те­ки jQuery), кото­рый лежит в кэше, бра­у­зер не будет отправ­лять запрос на сайт. Он пока­жет сохра­нен­ную локаль­но версию
4. Повтор­ный запрос на сайт для загруз­ки зак­э­ши­ро­ван­ных фай­лов бра­у­зер нач­нет слать толь­ко тогда, когда насту­пит дата, ука­зан­ная в самом заго­лов­ке Cache-control (ее мож­но конфигурировать)

Включаем кэширование

Пер­вое — нам необ­хо­ди­мо вклю­чить кэши­ро­ва­ние для JS/CSS на сер­ве­ре (у нас Nginx):

Использование версий

Но в основ­ном при­ло­же­нии, необ­хо­ди­мо доба­вить к пути загруз­ки JS/CSS фай­лов т.н. версии:

Где "r4" и "r7" — про­сто чис­ла, кото­рые Вы сами ука­зы­ва­е­те (вер­сия фай­ла, луч­ше начать с 1). При каж­дом обнов­ле­нии фай­лов, Вам нуж­но про­сто поме­нять его вер­сию (уве­ли­чить на 1). Напри­мер, после каких-то изме­не­ний в styles.css мы уве­ли­чим его версию:

# Новая вер­сия заста­вит бра­у­зер загру­зить новый файл, т.к. путь к нему изме­нил­ся (для бра­у­зе­ра это новый файл)