Как уменьшть файлы CSS/JS (используя UglifyJS и UglifyCSS)

Как уменьшть файлы CSS/JS (используя UglifyJS и UglifyCSS)

Caution

Starting from Symfony 2.8, Assetic is no longer included by default in the Symfony Standard Edition. Refer to this article to learn how to install and enable Assetic in your Symfony application.

UglifyJS - это JavaScript инструмент анализа/компрессии/улучшения. Он может быть использован для комбинирвования и уменьшения ресурсов JavaScript, чтобы они требовали меньше HTTP-запросов и заставляли ваш сайт загружаться быстрее. UglifyCSS - это CSS инструмент компрессии/улучшения? который очень схож с UglifyJS.

В этой статье в деталях показаны установка, конфигурация и использование UglifyJS. UglifyCSS работает практически так же, поэтому он обсуждается очень кратко.

Установите UglifyJS

UglifyJS доступен, как модуль Node.js. Для начала, вам нужно `установить Node.js`_, а потом выбрать метод установки: глобальный или локальный.

Глобальная установка

Метод глобальной установки заставляет все ваши проекты использовать одну и ту же версию UglifyJS, что упрощает его содержание. Откройте вашу командную консоль и выполните следующую команду (вам может понадобиться запустить её от имени корневого пользователя):

1
$ npm install -g uglify-js

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

1
$ uglifyjs --help

Локальная установка

Также возможно установить UglifyJS только внутри вашего проекта, что полезно, когда ваш проект требует конкретной версии UglifyJS. Чтобы сделать это, установите его без опции -g и укажите путь, по которому нужно разместить модуль:

1
2
$ cd /path/to/your/symfony/project
$ npm install uglify-js --prefix app/Resources

Рекомендуется, чтобы вы установили UglifyJS в вашей папке app/Resources и добавили папку node_modules в контроль версий. Как вариант, вы можете создать файл npm package.json и указать ваши зависимости в нём.

Теперь вы можете выполнить команду uglifyjs, которая живёт в каталоге node_modules:

1
$ "./app/Resources/node_modules/.bin/uglifyjs" --help

Сконфигурируйте фильтр uglifyjs2

Теперь нам нужно сконфигурировать Symfony, чтобы она использовала фильтр uglifyjs2 при обработке ваших JavaScript:

  • YAML
    1
    2
    3
    4
    5
    6
    # app/config/config.yml
    assetic:
        filters:
            uglifyjs2:
                # the path to the uglifyjs executable
                bin: /usr/local/bin/uglifyjs
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    <!-- app/config/config.xml -->
    <?xml version="1.0" encoding="UTF-8"?>
    <container xmlns="http://symfony.com/schema/dic/services"
        xmlns:assetic="http://symfony.com/schema/dic/assetic"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://symfony.com/schema/dic/services
            http://symfony.com/schema/dic/services/services-1.0.xsd
            http://symfony.com/schema/dic/assetic
            http://symfony.com/schema/dic/assetic/assetic-1.0.xsd">
    
        <assetic:config>
            <!-- bin: the path to the uglifyjs executable -->
            <assetic:filter
                name="uglifyjs2"
                bin="/usr/local/bin/uglifyjs" />
        </assetic:config>
    </container>
    
  • PHP
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        'filters' => array(
            'uglifyjs2' => array(
                // the path to the uglifyjs executable
                'bin' => '/usr/local/bin/uglifyjs',
            ),
        ),
    ));
    

Note

Путь, где установлен UglifyJS, может отличаться в зависимости от вашей системы. Чтобы узнать, где npm хранит папку bin, выполните следующую команду:

1
$ npm bin -g

Это должно вывести папку в вашей системе, внутри которой вы должны найти выполняемый UglifyJS.

Если вы установили UglifyJS локально, то вы можете найти папку bin внутри папки node_modules. В этом случае она называется .bin.

Теперь у вас есть доступ к фильтру uglifyjs2 в вашем приложении.

Сконфигурируйте бинарный node

Assetic пытается найти бинарный узел автоматически. Если он не может быть найден, то вы можете сконфигурировать его локацию, используя ключ node:

  • YAML
    1
    2
    3
    4
    5
    6
    7
    8
    # app/config/config.yml
    assetic:
        # путь к исполняемому узлу
        node: /usr/bin/nodejs
        filters:
            uglifyjs2:
                # the path to the uglifyjs executable
                bin: /usr/local/bin/uglifyjs
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    <!-- app/config/config.xml -->
    <?xml version="1.0" encoding="UTF-8"?>
    <container xmlns="http://symfony.com/schema/dic/services"
        xmlns:assetic="http://symfony.com/schema/dic/assetic"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://symfony.com/schema/dic/services
            http://symfony.com/schema/dic/services/services-1.0.xsd
            http://symfony.com/schema/dic/assetic
            http://symfony.com/schema/dic/assetic/assetic-1.0.xsd">
    
        <assetic:config
            node="/usr/bin/nodejs" >
            <assetic:filter
                name="uglifyjs2"
                bin="/usr/local/bin/uglifyjs" />
        </assetic:config>
    </container>
    
  • PHP
    1
    2
    3
    4
    5
    6
    7
    8
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        'node'      => '/usr/bin/nodejs',
        'uglifyjs2' => array(
            // the path to the uglifyjs executable
            'bin' => '/usr/local/bin/uglifyjs',
        ),
    ));
    

Уменьшите ваши ресурсы

Для того, чтобы применить UglifyJS к вашим ресурсам, добавьте опцию filter в теги ресурсов ваших шаблонов, чтобы сказать Assetic использовать фильтр uglifyjs2:

  • Twig
    1
    2
    3
    {% javascripts '@AppBundle/Resources/public/js/*' filter='uglifyjs2' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
  • PHP
    1
    2
    3
    4
    5
    6
    <?php foreach ($view['assetic']->javascripts(
        array('@AppBundle/Resources/public/js/*'),
        array('uglifyj2s')
    ) as $url): ?>
        <script src="<?php echo $view->escape($url) ?>"></script>
    <?php endforeach ?>
    

Note

Вышеописанные пример предполагает, что у вас есть пакет под названием AppBundle и что ваши файлы JavaScript находятся в каталоге Resources/public/js под вашим пакетом. Однако вы можете включить ваши файлы JavaScript независимо от того, где они находятся.

С добавлением фильтра uglifyjs2 к тегам ресусров выше, вы теперь должны увидеть, как уменьшенные JavaScript намного быстрее бегут по проводам.

Отключите уменьшение в режиме отладки

Уменьшенные JavaScript очень тяжело читать, не говоря уже об отладке. Поэтому Assetic позволяет вам отключать определённый фильтр, когда ваше приложение находится в режиме отладки (например, app_dev.php). Вы можете сделать это, добавив в вашем шаблоне к имени фильтра префикс в виде знака вопроса: ?. Это сообщате Assetic применять этот фильтр только тогд, когда режим отладки отключен (например, app.php):

  • Twig
    1
    2
    3
    {% javascripts '@AppBundle/Resources/public/js/*' filter='?uglifyjs2' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
  • PHP
    1
    2
    3
    4
    5
    6
    <?php foreach ($view['assetic']->javascripts(
        array('@AppBundle/Resources/public/js/*'),
        array('?uglifyjs2')
    ) as $url): ?>
        <script src="<?php echo $view->escape($url) ?>"></script>
    <?php endforeach ?>
    

Чтобы попробовать это, переключитесь на ваше окружение prod (app.php). Но перед тем, как делать это, не забудьте очистить ваш кеш и сбросить ваши ресурсы assetic.

Tip

Вместо того, чтобы добавлять фильтры в теги ресурсов, вы можете также сконфигурировать, какие фильтры применять к каждому из файлов в вашем файле конфигурации приложения. См. Фильтрация, основанная на расширении файла, чтобы узнать больше.

Установите, сконфигурируйте и используйте UglifyCSS

Использование UglifyCSS работает так же, как и UglifyJS. Для начала убедитесь, что установлен узловой пакет:

1
2
3
4
5
6
# глобальная установка
$ npm install -g uglifycss

# локальная установка
$ cd /path/to/your/symfony/project
$ npm install uglifycss --prefix app/Resources

Далее, добавьте конфигурацию для этого фильтра:

  • YAML
    1
    2
    3
    4
    5
    # app/config/config.yml
    assetic:
        filters:
            uglifycss:
                bin: /usr/local/bin/uglifycss
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    <!-- app/config/config.xml -->
    <?xml version="1.0" encoding="UTF-8"?>
    <container xmlns="http://symfony.com/schema/dic/services"
        xmlns:assetic="http://symfony.com/schema/dic/assetic"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://symfony.com/schema/dic/services
            http://symfony.com/schema/dic/services/services-1.0.xsd
            http://symfony.com/schema/dic/assetic
            http://symfony.com/schema/dic/assetic/assetic-1.0.xsd">
    
        <assetic:config>
            <assetic:filter
                name="uglifycss"
                bin="/usr/local/bin/uglifycss" />
        </assetic:config>
    </container>
    
  • PHP
    1
    2
    3
    4
    5
    6
    7
    8
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        'filters' => array(
            'uglifycss' => array(
                'bin' => '/usr/local/bin/uglifycss',
            ),
        ),
    ));
    

Чтобы использовать фильтр в ваших CSS файлах, добавьте фильтр в помощник Assetic stylesheets:

  • Twig
    1
    2
    3
    {% stylesheets 'bundles/App/css/*' filter='uglifycss' filter='cssrewrite' %}
         <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    
  • PHP
    1
    2
    3
    4
    5
    6
    7
    <?php foreach ($view['assetic']->stylesheets(
        array('bundles/App/css/*'),
        array('uglifycss'),
        array('cssrewrite')
    ) as $url): ?>
        <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
    <?php endforeach ?>
    

Так же, как и с фильтром uglifyjs2, если вы добавите к имени фильтра префикс ? (т.е. ?uglifycss), уменьшение будет происходить только тогда, когда вы находитесь не в режиме отладки.

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.