CSS и JS | трюк с версиями и Rewrite

1.06K
.
╭∩╮ (`-`) ╭∩╮
Все мы часто занимаемся доводкой своих дизайнов и скриптов, соответственно меняются CSS и JS файлы. Как мы знаем (я даже писал статью про кэширование), для максимального повышения скорости загрузки страниц Вашего сайта, все CSS, JS и картинки нужно кэшировать средствами браузеров клиентов.

Но как быть, если (к примеру) Вы изменили дизайн, соответственно поменялся CSS, а у клиентов этот файл закэширован на год вперед и то, что увидит клиент будет совсем не то, что сделали Вы? Давать объявление мол "почистите кэши своих браузеров"? Не все даже знают, как это делается (сайтостроители не в счет гг), посему такой путь отметаем.

Что делать?
.
╭∩╮ (`-`) ╭∩╮
Самый очевидный путь - это добавлять к имени Вашего CSS файла номер версии, или билда.
Например style.24.css Изменился стиль, меняете номер версии.

Достоинства:
1) Правильно отрабатывается кэширование на стороне клиента. Если файл изменился, изменилось и его имя, следовательно браузер загрузит новый файл.

Недостатки:
1) Если пользуетесь какой-либо системой контроля версий, возникают большие неудобства и Вы не сможете отслеживать изменения, ибо переименование (для контроля версий) означает удаление старого файла и создание нового.
2) Если пользуетесь какой-либо системой типа Grunt, придется каждый раз корректировать его сценарий.

Серьезные разработчики обычно используют и контроль версий и что-то типа Grunt (чаще всего именно его), потому данный путь (с изменением имени файла) становится очень неудобным.

Следовательно будем искать другой...
.
AlkatraZ
╭∩╮ (`-`) ╭∩╮
Многие дизайнеры, которые в курсе проблемы кэширования, рекомендуют добавлять при вызове файла URL параметр с номером версии, или билда, например: style.css?ver=24

Достоинства:
1) Очень просто реализуется, поменял всего один URL параметр и клиент уже (теоретически) должен будет загрузить этот файл заново.

Недостатки:
Прокси серверы обычно не кэшируют ресурсы с URL параметрами.
Хорошее исследование на данную тему по ссылке (англ.): http://stevesouders.com/blog/2 ... tring
Вроде бы думается "а какое отношение прокси серверы имеют к нам"? А если хорошо вдуматься, то даже на серверах зачастую применяют какие-либо системы кэширования типа squid, или Nginx. Со стороны клиентов, кэширующие прокси часто стоят в организациях, ну и нельзя не упомянуть Оперу Мини, или ускоритель ГуглХрома.
Как утверждает автор статьи, что я дал ссылку, процент таких посетителей 5-25, а для мобильного инета я думаю будет и того выше (за счет браузеров с ускорялками и кэшей мобильных операторов). Посему, игнорировать подобное не стоит.

В целом, если пренебречь теми пользователями, что через прокси, сам метод неплох, просто реализуется и допустим к применению.

Но можно ли придумать что то еще получше?
.
AlkatraZ
╭∩╮ (`-`) ╭∩╮
Если больше придумать ничего нельзя, статью можно было бы и завершать
Однако, раскапывая просторы инета и копаясь в исходных кодах, я случайно наткнулся на одно очень красивое и интересное решение, которое уже применил в коде mobiCMS и суть которого объясню ниже.

В файл .htaccess добавляется одно Rewrite правило

<IfModule mod_rewrite.c>
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)\.(\d+)\.(js|css)$ $1.$3 [L]
</IfModule>

Далее, если Вам нужно вызвать стиль style.css Вы просто, как в 1-м примере, добавляете в URL вызова номер версии, или билда (цифры) к примеру так: <link rel="stylesheet" href="style.24.css">
Rewrite сам обработает Ваш запрос и откроет обычный style.css отбросив цифры.

Достоинства:
Простое и эффективное управление весиями, меняем всего лишь URL вызова, добавив туда перед расширением цифру (можно и несколько через точки, например 1.1)

Недостатки:
Без Реврайта работать не будет.
.
Сексуальность валенка
AlkatraZ, Как по мне то достаточно добавить версию (style.css?1) и все, если это не поможет то просто поменять имя файла, зачем издеватся мод реврайтом непойму, если каждую мелкую проблему так решать то не двиг выйдет, а ресурсопожиратель
.
это поможет. не поможет тем у кого жесткое кеширование, ну и плевать на них, у них и вся страница не редко в кеше, а с ней и линки на ксс
.
Сексуальность валенка
AlkatraZ, Кстате будет версия mobicms для nginx?
.
(\/)____o_O____(\/)
еще способ есть, напрямую складывать ксс и жс в шапке, плюс к скорости, так как пропускается еще одно или несколько обращений на файлы при загрузке, и меняем заголовки для обновы кэша, етаг тот же
.
(\/)____o_O____(\/)
Swank, не будут работать реврайты, остальное все будет работать
.
╭∩╮ (`-`) ╭∩╮
# Swank (13.01.2015 / 01:50)
AlkatraZ, Кстате будет версия mobicms для nginx?
Там ничего не мешает использовать двиг непосредственно на Nginx+PHP
Я нигде не применял специфических для Апача команд, за исключением .htaccess
А его правила можно конвертировать в конфиг nginx, кто в этом разбирается, тот легко сможет сделать.

К сожалению, для nginx пока не существует решения аналогичного .htaccess, это чтоб сервер можно было конфигурировать прямо из сайта.
Если ты встречался с .nxaccess - то сразу забудь про него
Этот наворот существует только в OpenServer

Посему, Nginx приходится настраивать непосредственно в его конфигах на сервере.
Всего: 38