Кэширование статических ресурсов yii2.
  • 1230

Кэширование css, javascript ресурсов assets в yii2.

Автор: admin | 09 августа (Чт.) 2018г. в 23ч.44м.

Есть много разных методов ускорения загрузки страниц сайта. В данной статье рассмотрим один из таких методов, а именно кэширование статических ресурсов css и javascript в yii2 в браузере. Для этого используем версирование файлов стилей и скриптов.
Так путь к файлу скрипта будет иметь такой вид:
http://mysite.com/js/modernizr.js?v=1533672190​

В параметре v=1533672190 содержится временная метка последнего изменения файла. И как только браузер загрузит страницу, вместе со стилями и скриптами, далее уже эти css и js, которые имеют версию, будут сохранены в кэше браузера и всякий раз при загрузке сайта будут браться с кэша, что сократит количество запросов к серверу и время на загрузку ресурсов. 

Для того, чтобы включить кэш статических файлов ресурсов css и js в yii2 нужно сделать следующее. В файле конфигурации приложения main.php или config.php  в yii2 находим массив 'components' и конфиг 'assetManager', если нет, то добавляем. Пишем следующее:

return [
    // ...
    'components' => [
        'assetManager' => [
            'appendTimestamp' => true,
        ],
    ],
];

Все. 

Теперь в качестве версии файла будет добавлена метка времени последней модификации файла. При изменении файла метка времени будет обновлена и браузер соответственно будет "работать" с новой версией файла.

Как проверить, что ресурс кэшируется?

Для того, чтобы убедиться что кэширование файлов css и js в браузере работает можно воспользоваться инструментом разработчика в google chrome. Перейдем на вкладку network и обновим страницу целевого сайта. Далее смотрим показатели скорости загрузки каждого скрипта:
Смотрим как кэшируются ресурсы.
Видно, что уже попало в кэш браузера.
Если кликнуть по пути кэшированного ресурса, то можно посмотреть заголовки из которых видно, что наш ресурс берется из кэша браузера.
Смотрим информацию на кэшированном ресурсе.
Обратите внимание на желтый треугольник. Это не предупреждение об ошибке. Данный знак означает, что ресурс был загружен из сохраненного браузером кэша, что нам и нужно.
Индикатор загрузки из кэша браузера.
Таким образом мы сохранили скрипты и стили в кэше браузера и при этом если эти ресурсы будут редактироваться, то изменится временная метка версии файла и кэш в браузере будет обновлен на более актуальный на данный момент.

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

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