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

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.