Optimizar ficheros js para disminuir tiempo de carga web

Publicada el por

Veamos cómo optimizar ficheros Javascript js para disminuir el tiempo de carga de una web. Los comprimiremos y los uniremos en uno solo.

Tutoriales programación web

En muchas ocasiones nos encontramos con un problema que afecta al tiempo de carga de nuestra web. Llamamos a muchos ficheros javascript desde nuestra página, con lo que se crea una petición al servidor por cada llamada. Hay una manera de optimizar este proceso para comprimir los ficheros javascript y unirlos en uno solo para hacer una sola llamada.

Partimos del siguiente código

<html>
<head>
<title>Titulo pagina</title>
...
<script type="text/javascript" src="http://www.laweb.es/js/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="http://www.laweb.es/js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://www.laweb.es/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="http://www.laweb.es/js/jquery.cycle.all.js"></script>
....
</head>
<body>
...
</body>
</html>

Podemos ver que dentro de la carpeta js tenemos varios ficheros javascript que llamamos desde la web. Esto solo es un ejemplo, y normalmente puede llamarse a muchos mas ficheros…

Primer paso

Descargamos el fichero Custom_rhino.jar que nos permitirá comprimir los ficheros. Se pude descargar des del web BetterExplained. Dejadlo en la misma carpeta donde estan los ficheros javascript.

Segundo paso

Vamos a unir todos los ficheros .js en uno solo. Esto va para los que trabajáis en Linux ( los windowseros buscad el equivalente … ). Desde la consola, navegáis hasta la carpeta donde estan todos los ficheros y ejecutáis la siguiente orden:

cat *.js > allfiles.lib.js

Con esto unimos el contenido de todos los ficheros un uno solo, allfiles.lib.js

Tercer paso

Ahora que lo tenemos todo en un solo fichero, podemos comprimirlo (quitar espacios, lineas, comentarios… ). Eso lo hacemos con Rhino que es el escript que hemos descargado en el primer paso. Pues bien ejecutamos la siguiente orden desde consola (recuerda que custom_rhino.jar debe estar en la misma carpeta que todos los javascript )

java -jar ./custom_rhino.jar -c allfiles.lib.js > libreria.min.js 2>&1

Ahora tenemos todos los javascript en un solo fichero y comprimido. Ahora solo haría falta llamarlo desde la página.

<html>
<head>
<title>Titulo pagina</title>
...
<script type="text/javascript" src="http://www.laweb.es/js/libreria.min.js"></script>
....
</head>
<body>
...
</body>
</html>

Las ventajas son la reducción de carga. La desventaja, es que cada cambio o modificación requerirá hacer de nuevo todo el proceso. Para dos minutos que cuesta una vez lo tienes claro, merece la pena.

Si os ha parecido interesante ver cómo optimizar ficheros JavaScript js para disminuir el tiempo de carga de una web, puede que también debáis leer Cómo optimizar ficheros CSS para disminuir el tiempo de carga de una web

Más información