Marcos Fernández

Uno de los puntos primordiales en el rendimiento de la web es la reducción del número de peticiones que ésta realiza al servidor para cargar todos los elementos. A más peticiones, más tarda la página en cargar. Es cierto que podemos utilizar un CDN para cargar los ficheros necesarios de nuestra web desde diferentes servidores y con ello aumentar el rendimiento, pero esto es un añadido, no una mejora esencial.

Dentro de este tema de reducir las peticiones, aparece un tema recurrente en prácticamente todo proyecto web que se precie: la llamada a múltiples ficheros js para cargar una página web. Normalmente, nuestra página cuenta con algún framework javascript, cómo jQuery, el uso de algún plugin de este framework que estamos utilizando y por último, nuestro propio fichero js con javascript que hemos manufacturado nosotros. Es decir, de inicio, ya tenemos como mínimo tres peticiones. Veamos cómo podemos reducir el número de peticiones de 3 a 1.

Para ello, haremos uso de Ant. Para quien no lo conozca, es una herramienta que permite realizar tareas mecánicas, normalmente muy utilizada en proyectos Java. Las tareas se definen en ficheros xml que dicha herramienta interpreta. Entornos de desarrollo como Netbeans o Eclipse, llevan integrado esta utilidad. Veamos el siguiente xml:

< ?xml version="1.0" encoding="UTF-8"?>
<project name="DemoJavascript" xmlns:rsel="antlib:org.apache.tools.ant.types.resources.selectors">
<target name="concatenarFicherosJs" description="Unir varios ficheros js en orden">
<concat destfile="js/fichero.js">
<filelist dir="js/">
<file name="ficheroUno.js" />
<file name="ficheroDos.js" />
<file name="ficheroTres.js" />
</filelist>
</concat>
</target>
</project>

Lo primero que se define es un nombre del proyecto más el xlmns de Apache Ant, lo cual nos sirve para validar nuestra sintaxis dentro del fichero xml.

Luego definimos un grupo de tareas – target (nuestro fichero puede contener más de  un grupo de tareas) y la llamamos concatenarFicherosJs. Este grupo tiene una tarea llamada concat la cual indica que se deben concatenar ficheros. Esta tarea, define un atributo destfile que indica el fichero que contendrá los tres ficheros concatenados. Ya hemos indicado que queremos concatenar y en dónde queremos guardar el fichero generado. Ahora nos queda indicar que ficheros y en que orden queremos que se concatenen. Eso se realiza mediante la definición de una lista de ficheros – filelist, dónde indicamos la ruta – dir – dónde encontrar los ficheros que a continuación definimos. A partir de ahí, definimos cada uno de los ficheros que queremos concatenar y en que orden necesitamos que se concatenen. El orden es importante ya que si primero si intenta cargar un plugin de jQuery sin que el framework se haya cargado antes, nos dará un error.

Para los que no han utilizado nunca Ant, hay muchos ejemplos sencillos en internet de cómo ejecutar tareas de Ant desde Eclipse y Netbeans.

Esto es todo. Ahora ya podemos modificar nuestra página para que en vez de realizar tres solicitudes, cargue un único fichero. En la utilización de proyectos mucho más complejos, esto puede ser una mejora sustancial ya que podemos reducir las peticiones de 8 o 9 a 1 o 2.

Be Sociable, Share!

•