Большинству web-разработчиков известно, что статику (js, css - о них речь в статье) нужно кешировать на клиенте. Это сильно ускоряет работу сайта, и даже Google PageSpeed Insights требует делать кеш. Вобщем то правильно требует.

Встает другой вопрос - какой правильно ставить expires (время жизни кеша) и как его правильно сбрасывать. А то ведь случается релиз - бакенд уже новый, а фронтенд у пользователя старый, из кеша.

Для этого нам нужно ответить на следующие вопросы:
 

  • Что является ключем кеширования для URL в браузере?
    Ключем кеширования URL является... сам URL, что логично. Полный адрес страницы от htt.....и/до/самого..?последнего=параметра. Без якоря (идущего после #)
     

  • Как сбросить ключ конкретный ключ?
    Сбросить кеш какой то конкретной URL нельзя никак, ни из браузера, ни событием с сервера
     
  • Как поменять ключ?
    А раз сбросить ключ нельзя - его надо поменять, чтобы после релиза статика собиралась с нового URL, а значит не имеющего никакого старого кеша. Делается это очень просто. Многие фреймворки сами генерируют уникальные ссылки вида /assets/d6f5cd32fe.css, некоторые не генерируют. Там, где имена файлов постоянные и не меняющиеся, удобно использовать адреса вида: /templ/css/style.css?12 - где параметр "12" это число меняющееся с каждым релизом на единиицу. Впринципе там может быть не обязательно число, а например таймштам изменения файла. Вот такой пример подклчения js-файла.
    <script src="/templ/js/any-js-file.js?881"></script> 
  • Какое время кеша максимально выгодно всем (и клиентам и серверу задавать для кеша)?
    Оптимальное время кеша - периодиченость релизов умноженая на два, но не менее месяца. Если вы делаете релизы раз в неделю - то ставьте кеш 30 дней. Если делаете раз в месяц - то 60 дней. Это позволит удалять браузеру старый кеш с диска и не засорять его "вечным кешем" уже не используемых сылок, как в случае с expires установленным на годы вперед. С другой стороны умножив на два - вы ничего не потеряете если релиз затянется, пусть даже в 2 раза.

Ответив на все вопросы получилась весьма неплохая инструкция. Сам кеш в nginx настраивается следующим образом:

location ~* ^.+\.(jpg|jpeg|gif|png|rar|txt|tar|wav|bz2|exe|pdf|doc|xls|ppt|bmp|rtf|js|ico|css|zip|tgz|gz|svg)$ {
     root /root/path/of/your/site/;
     expires 30d;
     access_log off;
}

И не забудьте включить gzip:

gzip on;
gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript  application/octet-stream image/svg+xml;