Хак: Умное Кеширование и Версионность в Javascript/CSS (1.x)

+15
3.73K
Всем привет!

Пишу о наболевшем...

Подключая внешние CSS и Javascript, мы хотим снизить до минимума лишние HTTP-запросы.
Для этого .js и .css файлы отдаются с заголовками, обеспечивающими надежное кеширование.

Но что делать, когда какой-то из этих файлов меняется в процессе разработки? У всех пользователей в кеше старый вариант — пока кеш не устарел, придет масса жалоб на сломанную интеграцию серверной и клиентской части.

Вот именно такая проблема возникает у меня при любых доработках. Поэтому предлагаю небольшой хак/решение.
Сразу отмечу, если вдруг кто-то писал уже об этом, то прошу не кидать камнями, т.к. блоги отслеживаю, а разработчики данный функционал на сегодняшний день еще не заложили.

Предлагаю следующее решение: после имени JS или CSS файла добавлять переменную версии, которая берется из даты изменения файла.
Таким образом, при редактировании данных файлов, дата изменения будет меняться, а следовательно браузер запросит и закеширует файлы заново, а старая версия постепенно выпадет из кеша.

Зачастую подключение JS и CSS происходит через $inPage->addHeadJS и $inPage->addHeadCSS, поэтому внесем правки именно в эти функции.

Файл: /core/classes/page.class.php
функцию:
  1.  
  2. public function addHeadJS($src){
  3. return $this->addHead('<script type="text/javascript" src="/'.$src.'"></script>');
  4. }
  5.  
меняем на:
  1.  
  2. public function addHeadJS($src){
  3. return $this->addHead('<script type="text/javascript" src="/'.$src.'?'.filemtime(PATH.'/'.$src).'"></script>');
  4. }
  5.  
и также подключение CSS
функцию:
  1.  
  2. public function addHeadCSS($src){
  3. return $this->addHead('<link href="/'.$src.'" rel="stylesheet" type="text/css" />');
  4. }
  5.  
меняем на:
  1.  
  2. public function addHeadCSS($src){
  3. return $this->addHead('<link href="/'.$src.'?'.filemtime(PATH.'/'.$src).'" rel="stylesheet" type="text/css" />');
  4. }
  5.  
Прошу прокомментировать данное решение, надеюсь функция запроса даты изменения файла не будет сильно нагружать сервер.

upd: вариант для 2-ой ветки Хак: Умное Кеширование и Версионность в Javascript/CSS (2.x)
0
Stecc Stecc 8 лет назад #
Хотелось бы услышать мнение от разработчиков cms.
0
Stecc Stecc 8 лет назад #
А так да, очень не хватает кеширование. Спасибо.
0
Kirill Levitskiy Kirill Levitskiy 8 лет назад #
Тут как раз речь идет о случаях, когда кеширование - во вред и описан простой, но эффективный метод как избежать нежелательного кеширования.
0
irbis irbis 8 лет назад #
Плюсы идут - это радует! Надеюсь, кому-нибудь пригодится. Хотелось бы еще критику услышать или это решение идеально? joke
0
Fuze Fuze 8 лет назад #
Хотелось бы еще критику услышать
В общем то этим должен заниматься вебсервер, а не php. Это в идеале и как положено. Просто filemtime для каждого js и css файла, имхо, лишнее в продакшене. Надеюсь, не сильно покритиковал joke

p.s. ну и filemtime($src) - это не правильно, ведь в $src относительный путь, тогда уж через константу PATH нужно.
0
irbis irbis 8 лет назад #
этим должен заниматься вебсервер, а не php
а можно ссылочку на настройку этого чуда или текстом написать
0
irbis irbis 8 лет назад #
С модулями гораздо сложнее, их придется настраивать каждому и заморачиваться с этим. Мое решение, как спасение ))
0
irbis irbis 8 лет назад #
С константой PATH согласен, исправил!

Еще от автора

Компонент "Совместные покупки"
Всем привет! Уже как год лежит готовый компонент для организации "Совместных покупок".
Хак: добавление комментариев в ленту активности
Всем привет! Решил выложить свою мини-доработку по добавлению комментария в ленту активности.
Хак: поворот фото в Фотоальбомах
Всем привет! Давно ничего не писал, как обычно нет на все времени.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.