toggle Cinema 10 Nov 2009

Comparando herramientas de compresión para javascript Posted by Insane in Cool, Google, Javascript, Php | No responses

A la fecha en que este post fue escrito, Google tenia 5 dias de haber anunciado Closure Compiler para la compresión de archivos javascript.Su herramienta no solo comprime código sino que lo hace más pequeño ademas de  optimizarlo.

En este post comparo a Closure con las herramientas de compresión mas conocidas, YUI, Packer de Dean Edward y Shrinksafe the Dojo compressor comprimiendo tres importantes frameworks para javascript.

Métricas

porc

La diferencia entre Closure en modo simple contraYUI es de pocos bytes, esto cambia notablemente en modo avanzado, colocando a Closure en la cima de las herramientas para compresión.

Si deseas hacer tus propias pruebas con Closure aquí hay algunos tips.

Usar Closure mediante PHP y el API REST

protected function gClosure($filename){
 $ch = curl_init('http://closure-compiler.appspot.com/compile');
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($ch, CURLOPT_POST, 1);
 curl_setopt($ch, CURLOPT_POSTFIELDS
 , 'output_info=compiled_code&output_format=text&compilation_level=ADVANCED_OPTIMIZATIONS&js_code=' . urlencode(file_get_contents($filename)));
 $output = curl_exec($ch);
 curl_close($ch);
 return $output;
 }
  • Si el tamaño de tu código supera los 200000 bytes no especifiques  el codigo sino la dirección de tu scritpt usando la variable code_url en lugar de js_code de otro modo el servicio te regresara un error indicando que has excedido el tamaño máximo de la petición POST.
  • Una buena practica si utilizas Apache es crear un RewriteRule para redirigir todos los peticiones que soliciten archivos javascripts a ser manejados por tu ServerSide , asi podras comprimirlos al instante ademas de posiblemente “cachearlos” para futuras peticiones aumentando el performance considerablemente.
  • Closure en su modo avanzado verifica que las funciones asi como variables en tu script sean usadas al menos una vez en el, de no ser asi el símbolo no es retornado en la compresión. Se muestra un ejemplo a continuación:
    // esta funcion no es llamada en el escript
    // asi que se suprime en el retorno
    function a(b){alert(a);}
    // esta funcion es llamada y/o referenciada en el escript
    window.aa = function a(b){alert(a);};
    a("Hola");

Enlaces

http://code.google.com/intl/es/closure/

http://dean.edwards.name/weblog/2006/12/packer-php/

http://www.dojotoolkit.org/docs/shrinksafe

  • Share/Bookmark

Promote this post

Would you like to add this post to your bookmarks? Come on, do not miss any updates and stay tuned.
Please share with us!

This entry no have comments but you can be first .

Leave a Reply ( Guest )

(*)

(will not be published) (*)