Как уменьшить JavaScript и таблицы стилей с помощью YUI компрессора

Как уменьшить JavaScript и таблицы стилей с помощью YUI компрессора

Caution

YUI компрессор больше не управляется Yahoo. Поэтому мы настоятельно советуем вам избегать использования YUI утилит кроме случаев, когда это действительно необходимо. Прочтите How to Minify CSS/JS Files (Using UglifyJS and 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.

Yahoo! предоставляет отличную утилиту для уменьшения JavaScript и таблиц стилей, чтобы они быстрее передавались по проводам - YUI компрессор. Благодаря Assetic, вы можете воспользоваться преимществами этого инструмента очень легко.

Скачайте YUI компрессор JAR

YUI компрессор написан на Java и распространяется, как JAR. Скачайте JAR с вебсайта Yahoo! и сохраните его в app/Resources/java/yuicompressor.jar.

Конфигурация YUI фильтров

Теперь вам нужно сконфигурировать в вашем приложении два фильтра Assetic, один для уменьшения JavaScript с YUI компрессором, а один для уменьшения таблиц стилей:

  • YAML
    1
    2
    3
    4
    5
    6
    7
    8
    # app/config/config.yml
    assetic:
        # java: '/usr/bin/java'
        filters:
            yui_css:
                jar: '%kernel.project_dir%/app/Resources/java/yuicompressor.jar'
            yui_js:
                jar: '%kernel.project_dir%/app/Resources/java/yuicompressor.jar'
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!-- 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="yui_css"
                jar="%kernel.project_dir%/app/Resources/java/yuicompressor.jar" />
            <assetic:filter
                name="yui_js"
                jar="%kernel.project_dir%/app/Resources/java/yuicompressor.jar" />
        </assetic:config>
    </container>
    
  • PHP
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        // 'java' => '/usr/bin/java',
        'filters' => array(
            'yui_css' => array(
                'jar' => '%kernel.project_dir%/app/Resources/java/yuicompressor.jar',
            ),
            'yui_js' => array(
                'jar' => '%kernel.project_dir%/app/Resources/java/yuicompressor.jar',
            ),
        ),
    ));
    

Note

Пользователям Windows стоит помнить об обновлении конфигурации до правильной локации Java. В Windows7 x64 бит, по умолчанию, это C:\Program Files (x86)\Java\jre6\bin\java.exe.

Теперь у вас есть доступ к двум новым фильтрам Assetic в вашем приложении: yui_css и yui_js. Они будут использовать YUI компрессор, чтобы уменьшить таблицы стилей и JavaScript, соответственно.

Уменьшение ваших ресурсов

Теперь у вас есть сконфигурированный YUI компрессор, но ничего не произойдёт, пока вы не примените один из этих фильтров к ресурсу. Так как ваши ресурсы являются частью уровня просмотра, эта работа проводится в ваших шаблонах:

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

Note

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

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

  • Twig
    1
    2
    3
    {% stylesheets '@AppBundle/Resources/public/css/*' filter='yui_css' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
    {% endstylesheets %}
    
  • PHP
    1
    2
    3
    4
    5
    6
    <?php foreach ($view['assetic']->stylesheets(
        array('@AppBundle/Resources/public/css/*'),
        array('yui_css')
    ) as $url): ?>
        <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $view->escape($url) ?>" />
    <?php endforeach ?>
    

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

Уменьшенные JavaScript и таблицы стилей очень сложно читать, не говоря уже об отладке. Из-за этого, Assetic позволяет вам отключить конкретный фильтр, когда ваше приложение находится в режиме отладки. Вы можете сделать это, использовав в вашем шаблоне в имени фильтра префикс со знаком вопроса: ?. Это сообщает Assetic применять это к фильтру только, когда режим отладки отключен.

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

Tip

Вместо добавления фильтра к тегам ресурсов, вы можете также глобально включить его, добавив атрибут apply_to к конфигурации фильтра, напрмиер, в фильтре yui_js - apply_to: "\.js$". Чтобы применять фильтр только в производстве, добавьте это к файлу config_prod, а не к общему файлу конфигурации. Для того, чтобы узнать детали о применении фильтров по расширению файлов, см. Фильтрация, основанная на расширении файла.

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