Blog de Antonio Manuel Muñiz

Desarrollo, Ingeniería y Calidad del Software

Minimizando el tiempo de carga: Maven YUI Compressor

Cuando se usan frameworks Javascript, como ExtJS o YUI, en la capa de presentación de una aplicación web nuestro navegador debe descargar todo el Javascript antes de poder mostrar nada. Esto se traduce en un tiempo de espera, por parte del usuario, en ocasiones demasiado largo. Una medida, como otras muchas, de calidad del software, es la satisfacción del usuario final en cuanto a rendimiento de la aplicación, y por tanto debe ser tenida en cuenta durante el proceso de SQA.

Una solución a este problema es la aplicación conjunta de dos métodos: compresión/ofuscado (minify) y uso de un solo fichero que contiene todo el Javascript. De esta forma el navegador sólo debe hacer una llamada para descargar un fichero comprimido, y no decenas de llamadas para descargar cada pequeño fichero Javascript (sin comprimir).

Este proceso puede hacerse a mano, usando herramientas como YUI Compressor, o automatizarlo durante el ciclo de vida de nuestro proyecto Maven. El plugin Maven YUI Compressor hace uso de la herramienta citada anteriormente para integrar este proceso durante el empaquetado de la aplicación web.

La configuración que requiere el plugin en el pom es la siguiente:

<plugins>
    <plugin>
        <groupId>net.sf.alchim</groupId>
        <artifactId>yuicompressor-maven-plugin</artifactId>
        <version>0.7.1</version>
        <executions>
            <execution>
                <goals>
                    <goal>compress</goal>
                </goals>
                <phase>generate-sources</phase>
            </execution>
        </executions>
        <configuration>
            <nosuffix>false</nosuffix>
            <jswarn>false</jswarn>
            <preserveStringLiterals>true</preserveStringLiterals>
            <preserveAllSemiColons>true</preserveAllSemiColons>
            <nomunge>true</nomunge>
            <failOnWarning>false</failOnWarning>
            <sourceDirectory>${basedir}/src/main/webapp/public</sourceDirectory>
            <outputDirectory>${project.build.directory}/compressed/public</outputDirectory>
            <aggregations>
                <aggregation>
                    <includes>
                        <include>**/*-min.js</include>
                    </includes>
                    <output>
${project.build.directory}/${project.artifactId}-${project.version}/public/scripts/todo-el-javascript.js
                    </output>
                </aggregation>
            </aggregations>
        </configuration>
    </plugin>
</plugins>

Esta configuración realizará las siguientes tareas:

  1. Comprimir/ofuscar (minify) cada fichero Javascript generando un fichero [nombre_original]-min.js
  2. Colocar el código comprimido en target/compressed/public
  3. Unir todos los ficheros ofuscados (*-min.js) en uno: todo-el-javascript.js
  4. Colocarlo en target/[artifact]-[version]/public/scripts

En el proyecto que he usado como ejemplo se ha conseguido reducir en un 40% el tamaño total en bytes del código Javascript que el navegador debe descargar, a esto hay que sumarle la ganacia en tiempo que se produce al descargar un solo fichero con una sola petición.

Este plugin además ofrece otra funcionalidad, el análisis estático del código usando Jslint, pero esto será tratado en otra entrada futura ;)

7 Respuestas a “Minimizando el tiempo de carga: Maven YUI Compressor

  1. Manuel Jesús Recena Soto 24 septiembre 2008 en 9:28 am

    Hola Antonio:

    Más que el peso de los archivos, lo realmente problemático es la cantidad de recursos (js, css, imágenes) que el cliente se tiene que descargar. Especialmente en el caso de ExtJS.

    Otra opción es configurar el front-end para que comprima archivos, por ejemplo, javascript.

    Un saludo

  2. Manuel Jesús Recena Soto 24 septiembre 2008 en 9:59 am

    Hola Antonio:

    Amplío un poco más la información de antes con:
    http://www.faqs.org/rfcs/rfc2616.html

    Ahí puedes encontrar:
    Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion.

    Según esto, nos interesa mucho reducir el número de recursos que el cliente debe solicitar al servidor. En Yahoo Developer Network los referencian como componentes.

    Un saludo

  3. Javier Murillo 24 septiembre 2008 en 10:11 am

    Hola Manuel,

    A mi si me parece una utilidad bastante interesante.

    Estoy de acuerdo con Manuel en que existen otra serie de recursos que en muchos casos son más problemáticos por la cantidad, pero en realidad la solución no dista mucho de ser en el fondo el mismo concepto.

    Si lo que queremos es minimizar el número de peticiones sobre imágenes por ejemplo, podemos tirar de técnicas como los CSS Sprites.

    Si queremos hacer esto mismo con JS, tu técnica es perfectamente aplicable.

  4. Manuel Jesús Recena Soto 24 septiembre 2008 en 10:26 am

    Hola Javier:

    Lo que se tiene que hacer es trabajar en las dos líneas, optimizar el peso de los recursos y el número de peticiones. Tanto para una cosa como para la otra existen muchas técnicas. Solo hay que buscan un poco, aunque la gente de Yahoo las tiene muy bien recogidas.

    Mi comentario simplemente justificaba que hay más hincapié en reducir el número de recursos y daba información complementaria.

    Un saludo

  5. pablo 1 julio 2010 en 7:09 pm

    Una pregunta.
    Implemente en mi aplicacion YUI Compressor. El war que genero ahora tiene los .js de antes mas los -min.js de cada archivo.
    Debo modificar cada jsp para que invoque a los -min.js ??? o lo hace automaticamente el plugin?

    Saludos!
    Espero su respuesta

  6. Pingback:Carga lo que necesitas y cuando lo necesitas con Ext.Loader « Blog de Antonio Manuel Muñiz

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: