Скорость загрузки сайта напрямую влияет на конверсию и позиции в поиске. В Yii2 за подключение стилей и скриптов отвечает механизм AssetBundle. Если настроить его неправильно, страница будет грузиться медленно, а браузер — тратить время на лишние запросы. В этой статье разберём, как выжать максимум из AssetBundle без костылей и лишних расширений.

Digital-студия WNDER

Что такое AssetBundle и зачем его трогать

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

Главная задача оптимизации — убрать неиспользуемые зависимости и объединить файлы. Тогда браузер сделает меньше запросов, а сервер отдаст меньше данных.

Как работает AssetBundle под капотом

Каждый бандл описывается PHP-классом, который наследует yii\web\AssetBundle. В нём вы указываете:

  • $sourcePath — где лежат исходники (например, @app/assets).
  • $css и $js — списки файлов относительно sourcePath.
  • $depends — от каких бандлов зависит ваш (например, от jQuery).
  • $jsOptions и $cssOptions — дополнительные атрибуты для тегов (например, async или defer).

Когда Yii2 рендерит страницу, он собирает все зарегистрированные бандлы, сортирует их по зависимостям и выводит теги <link> и <script> в нужном порядке.

Правило: Всегда указывайте $depends для своего бандла, если он использует jQuery или другие библиотеки. Иначе Yii2 может подключить ваш скрипт раньше jQuery — и вы получите ошибку «$ is not defined».

Приёмы оптимизации: от простого к сложному

Начнём с базовых вещей, которые дают быстрый эффект.

1. Отключение неиспользуемых зависимостей

Посмотрите на стандартные бандлы Yii2 (например, yii\web\JqueryAsset, yii\bootstrap\BootstrapAsset). Если вы не используете какой-то компонент, просто не подключайте его. Например, вместо полного Bootstrap можно взять только сетку.

2. Объединение файлов в один бандл

Вместо десяти мелких CSS-файлов сделайте один общий. Это уменьшит количество HTTP-запросов. В Yii2 можно создать свой бандл и перечислить в нём все нужные файлы.

<?php
namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/main.css',
        'css/forms.css',
        'css/widgets.css',
    ];
    public $js = [
        'js/app.js',
        'js/helpers.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

3. Использование CDN для популярных библиотек

Если вы подключаете jQuery или Bootstrap, можно заменить локальные файлы на CDN. Это снизит нагрузку на ваш сервер и ускорит загрузку для пользователей из других регионов. В Yii2 для этого достаточно переопределить $baseUrl или $sourcePath в бандле.

<?php
// В конфиге приложения
'components' => [
    'assetManager' => [
        'bundles' => [
            'yii\web\JqueryAsset' => [
                'sourcePath' => null, // отключаем локальный источник
                'js' => [
                    'https://code.jquery.com/jquery-3.6.0.min.js',
                ],
            ],
        ],
    ],
],

4. Асинхронная загрузка скриптов

Атрибуты async и defer позволяют браузеру не блокировать отрисовку страницы. В Yii2 их можно задать через $jsOptions.

<?php
class AppAsset extends AssetBundle
{
    public $jsOptions = [
        'defer' => true,
    ];
}

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

Лайфхак: Для критического CSS используйте инлайн-вставку через $cssOptions = ['inline' => true] — но только для небольших стилей, которые нужны для первого экрана.

Сравнение подходов к подключению ресурсов

Чтобы выбрать оптимальный вариант, посмотрите на таблицу ниже.

Подход Плюсы Минусы
Отдельные файлы (по умолчанию) Простота, кэширование каждого файла Много запросов, медленная загрузка
Объединение в один бандл Мало запросов, быстрее Большой размер, сложнее кэшировать частично
CDN Быстро для пользователей, экономия трафика Зависимость от третьей стороны, возможные сбои
Асинхронная загрузка (async/defer) Не блокирует рендеринг Может нарушить порядок выполнения

Продвинутые техники: сжатие и кэширование

AssetBundle сам по себе не сжимает файлы. Но вы можете включить сжатие на уровне сервера (gzip) или использовать инструменты вроде yii\web\AssetManager с настройкой $forceCopy и $appendTimestamp. Последнее добавляет к URL метку времени, чтобы браузер не кэшировал старые версии.

Для серьёзных проектов подключайте сборщики (Webpack, Gulp) и генерируйте один минифицированный файл. Yii2 отлично дружит с такими пайплайнами: просто укажите в бандле путь к собранному файлу.

<?php
// В конфиге
'assetManager' => [
    'appendTimestamp' => true,
    'linkAssets' => true, // создаёт символические ссылки вместо копирования
],

linkAssets полезен на Linux-серверах: он создаёт симлинки на исходные файлы, экономя место и ускоряя публикацию.

Совет: Не включайте linkAssets на Windows — там символические ссылки работают иначе и могут вызвать проблемы.

Что в итоге

Оптимизация AssetBundle в Yii2 — это не магия, а последовательная работа: убираем лишние зависимости, объединяем файлы, используем CDN и асинхронную загрузку. Начните с малого — проверьте, какие бандлы подключены на вашей странице, и отключите ненужные. Затем добавьте appendTimestamp и настройте сжатие. Эти шаги дадут заметный прирост скорости без переписывания всего проекта.

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

Студия WNDER