Скорость загрузки сайта — это не просто технический показатель. Это нервы пользователей, позиции в поиске и деньги. Если ваш проект на Yii грузится медленно, виноваты могут быть не только большие картинки, но и неправильная работа с CSS и JS. AssetBundle — это инструмент, который помогает навести порядок в ресурсах и ускорить загрузку. Давайте разберёмся, как это работает.

Digital-студия WNDER

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

Представьте, что вы переезжаете. У вас есть коробки с вещами: посуда, книги, одежда. Если вы просто свалите всё в одну кучу, то при распаковке потратите кучу времени на поиск нужной вещи. AssetBundle — это те самые аккуратные коробки с подписями. Каждый бандл — это набор CSS или JS файлов, которые логически связаны. Например, бандл для Bootstrap, бандл для jQuery, бандл для ваших кастомных скриптов.

В Yii2 AssetBundle — это класс, который наследуется от yii\web\AssetBundle. Он говорит фреймворку: «Вот эти файлы нужно подключить на страницу». Yii сам решает, в каком порядке их выводить, как избежать дублирования и как опубликовать ресурсы, если они лежат не в web-доступной папке.

Как создать свой AssetBundle: пошаговая инструкция

Допустим, у вас есть папка assets в корне проекта, а в ней — css/style.css и js/script.js. Чтобы подключить их через бандл, создайте файл MyAsset.php в папке assets:

Теперь в представлении (view) можно зарегистрировать этот бандл:

use app\assets\MyAsset;

MyAsset::register($this);

Yii автоматически подключит все зависимости и выведет теги <link> и <script> в нужном месте. Если вы используете шаблон layout, то бандл можно зарегистрировать прямо в нём.

Оптимизация: сжатие, объединение и кэширование

Просто подключить ресурсы — мало. Нужно сделать так, чтобы браузер загружал их максимально быстро. Вот несколько приёмов.

1. Включите сжатие и объединение. В конфигурации приложения (обычно config/web.php) добавьте компонент assetManager:

'components' => [
    'assetManager' => [
        'bundles' => [
            'yii\web\JqueryAsset' => [
                'js' => ['jquery.min.js'], // используем минифицированную версию
            ],
        ],
        'linkAssets' => false, // отключаем символические ссылки, если не нужны
        'appendTimestamp' => true, // добавляем timestamp к URL для сброса кэша
    ],
],

Для объединения и сжатия файлов можно использовать сторонние инструменты, например, yii2-asset-converter или настройки AssetManager с forceCopy. Но самый простой способ — использовать assetManager с параметром bundles, чтобы переопределить стандартные бандлы на минифицированные версии.

2. Используйте CDN. Если ваш сайт посещают из разных уголков мира, отдавайте статику через CDN. В Yii это делается путём указания baseUrl в бандле:

public $baseUrl = 'https://cdn.example.com/assets';

Тогда все файлы будут загружаться с удалённого сервера, разгружая ваш основной.

3. Кэширование. Yii кэширует список опубликованных ресурсов. Убедитесь, что у папки assets есть права на запись. Если кэш сбрасывается слишком часто, проверьте настройки assetManager.

Правила и лайфхаки для работы с AssetBundle

Правило: Никогда не подключайте CSS и JS напрямую в представлении через <link> и <script>. Всегда используйте AssetBundle. Это избавит от дублирования и упростит управление зависимостями.

Вот ещё несколько советов, которые сэкономят вам часы отладки:

  • Группируйте ресурсы по смыслу. Не пихайте всё в один бандл. Разделите на: базовые (jQuery, Bootstrap), компоненты (datepicker, select2) и кастомные.
  • Используйте depends для порядка загрузки. Если ваш скрипт зависит от jQuery, укажите это в depends, и Yii сам выстроит очередь.
  • Отключайте ненужные бандлы. В конфигурации можно переопределить бандл и установить css и js в пустые массивы, чтобы не грузить лишнее.
  • Проверяйте basePath и baseUrl. Если ресурсы не публикуются, скорее всего, вы указали неверный путь.

Для наглядности сравним основные свойства AssetBundle:

Свойство Описание Пример
$basePath Физический путь к папке с ресурсами @webroot/assets
$baseUrl URL-префикс для ресурсов @web/assets
$css Массив CSS-файлов ['css/style.css']
$js Массив JS-файлов ['js/script.js']
$depends Массив зависимых бандлов ['yii\web\JqueryAsset']

Продвинутые техники: динамические бандлы и условная загрузка

Иногда нужно подключать ресурсы только на определённых страницах. Например, скрипт для карты — только на странице контактов. В Yii это делается легко: просто зарегистрируйте бандл в нужном представлении, а не в layout.

Если вы хотите загружать JS асинхронно, можно использовать параметры тега script. В Yii2 для этого есть настройка jsOptions:

public $jsOptions = ['async' => true];

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

Ещё один приём — конкатенация файлов на лету. Некоторые расширения, например yii2-asset-minifier, умеют объединять все CSS в один файл и все JS в один. Это уменьшает количество запросов. Но не переусердствуйте: один огромный файл может загружаться дольше, чем несколько маленьких, если использовать HTTP/2.

Лайфхак: Используйте Yii::$app->assetManager->bundles для глобального переопределения бандлов. Например, можно заменить jQuery на его облегчённую версию или вовсе отключить, если он не нужен.

Что в итоге: краткое резюме

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

  • Создавайте отдельные бандлы для разных групп ресурсов.
  • Используйте depends для управления порядком загрузки.
  • Настройте assetManager для сжатия, объединения и кэширования.
  • Подключайте бандлы только там, где они нужны.

Следуя этим простым правилам, вы заметно ускорите свой сайт на Yii. А если нужна помощь — обращайтесь в Digital-студию WNDER, мы всегда рады помочь с оптимизацией.

Студия WNDER