Зачем нужна минимизация js и css файлов?

Прежде всего минимизированные css и js будут иметь меньше размер чем исходники, таким образом уменьшиться время загрузки страницы. Когда проект небольшой, то улучшение после минимизации Вы не заметите. Но если Вы работаете с большим проектом, то минимизация даст значительное уменьшение времени загрузки страницы.

Что же из себя представляет минимизация?

Из кода удаляются комментарии, код пишется в одну строку (удаляются переносы строк и лишние пробелы).

Существует множество онлайн и офлайн сервисов которые могут из Вашего js или css файла сделать минимизированный файл. Однако в данной статье рассмотрим расширение для Yii, которое будет минимизировать и соединять в один файл js скрипты (только JavaScript) и css в другой (только CSS). Это расширение создаст минимизированный файл для js и css (один файл для js, один файл для css) при первой загрузке страницы и разместит его в папке assets. После чего будет использовать эти файлы до тех пор пока Вы не внесете изменение в любой из подключаемых js или css (или не очистите папку assets). После внесения изменений процедура повторяется (проверка изменений осуществляется по времени модификации файла). Таким образом Вам не нужно после каждого изменения в исходниках делать минимизацию вручную, js и css остаются в читабельном виде, а на сайте уже работают их минимизированные копии.


И так приступим к внедрению расширения минимизации наших js и css файлов.

Расширение Вы можете скачать официального сайта Yii, раздел расширения:
http://www.yiiframework.com/extension/eclientscript/

С GitHub репозитория разработчика:
https://github.com/muayyad-alsadi/yii-EClientScript

Или по прямой ссылки с сайта кодер.укр:

Скачать


Распаковываем архив и копируем папку yii-EClientScript в папку /protected/vendors

Теперь нам необходимо подключить расширение к проекту, открываем файл конфигураций /protected/config/main.php и в components добавляем подключение и настройку расширения:

<?php

return array(
    //...
    'components' => array(
        //...
        'clientScript' => array(
            'class' => 'application.vendors.yii-EClientScript.EClientScript',
            //все параметры принимают значение true или false
            'combineScriptFiles' => !YII_DEBUG, //объединение js в один файл
            'combineCssFiles' => !YII_DEBUG, //объединение css в один файл
            'optimizeScriptFiles' => !YII_DEBUG, //оптимизация js
            'optimizeCssFiles' => !YII_DEBUG, //оптимизация css
            'optimizeInlineScript' => !YII_DEBUG, //оптимизация js в одну строку
            'optimizeInlineCss' => !YII_DEBUG, //оптимизация css в одну строку
        ),
        //...
    ),
    //...
);

Файлы js и css необходимо подключать следующим образом (неважно где Вы будете подключать js и css во вью или контроллере):

<?php

//...

$cs = Yii::app()->clientScript;
$cs->registerCssFile(Yii::app()->theme->baseUrl . '/css/style.css');
$cs->registerScriptFile(Yii::app()->theme->baseUrl . '/js/script.js');
$cs->coreScriptPosition = CClientScript::POS_END;

//...

Открываем сайт и смотрим исходный код страницы. До внедрения расширения минимизации js и css, подключение css имело вид:

Вид подключения css до внедрения расширения

До внедрения расширения минимизации js и css, подключение js имело вид:

Вид подключения js до внедрения расширения

После внедрения расширения минимизации js и css, подключение css имеет вид:

Вид подключения css после внедрения расширения

После внедрения расширения минимизации js и css, подключение js имеет вид:

Вид подключения js после внедрения расширения

Если Вы откроете оптимизированный js или css файл, то увидите что он стал в одну строку (без форматирования кода). Так же Вы можете настроить расширение под свои нужды, например не объединять css или js и т.д.. При изменение настроек не забудьте очистить папку asstes.

Так же при необходимости Вы можете отключить любые действия расширения в нужном контроллере или модуле. Пример отключения в модуле:

<?php

class ModuleNameModule extends CWebModule {

    public function init() {
        //...
        Yii::app()->setComponents(
            //...

            'clientScript' => array(
                'class' => 'application.vendors.yii-EClientScript.EClientScript',
                'combineScriptFiles' => false,
                'combineCssFiles' => false,
                'optimizeScriptFiles' => false,
                'optimizeCssFiles' => false,
                'optimizeInlineScript' => false,
                'optimizeInlineCss' => false,
                ),

            //...
            ),
            //...
        );
        //...
    }
}