Carga dinámica de JavaScript (2)

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

Carga dinámica de JavaScript (2)

Artículos recientes