Кеш статики на клиенте. Как сделать удобно

Большинству 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;