Reducir ficheros javascript con PHP
Escrito el 2 Mayo 2008 – 15:01 pm | por Marcos Fernández
Uno de los problemas más habituales hoy en día en el desarrollo de páginas web es la utilización de múltiples ficheros Javascript. Estos ficheros a la mínima que la página sea algo grande, toman un peso muy significativo. Una de las premisas que siempre debemos tener en la cabeza es hacer que nuestra página cargue lo más rápido posible. (El addon para Firefox llamado YSlow que se integra con Firebug es muy útil para optimizar nuestra página).
Como toda buena práctica de programación, nuestro código incluye sangrías y comentarios. Si no ponemos sangrías nuestro código se hace incomprensible, y si le quitamos los comentarios, dentro de unos meses nos acordaremos de aquel día que decidimos no escribir una frase aclaratoria de que hacía aquella función.
Por ello, existen multitud de herramientas que permite que a partir de un fichero javascript nuestro, se genere un fichero javascript reducido, es decir, sin espacios, sin comentarios, e incluso ofuscado (cambia nombre a las variables por letras o números y trata de reducir la comprensión del código por alguien que quiera copiarnos o analizarnos para un ataque).
Estas herramientas el problema que tienen es que debes tener un fichero para el desarrollo y luego de haber hecho los cambios oportunos, debes generar el fichero reducido.
En este tutorial veremos como podemos reducir en tiempo real los ficheros Javascript que precise nuestro documento mediante PHP (es necesario tener la versión 5). Además, si nuestra página utiliza más de un fichero js (javascript), lograremos reducir las peticiones al mínimo. Por ejemplo, nuestra página utiliza tres ficheros js nuestros, son tres peticiones. Lograremos reducirlo a únicamente una petición. Caso aparte es cuando debes realizar la inclusión de un fichero js como el de Google Maps, con el cual no puedes utilizar esta técnica.
Vamos manos a la obra.
Lo primero que necesitamos es descargar una librería llamada Jsmin-php. Podéis encontrarlo en su página web, y justo en la derecha hay un botón para accionar la descarga.
Descargamos el dichero jsmin-1.1.1.php (esta era la versión al momento de hacer este tutorial).
Supongamos que tenemos la siguiente estructura de ficheros:
En la imagen podemos observar que tenemos un fichero index.php en el cual hay el siguiente código:
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </meta></head> <body> <p id='parrafo'>Hola</p> <script type='text/javascript' src='test.js'></script> <script type='text/javascript' src='test2.js'></script> </body> </html>
Cómo se puede observar es un documento en blanco con un párrafo en el cual está escrito la palabra Hola. Este párrafo tiene como identificador único el id ‘parrafo’.
Más adelante podemos ver la llamada a dos ficheros js externos al documento. Cómo se puede apreciar, he puesto las inclusiones al final del documento, justo antes del final del body. Esto es una de las pautas a la hora de optimizar el rendimiento de una página web. En otro tutorial trataremos de una manera más profunda este tema.
El contenido de los ficheros js es el siguiente
Fichero test.js
/*
Esto es un fichero de prueba js
Conjunto de comentarios que explican el funcionamiento de este js
El código siguiente sustuirá el texto interior del párrafo identificado con el id parrafo
*/
document.getElementById('parrafo').innerHTML='esto funciona';
Fichero test2.js
//Comentario: esto va a mostrar un mensaje de alerta
alert('hola mundo');
El código del fichero test.js lo que hace es buscar dentro del documento un elemento que tenga como identificador ‘parrafo’ y le sustituye su contenido por un texto ‘esto funciona’.
El código del fichero test2.js lo que hace es mostrar un mensaje.
En ambos documentos se pueden ver muchos comentarios. Estos comentarios están bien para nosotros pero lo que hacen es hacer más lenta la carga de la página ya que el fichero tiene un mayor fichero.
Vamos a comenzar a solucionar este problema.
Para ello, lo primero que debemos hacer es crear un fichero php al cual le podemos llamar scripts.php. Este fichero tiene la función de solicitar los ficheros js que necesitemos, reducirlos y generar un documento único.
Para que el contenido final del documento sea entendido por el navegador como código javascript y no otro tipo de lenguaje debemos incluir como primera línea de nuestro fichero scripts.php el siguiente código:
header("content-type: application/x-javascript');
Ahora debemos incluir la librería jsmin que hemos descargado y la cual se encargará de optimizar el código:
require_once 'jsmin-1.1.1php';
La parte que viene ahora es muy sencilla. Debemos ejecutar la siguiente línea por cada fichero js que queramos llamar. En nuestro caso será dos veces:
echo JSMin::minify(file_get_contents('test.js'));
echo JSMin::minify(file_get_contents('test2.js'));
JSMin:minify es la orden que se encarga de reducir un determinado código. file_get_contents lo que hace es obtener el contenido de un determinado fichero. Por lo tanto esta orden lo que hace es obtiene el código de nuestros ficheros js, lo reduce y mediante la orden echo lo vuelca en pantalla, en nuestro caso, produciendo un nuevo fichero js.
El resultado es el siguiente:
document.getElementById('parrafo').innerHTML='esto funciona';
alert('hola mundo');
Cómo se puede observar ya no hay comentarios. Si el código tuviese sangrías o fuera más complejo, se podría observar muchas más diferencias.
Ahora ya sólo nos queda retocar el fichero index.php. Vamos a decirle que en vez de utilizar los dos ficheros js, utilice únicamente el fichero php que hemos generado. Con ello matamos dos pájaros de un tiro: reducimos las peticiones de 2 ficheros a 1, y generamos código reducido. Para ello sustituimos las siguientes líneas:
<script type='text/javascript' src='test.js'></script> <script type='text/javascript' src='test2.js'></script>
Por esta
<script type='text/javascript' src='scripts.php'></script>
Listo. Ya tenemos nuestra página web con el js reducido y además hemos reducido el número de peticiones.
Espero que esto os pueda ser útil.
Ficheros del tutorial Reducir Js con PHP
Etiquetas: javascript, js, optimizar, php, reducir
19 Respuestas en “Reducir ficheros javascript con PHP”
Por Carlos en May 6, 2008 | Responder
Muy útil. Algo así sería genial para hacer en Drupal, donde el mayor problema que tengo con el tiempo de carga de mi página son los 13 ficheros js y que además se cargan en el head… Igual se puede sacar un modulito…
Muy buen tutorial. Un saludo.
Por Marcos Fernández en May 6, 2008 | Responder
Muchísimas gracias por tu comentario Carlos. Me encantaría crear un módulo PHP para Drupal para poder hacer lo que pides pero ahora mismo estoy demasiado colapsado con varios proyectos en los que estoy involucrado. De todas formas si te decides a meterte en el tema y te puedo dar una mano, encantado estaré.
Un saludo.
Por Jonathan Muzkat en May 6, 2008 | Responder
Personalmente no me gusta este tipo de metodos on-demand. Prefiero que esten previamente armado el paquete y obviamente minimizado y ofuscado. Ya que asi estas gastando más procesador.
Tambien recomiendo utilizar un add para Smarty que no me acuerdo el nombre que hace algo similar.
A eso faltaria agregarle headers de expires, gzip y nuestra web estaria mas optimizada.
Saludos.-
PD: habria que ver como lo hace con scriptaculo que el mismo js incluye a los suyos.
Por Marcos Fernández en May 6, 2008 | Responder
Este sistema es ideal para webs con un tamaño pequeño / medio. Si la web es grande o muy grande, este sistema no es válido por el uso de cpu. Para webs de un tamaño normal es una forma de optimizar su rendimiento sin volverse loco con versiones, con dos ficheros, etc…
El add que creo que te refieres es el PHP Speedy. Como comenté en Cristalab, yo busqué una alternativa ya que me daba unos pequeños problemas.
El resto de cosas como header, gzip, es totalmente cierto, al igual que un código limpio y estándar, una separación total del diseño / estructura / interactividad / contenido, una buena elección de funciones, bucles, variables en php,…
Buff, cuantas cosas para que una web tire a toda velocidad.
Gracias Jonathan por tu aportación.
Por alfa en May 6, 2008 | Responder
Gracias por el aporte Marcos, me gustaría comunicarme contigo, creo que tengo un aporte que puede interesarte, puedes escribirme un mail a mi dirección de correo, te lo agradeceré mucho.
Por Víctor F. Ruiz en May 6, 2008 | Responder
Muy bueno, pero para Wordpress hay un plugin que hace esto “automáticamente”. Lo pongo entre comillas por que hay que seguir unos cuantos pasos previos para instalarlo y configurarlo. Pero este además de reducir y unir los archivos JavaScript, también hace lo mismo con los CSS y además hace uso de Cache. Con lo cual disminuimos el tiempo de carga a la vez que no aumentan el uso de CPU del servidor y disminuyen el número de peticiones a este.
Te dejo una entrada que he escrito hace unos días sobre ese plugin. Por si os interesa. Guia completa sobre PHP Speedu: Intalación, configuración y uso.
Saludos
Por TBS en May 8, 2008 | Responder
Que IDE utilizas para programar????
Por Marcos Fernández en May 8, 2008 | Responder
En el videotutorial utilizo TextMate por lo fácil y limpio de la interfaz, pero cuando trabajo seriamente, utilizo Eclipse + Plugin PHP.
Un saludo y gracias por tu comentario.
Por Ruju en May 9, 2008 | Responder
Muy buen tutorial, si senyor.
Se nota que sabes de que hablas, Marcos. Lo tendre muy en cuenta para mi trabajo.
PD: lo siento por los acentos y las enyes, en Belgica no los tenemos.
Por Marcos Fernández en May 9, 2008 | Responder
Muy bien Ruju, luego te paso el billetito por debajo de la mesa por el grato comentario.
Nos vemos nin.
Por Axel en Jul 16, 2008 | Responder
Hola… Te cuento que hice lo mismo pero inclui todas las funciones en un solo .js. Funciono igual pero la idea de un ficehro php es igual muy buena…
Por Marcos Fernández en Jul 16, 2008 | Responder
El tener los ficheros js separados es para tener una mejor estructura de ficheros y separación de funcionalidades que a lo mejor no nos interesa tener en un mismo fichero (re utilización parcial por otras secciones de nuestro proyecto). La llamada al fichero de php es sólo para coger el contenido de los ficheros js que sean y regenerar el fichero “js” minimizado.
Gracias por tu comentario
Por Carlo en Mar 24, 2009 | Responder
Sinceramente ami realizándolo así me tarda mas en cargar y e mirado los procesos del servidor y carga mas ya que aparte de la librería tiene que ejecutar cada vez el depurador js… por lo que EN MI CASO va mas lenta la website
Por Marcos Fernández en Mar 24, 2009 | Responder
Buenas, esto que puse en este tip es una versión de iniciación de como se puede reducir los ficheros y reducir el uso del ancho de banda. Lo que yo te recomiendo, es que crees un script el cual te genere con el jsmin los ficheros reducidos. Lo que yo normalmente hago es crearme un Script que me genere la página para exportarla del Subversión hacia la versión de producción. Este script que lo ejecuto mediante línea de comandos del servidor linux, me genera los ficheros js optimizados, incluyendo su número de versión. Así de esta manera, también consigo que las caché de los navegadores no interfiera con los ligeros retoques que yo hubiera podido hacer en el fichero js y les obligo a actualizarse.
Por Francisco en Sep 8, 2009 | Responder
Pues a mi me tarda más en cargar.
Por Marcos Fernández en Sep 8, 2009 | Responder
Buenas Francisco, si tu página tiene una gran carga de visitas, te tardará un poco más siempre en cargar ya que cada vez estás pasando por el proceso de reducción y optimización del fichero js. Si este es tu caso, lo que debes hacer es generar el fichero resultante optimizado y guardarlo con nombre del estilo fichero_0.js, dónde 0 es el número de versión (así evitas problemas de caché cuando cambies algo del código js) y hacer un link a dicho fichero, en vez del fichero original con el que sueles trabajar.
Por Daniel Salgado en Ene 16, 2010 | Responder
Muchas gracias por un tutorial tan bien explicado, me ha resultado muy útil.
Guardo tu página en bookmarks sin duda!