Comprimir archivos CSS/JS con UglifyCSS y UglifyJS

El objetivo principal de un compresor o minimizador de archivos es que la página cargue más rápido. Uglify es una opción fácilmente adaptable a Symfony y con la que se pueden reducir el peso de los archivos CSS y JavaScript con una sencilla instalación.

Instalar UglifyJS en Symfony

Para instalar UglifyJS es necesario tener instalado Node.js, ya que es un módulo de Node.

Puedes instalar Uglify de forma global en tu servidor:

npm install -g uglify-js

O de forma local, dentro de tu proyecto Symfony, por si necesitas una versión de UglifyJS específica. Para ello debes indicar la ruta donde quieres colocar el módulo:

npm install uglify-js --prefix app/Resources

Configurar el filtro UglifyJS

Para configurar UglifyJS en Symfony2 tenemos que modificar el archivo config.yml:

# app/config/config.yml
assetic:
    filters:
        uglifyjs2:
            bin: /usr/local/bin/uglifyjs

El directorio de Uglify dependerá de tu servidor, de dónde esté la carpeta bin. Puedes averiguarlo escribiendo:

npm bin -g

Si instalaste el módulo Uglify dentro de tu proyecto, puedes encontrar la carpeta bin dentro de la carpeta _nodemodules, llamada .bin.

Assetic trata de encontrar node automáticamente, pero si no puede encontrarlo, puedes especificar dónde se encuentra añadiendo una línea:

# app/config/config.yml
assetic:
    node: /usr/bin/nodejs
    filters:
        uglifyjs2:
            bin: /usr/local/bin/uglifyjs

Comprimir o minimizar tus archivos:

Para aplicar el compresor en tus archivos sólo tienes que añadir un parámetro en Twig:

{% javascripts 'js/jquery.js' 'js/bootstrap.js' filter='uglifyjs2' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

Si quieres desactivar el módulo para el entorno de desarrollo dev (lo que será más cómodo para identifcar errores) sólo tienes que añadir un interrogante en el filtro. Esto indica a Symfony que sólo aplique el filtro cuando el modo debug está desactivado:

{% javascripts 'js/jquery.js' 'js/bootstrap.js' filter='?uglifyjs2' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}

No olvides limpiar tu caché (php app/console cache:clear) e instalar tus assets (php app/console assetic:dump).

Instalar UglifyCSS en Symfony

El proceso es igual que en el caso anterior, primero instalamos el módulo de node UglifyCSS:

npm install -g uglifycss

En el caso de instalarlo en sólo un proyecto:

npm install uglifycss --prefix app/Resources

Después lo activamos en la configuración de Symfony:

assetic:
    filters:
        uglifycss:
            bin: /usr/local/bin/uglifycss

Y para aplicarlo en tus archivos CSS, añade el filtro de Assetic:

    {% stylesheets 'css/all.css' filter='uglifycss' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

También puedes añadir el interrogante como en el caso de JavaScript para aplicar el filtro sólo en el entorno de producción prod.

He hecho dos pruebas de velocidad con Pingtool, una antes y otra después de aplicar Uglify, y aunque no tengo muchos archivos CSS y JS en este blog, la diferencia es bastante notable.