Если ваш сайт на Yii грузится медленно, а клиенты жалуются на тормоза — скорее всего, дело в ресурсах. CSS, JS, картинки — всё это может превратиться в неповоротливый поезд, который тащится по рельсам интернета. Но есть инструмент, который превратит этот поезд в скоростной экспресс. Знакомьтесь: AssetBundle.

Digital-студия WNDER

Сегодня разберём, как AssetBundle помогает оптимизировать загрузку ресурсов в Yii, и дадим практические советы, которые можно применить сразу после прочтения.

Что такое AssetBundle и зачем он нужен

AssetBundle — это механизм в Yii, который управляет пакетами ресурсов: CSS, JS, изображениями и другими файлами. Представьте, что вы собираетесь в поход. Можно взять всё необходимое в одном рюкзаке, а можно разложить по десяти маленьким сумкам. AssetBundle — это как раз про то, чтобы упаковать всё логично и не таскать лишнего.

Без AssetBundle вы бы подключали каждый CSS и JS вручную в каждом представлении. С ним вы описываете пакет один раз и просто регистрируете его там, где нужно. Yii сам позаботится о порядке подключения, зависимостях и даже о публикации файлов, если они лежат не в web-доступе.

Основные задачи AssetBundle:

  • Группировка ресурсов по смыслу (например, «bootstrap», «jquery»).
  • Управление зависимостями (если один пакет требует другой, Yii подключит их в правильном порядке).
  • Публикация ресурсов из vendor-папок в web-доступ.
  • Возможность включать/отключать пакеты в зависимости от окружения.

Как создать свой AssetBundle

Создать пакет проще, чем кажется. Допустим, у вас есть свои стили и скрипты в папке assets. Создаём класс:

Здесь basePath и baseUrl указывают, где лежат файлы. css и js — массивы подключаемых файлов. depends — список зависимостей (других пакетов), которые должны быть загружены до этого.

Теперь в представлении достаточно написать:

И Yii подключит все файлы в нужном порядке.

Правило: Всегда указывайте зависимости в depends. Это избавит от ошибок «jQuery не найден» и гарантирует правильный порядок загрузки.

Оптимизация: объединение и сжатие

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

В Yii есть встроенный инструмент — AssetManager. Его можно настроить так, чтобы он автоматически объединял и сжимал CSS и JS. Для этого в конфиге приложения добавьте:

'components' => [
    'assetManager' => [
        'bundles' => [
            'yii\web\JqueryAsset' => [
                'js' => ['jquery.min.js'],
            ],
        ],
        'linkAssets' => true, // создаёт символические ссылки вместо копирования
    ],
],

Но это только начало. Для реального сжатия и объединения лучше использовать сторонние инструменты, например, yii2-asset-minifier или настройки веб-сервера. Однако Yii предоставляет и свой механизм — AssetManager::$converter.

Вот пример настройки конвертера, который сжимает CSS и JS через yii\web\AssetConverter:

'assetManager' => [
    'converter' => [
        'class' => 'yii\web\AssetConverter',
        'commands' => [
            'less' => ['css', 'lessc {from} {to} --no-color'],
            'scss' => ['css', 'sass {from} {to} --style compressed'],
            'js' => ['js', 'uglifyjs {from} -o {to}'],
        ],
    ],
],

Здесь мы говорим Yii: если видишь .less — скомпилируй в CSS, если .scss — сожми, если .js — прогнать через uglify. Это требует установленных утилит (lessc, sass, uglifyjs) на сервере.

Но есть и более простой путь — использовать расширения. Например, yii2-minify или yii2-asset-compress. Они делают всё автоматически.

Вот таблица сравнения методов оптимизации:

Метод Плюсы Минусы
Объединение в один файл Меньше запросов, быстрее загрузка Большой файл, сложнее кешировать по частям
Сжатие (minify) Уменьшение размера Требует инструментов, может ломать код
Кеширование Повторные загрузки быстрее Нужно управлять версиями
CDN Разгружает сервер, быстрее для пользователей Зависимость от внешнего сервиса
Лайфхак: Используйте linkAssets = true в development-окружении. Это создаёт символические ссылки на исходные файлы, и вам не нужно перепубликовывать ресурсы после каждого изменения.

Кеширование и версионирование

Браузеры любят кешировать. Если файл не менялся, зачем его снова качать? Но если вы обновили CSS, браузер может продолжать использовать старую версию. Чтобы этого избежать, нужно управлять версиями.

В Yii есть параметр $appendTimestamp в AssetManager. Если установить его в true, к URL файла добавится метка времени последнего изменения:

'assetManager' => [
    'appendTimestamp' => true,
],

Тогда ссылка будет вида /css/site.css?v=1620000000. При изменении файла метка обновится, и браузер загрузит новую версию.

Ещё один способ — использовать хеш содержимого. Но это уже требует кастомных решений. Например, можно переопределить метод AssetBundle::registerAssetFiles() и добавлять хеш.

Для JS и CSS, которые подключаются через CDN, версионирование обычно уже встроено (например, jquery-3.6.0.min.js).

Не забывайте про HTTP-кеширование на стороне сервера. Настройте Cache-Control и ETag для статических файлов. В Nginx это делается так:

location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

Это скажет браузеру: «Этот файл можно не проверять целый год». Но не забудьте про версионирование, иначе обновления не дойдут до пользователей.

Практические советы и выводы

Собрали несколько рекомендаций, которые помогут выжать максимум из AssetBundle:

  • Группируйте ресурсы логически. Не пихайте всё в один пакет. Разделите на «base», «admin», «frontend» и т.д.
  • Используйте зависимости. Если ваш пакет требует jQuery, укажите это в depends.
  • Включайте сжатие и объединение в production. В development лучше не сжимать, чтобы легче отлаживать.
  • Настройте кеширование. appendTimestamp и HTTP-кеш — ваши друзья.
  • Подключайте CDN для популярных библиотек. Это ускорит загрузку, если у пользователя уже есть закешированная версия с другого сайта.
  • Следите за размером. Не тащите в пакет всё подряд. Используйте инструменты анализа, например, webpack-bundle-analyzer.

Вот пример настройки AssetManager для production:

'assetManager' => [
    'appendTimestamp' => true,
    'linkAssets' => false,
    'bundles' => [
        'yii\web\JqueryAsset' => [
            'sourcePath' => null,
            'js' => [],
            'css' => [],
        ],
        'yii\bootstrap\BootstrapAsset' => [
            'sourcePath' => null,
            'css' => [],
        ],
    ],
],

Здесь мы отключаем стандартные jQuery и Bootstrap, чтобы подключить их через CDN или свои оптимизированные версии.

В итоге, AssetBundle — это мощный инструмент, который при правильной настройке значительно ускоряет загрузку ресурсов. Главное — не лениться и следовать простым правилам: группировать, сжимать, кешировать и версионировать.

Начните с малого: создайте свой пакет, включите appendTimestamp, попробуйте объединить CSS и JS. Уже это даст заметный прирост. А дальше — экспериментируйте, измеряйте, оптимизируйте.

Совет: Используйте инструменты аудита, например, Google PageSpeed Insights или Lighthouse, чтобы увидеть, где узкие места. Они подскажут, какие ресурсы тормозят загрузку.

Удачи в оптимизации! Пусть ваш сайт летает.

Студия WNDER