Объединение и сжатие стилей (css) и скриптов (js) на Yii2

Пару недель назад мне понадобилось обновить верстку на одном из своих старых сайтов. Он был создан в году 16-м или 17-м, точно уже не помню. Новую верстку успешно адаптировал и встал вопрос оптимизации css и js, ранее они были в обычном виде — без объединения и минификации. Было решено воспользоваться примером из документации. Как это вышло без Vite, Gulp‘a, Laravel Mix‘a и подобных инструментов покажу ниже на простом примере.

Объединение и минификация ресурсов (css, js и изображений) позволяет разгрузить как сервер, так и клиент (браузер пользователя). Дело не хитрое, а пользы много.

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

• Главная страница
  • style1.css
  • style2.css
  • style3.css
  • js1.js
  • js2.js
  • js3.js
• Страница галерея
  • style1.css
  • style4.css
  • js4.js
• …

Иногда все имеющиеся css и js собирают в два файла, all-css.css и all-js.js. Так удобнее нам разработчикам, но эффективность намного ниже чем можно было бы достичь посредством грамотного разделения ресурсов. Желательно дробить ресурсы и подгружать только те их части, которые нужны на конкретной странице.

Для начала нужно было достать сжиматели и объединители ресурсов. Проще всего, на мой взгляд, сделать это через NodeJS.

npm install yuicompressor

YUI Compressor будет находиться по такому пути: "../node_modules/yuicompressor/build/yuicompressor-x.x.x.jar".

npm install google-closure-compiler

Closure Compiler будет находиться в "../node_modules/google-closure-compiler-java/compiler.jar".

Находим эти файлы и кидаем в корень проекта на Yii2.

Далее генерируем конфигурацию для сжатия с помощью консоли Yii2:

php yii asset/template assets.php

В корне проекта появится файл assets.php с конфигурацией для оптимизации ресурсов. Приведу пример для оптимизации ресурсов из этой статьи.

 
Yii::setAlias('@webroot', __DIR__ . '/web');
Yii::setAlias('@web', '/');
 
return [
    'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {to}',
    'cssCompressor' => 'java -jar yuicompressor.jar --type css {from} -o {to}',
    'deleteSource' => false,
    'bundles' => [
        'app\assets\IndexAsset',
        'app\assets\GalleryAsset',
    ],
    'targets' => [
        'index' => [
            'class' => 'yii\web\AssetBundle',
            'basePath' => '@webroot/assets',
            'baseUrl' => '@web/assets',
            'js' => 'index-{hash}.js',
            'css' => 'index-{hash}.css',
            'depends' => [
                'app\assets\IndexAsset',
            ],
        ],
        'gallery' => [
            'class' => 'yii\web\AssetBundle',
            'basePath' => '@webroot/assets',
            'baseUrl' => '@web/assets',
            'js' => 'gallery-{hash}.js',
            'css' => 'gallery-{hash}.css',
            'depends' => [
                'app\assets\GalleryAsset',
            ],
        ],
    ],
    'assetManager' => [
        'basePath' => '@webroot/assets',
        'baseUrl' => '@web/assets',
    ],
];

Теперь сами наборы ресурсов.

 
<?php
 
namespace app\assets;
 
use yii\web\AssetBundle;
 
class IndexAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/style1.css',
        'css/style2.css',
        'css/style3.css',
    ];
    public $js = [
        'js/js1.js',
        'js/js2.js',
        'js/js3.js',
    ];
}

 
<?php
 
namespace app\assets;
 
use yii\web\AssetBundle;
 
class GalleryAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/style1.css',
        'css/style4.css',
    ];
    public $js = [
        'js/js4.js',
    ];
}

Теперь у нас есть наборы ресурсов (IndexAsset и GalleryAsset) и инструменты (YUI Compressor и Closure Compiler) для их сжатия. Далее осуществляем само сжатие:

php yii asset/compress assets.php config/minify.php

Важный момент! В исполняемой среде (в Докере, Вагранте и так далее) должна работать Java. Проверить установлена ли она можно с помощью команды «java -version«.

Приведенная выше команда сделает две вещи, первое — подготовит файлы ресурсов и сложит их в публичную директорию web (по умолчанию у Yii2 она так называется) и второе — подготовит файл КОРЕНЬ_ПРОЕКТА/config/minify.php (как указано в команде) с конфигурацией. Её необходимо подключить, соответственно, к конфигурации проекта, например, вот так:

 
<?php
 
return [
    // ...
    'components' => [
        'assetManager' => [
            'bundles' => require '../config/minify.php',
        ],
    ],
    // ...
];

Теперь вы можете использовать подготовленные наборы ресурсов в представлениях конкретных страниц.

 
<?php
 
/** @var yii\web\View $this */
 
$bundle = $this->assetManager->getBundle('index');
$bundle->registerAssetFiles($this);
 
$this->title = 'Главная страница';
?>
 
Содержимое страницы...

 
<?php
 
/** @var yii\web\View $this */
 
$bundle = $this->assetManager->getBundle('gallery');
$bundle->registerAssetFiles($this);
 
$this->title = 'Страница галереи';
?>
 
Содержимое страницы...

Таким образом вы можете настроить гибкую систему подключения ресурсов. При желании YUI Compressor и Closure Compiler можно заменить на любой другой инструмент, хотя в данном случае большого смысла в этом нет.

Полезные ссылки

• yiiframework.com/doc/guide/2.0/ru/structure-assets — документация по «Ресурсам».
• qna.habr.com/q/122901 — Как собрать и минифицировать CSS и JS в Yii2?
• yiiframework.ru/forum/viewtopic.php?t=34233 — Ошибка при сжатии CSS-ов.