Reducir peso de ficheros Javascript con PHP

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:

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

Código :

/*
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

Código :

//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:

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:

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:

Código :

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:

Código :

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:

Código :

<script type='text/javascript' src='test.js'></script>

<script type='text/javascript' src='test2.js'></script>

Por esta

Código :

<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

VideoTutorial de este tip

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Reducir peso de ficheros Javascript con PHP

Publica tu comentario

o puedes...