2mdc
C/ Matias Turrión, 24, 1º
Madrid 28043
Tel: 91 759 00 24
Fax: 91 759 15 18

Blog: Desarrollo web

Carga dinámica de JavaScript (2)

Publicado el: 6/06/2011 en: Desarrollo web |

Envía esta entrada a menéame Envía esta entrada a del.ici.ous Envía esta entrada a facebook

Ya conseguida la carga dinámica de Javascript aún podemos dar un paso más para aligerar el peso.

Comprimiendo los scripts que cargamos; no al modo tradicional, sino limpiándolos de todo lo innecesario (saltos de carro, comentarios, etc.): Minification.

Esto se puede hacer teniendo una versión completa del código y preparando sobre ella una segunda “minificada”, que será la que pongamos en nuestra página. Modo estático.

Aquí mostraremos una forma acorde al título del artículo, con una pequeña modificación del anterior, para tener tanto carga dinámica como “minificación” dinámica.

El ejemplo será para un servidor que permita código PHP.

Tomando el código del artículo anterior (Carga dinámica de JavaScript), fichero “test.html”, modificamos la línea que contiene:

    //relativo o absoluto, ej: 'http://path.to.javascript/file.js'
    script.src = scrPath;

y la dejamos como:

    //ej: scrPath = 'file.js'; packer.php está en la misma ruta que este archivo
    script.src = 'packer.php?scriptJs=' + scrPath);

Esto llamará al empaquetador, pasándole como parámetro el script que queremos cargar.

El empaquetador (“minificador”) que he escogido para el ejemplo es Packer (conversión a PHP del original creado por Dean Edwards); en la misma página tenéis enlace a otras versiones de este mismo “minificador” así como al original.

Necesitareis descargar la versión que se encuentra en ese mismo enlace y descomprimir “class.JavaScriptPacker.php” en el mismo directorio que el resto del ejemplo.

Sólo falta un archivo más, que se ocupará de cargar y “minificar” los scripts; “packer.php”:

< ?php
 
if(empty($_GET['scriptJs'])) die('No script');
$src = $_GET['scriptJs'];
$debug = false; //cambiando este valor a true devolvera el script tal cual lo lea
 
require 'class.JavaScriptPacker.php';
 
$script = file_get_contents($src);
 
if($debug){
    echo($script);
    exit();
}
 
$t1 = microtime(true);
 
$packer = new JavaScriptPacker($script, 'Normal', true, false);
$packed = $packer-&gt;pack();
 
echo($packed); //devuelve el script "minificado"
exit();
?>

Ahora tenéis la opción de cargar vuestros scripts dinámicamente, además de limpiarlo de todo lo innecesario para su funcionamiento.

¿Se puede reducir más? No lo sé, si a alguien se le ocurre que no deje de comentarlo ;D

Valore de 1 a 5 este artículo
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (4 voto(s), media: 4.00 sobre 5)

2mdc.com Aplicaciones web C/ Matias Turrión, 24, 1º, Madrid 28043 Tel: 91 759 00 24 Fax: 91 759 15 18 Aplicaciones web