Пару недель назад мне понадобилось обновить верстку на одном из своих старых сайтов. Он был создан в году 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 с конфигурацией для оптимизации ресурсов. Приведу пример для оптимизации ресурсов из этой статьи.
КОРЕНЬ_ПРОЕКТА/assets.phpYii::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', ], ];
Теперь сами наборы ресурсов.
КОРЕНЬ_ПРОЕКТА/assets/IndexAsset.php<?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 (как указано в команде) с конфигурацией. Её необходимо подключить, соответственно, к конфигурации проекта, например, вот так:
КОРЕНЬ_САЙТА/config/web.php<?php return [ // ... 'components' => [ 'assetManager' => [ 'bundles' => require '../config/minify.php', ], ], // ... ];
Теперь вы можете использовать подготовленные наборы ресурсов в представлениях конкретных страниц.
КОРЕНЬ_САЙТА/views/site/index.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-ов.
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.