Optimizar ficheros js para disminuir tiempo de carga 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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:

1
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 )

1
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.

1
2
3
4
5
6
7
8
9
10
11
<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.

Más información

Artículos relacionados

GroundWork CSS – 01 – Framework HTML5 ... El primero de los cuatro vídeos que he preparado para mostrar cómo utilizar el framework GroundWork para la creación de páginas web responsive. En est...
CodeIgniter – Debug e información de forma s... CodeIgniter proporciona una clase que facilita la programación. Activando esta clase desde nuestro controlador, en el momento de mostrar la vista, lis...
MySQL – Listar registros aleatorios Pequeño código para que MySQL liste un determinado número de registros aleatoriamente. Ejemplo: En una tabla 'jugadores' tenemos los datos de los j...
Optimización página web – Paso 2 – Accesibilidad... Como mas accesible sea la web, el Sr. Google mas nos valora. Para seguir las normas de accesibilidad, hay que cumplir algunas normas que en el siguien...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*