Как комфортно кэшировать CSS/JS-файлы при разработке на WP?

Нередко встречается ситуация, когда при разработке сайта на WordPress статичные ресурсы кэшируются и при постоянных изменениях, скажем, CSS-файлов клиент не всегда видит актуальную версию. Конечно, можно всякий раз просить почистить кэш, нажать Ctrl+F5, но это неудобно, особенно на мобильных. Мы при разработке, а иногда и на боевых версиях сайтов, используем GET-параметр, который сообщает браузеру время последнего изменения данного файла. Таким образом, браузер запрашивает обновлённый файл только тогда, когда это действительно необходимо.

Данное решение очень простое, не требует никаких манипуляций с серверными настройками и т.п., поэтому подойдёт всем. Разместите этот код в functions.php вашей темы:

Мы используем очень удобную функцию filemtime (PHP 4+), которая возвращает время последнего  изменения содержания файла. Мы передаём ей путь к статичному ресурсу, удалив из него URL сайта. Полученную временную метку Unix подставляем GET-параметром к URI нашего CSS/JS-файла, используя вордпрессную функцию add_query_arg().

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

Минусы такого подхода — негативная реакция анализаторов сайта, типа Gtmetrix или Lighthouse. Однако можно хитро настроить переадресацию, где CSS/JS-файлы будут вызываться не с GET-параметром, а через имитацию директории. Если интересно — пишите комментарии, расскажу как это сделать.



Игорь Балькин
Автор: Игорь Балькин. Веб-разработчик с 2001 года. Разработчик сайтов на WordPress, CRM и веб-приложений. Минск, Беларусь. Контактная информация.

Прокомментировать

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать HTML-тэги и атрибуты:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>