htaccess: Обновление CSS и JavaScript файлов с уникальными именами

Предположим, пользователь посетил ваш сайта с мобильного устройства. Статические CSS и JavaScript файлы сразу кэшируются браузером. Далее администратор сайта вносит изменения в дизайн или динамику сайта обновляя данные файлы. И что происходит?

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

Когда вы редактируете CSS или JavaScript файл, браузер посетителя должен получить самую новую копию для отображения изменений. Но в большинстве случаев данные файлы будут кэшированные, что может привести к функциональным проблем, в зависимости от изменений. Чтобы заставить перечитывать CSS и JavaScript файлы они должны быть переименованы каждый раз после редактирования. Достичь этого можно с помощью PHP добавляя метку времени файла в имя файла.

Для реализации данной задачи мы выберем очень хорошее решение. Нам необходимо воспользоваться .htaccess.

Допустим, у вас есть таблица стилей style/main.css и JS файл js/common.js. Вы можете создать соответствующие метки на странице с помощью функции Filemtime:

<link rel="stylesheet" type="text/css" href="/style/main.<?php echo filemtime( $_SERVER['DOCUMENT_ROOT'].'/style/main.css' ); ?>.css" />
<script type="text/javascript" src="/js/common.<?php echo filemtime( $_SERVER['DOCUMENT_ROOT'].'/js/common.js' ); ?>.js"></script>

Это приведет к изменению имен файлов в HTML-коде:

/style/main.1484116837.css
/js/common.1484116212.js

Теперь нам нужно написать некоторые правила в файле .htaccess, а именно переписать временную отметку версии имен файлов на фактические имена файлов:

RewriteEngine On
RewriteRule ^style/main.[0-9]+.css style/main.css [L]
RewriteRule ^js/common.[0-9]+.js js/common.js [L]

Теперь запрос style/main.[Числа].css будет на самом деле приводиться к style/main.css.

В приведенном выше примере необходимо присваивать правило для каждого файла таблицы стилей и Javascript, но можно использовать регулярные выражения, чтобы любой CSS или Javascript файл в нем был переписан:

RewriteEngine On
RewriteRule ^style/([-a-zA-Z0-9_]*).[0-9]+.css style/$1.css [L]
RewriteRule ^js/([-a-zA-Z0-9_]*).[0-9]+.js js/$1.js [L]

И, наконец, это все можно объединить в единое правило:

RewriteEngine On
RewriteRule ^(style|js)/([-a-zA-Z0-9_]*)\.[0-9]+\.(css|js)$ $1/$2.$3 [L]

Благодаря данной реализации можно оптимизировать код CSS и JavaScript файлов и пользователи сразу будут работать с обновленными версиями кода.