Skip to Content »

Comprimir archivos Javascript

  • 11/05/2008
  • 1:39 pm
  • unijimpe

Hoy en día uno de los puntos mas importantes en el desarrollo web es la optimización, para de ello es optimizar el tamaño de los archivos pues de esta forma se acelera la carga de las paginas. En esta ocasión veremos algunos métodos para comprimir nuestros archivos JavaScript.

YUI Compressor
Julien Lecomte uno de los ingenieros de Yahoo ha desarrollado YUI Compressor el cual comprime archivos Javascript y CSS, esta herramienta escrita en Java, elimina los espacios en blanco, saltos de linea, y reemplaza los nombres de variables por otras mas cortas. Para comprimir un Javascript o un CSS con YUI Compressor pueden utilizar la siguiente sintaxis en linea de comandos:

  1. java -jar build/yuicompressor-2.1.1.jar file-to-compress.js

En donde file-to-compress.js es el archivo que deseamos comprimir, luego al ejecutar este comando se generará un archivo llamado file-to-compress-min.js. Si desean mas detalles puede ver el vídeo Using YUI Compressor.

JSMin
JSMin (The JavaScript Minifier) es una herramienta que elimina los comentarios y espacios en blanco innecesarios en los archivos Javascript con lo cual puedes optimizar el tamaño de los js en hasta un 50%. JSMin ha sido desarrollado en diferentes versiones de acuerdo a tus necesidades, de esta forma puedes encontrar versiones: MS-DOS, C, C++, Java, Javascript, Perl, PHP, Python y Ruby.

Si desean conocer como utilizar JSMin en su versión PHP pueden leer: Reducir ficheros javascript con PHP, también pueden utilizar una versión Javascript online llamada JS Minifier.

Dreamweaver Extension: TrickyScripter
TrickyScripter es una extensión para Dreamweaver que te permite comprimir y obfuscar de manera sencilla e integrada a tu herramienta de desarrollo. Esta herramienta, elimina los comentarios, elimina los espacios innecesarios, renombra las variables locales, compacta la declaración de variables y finalmente te ofrece un reporte detallado del proceso de optimización.

Normalmente el ratio de compresión que se obtiene con TrickyScripter es de 30 a 60% lo cual es muy significativo. TrickyScripter tiene un precio de $US 29.95, pero lo pueden descargar en versión trial la cual te muestra un mensaje cada vez que lo utilizas y solo acepta archivos de hasta 30KB de tamaño lo cual es suficiente en la mayoría de ocasiones. A mi parecer es la herramienta ideal pues esta integrada con Dreamweawer el cual es herramienta de desarrollo web por excelencia.

Posts Relacionados

YSlow plugin para Firebug

  • 06/05/2008
  • 12:25 am
  • unijimpe

YSlow es un plugin para Firebug el cual es una de las mas populares extensiones de Firefox para los desarrolladores web, fue creada por los desarrolladores de Yahoo y tiene como objetivo analizar detalladamente el rendimiento de una página web basado en las Reglas de Rendimiento Web que recomienda Yahoo.

El principal resultado es un análisis del rendimiento de la pagina y luego hace un reporte detallado ademas de recomendaciones necesarias para optimizar adecuadamente nuestros Javascript, CSS y HTML, entre las reglas que aplica para calcular el rendimiento se tienen:

  • Reducción de peticiones HTTP.
  • Uso de una Red de Distribución de Contenidos (CDN)
  • Agregar headers indicando expiración de los elementos.
  • Utilizar compresión Gzip.
  • Colocar los CSS al inicio del html (header).
  • Colocar los Javascript al final del HTML.
  • Reducir busqueda en los DNS.
  • Minimizar los archivos Javascript.
  • Evitar las redirecciones.
  • Eliminar llamadas a scripts duplicaddos.
  • Configurar ETags.

Además de ello tiene una opción para ver las estadísticas de rendimiento y una opción para visualizar todos los componentes cargados mediante la pagina. En definitiva con este complemento Firebug se convierte en una potente herramienta de análisis para el desarrollo de paginas web.

Posts Relacionados

Como utilizar Flashvars

  • 27/04/2008
  • 7:23 pm
  • unijimpe

Flashvars es un propiedad de Flash Player que ofrece un método eficaz para enviar variables desde HTML al archivos SWF, esta función fue implementada a partir de Flash Player 6, en esta ocasión veremos como utilizarla en AS2 o AS3.

Pasando variables FlashVars
Si estas usando el método tradicional de insertar SWFs, pueden asignarlos en un parámetro adicional al cual deben llamar flashvars y cuyo valor debe contener todas las variables a pasar codificadas en url.

  1. <object width="200" height="100">
  2.    <param name="movie" value="movie.swf" />
  3.    <param name="FlashVars" value="var1=valor1&var2=valor2" />
  4.    <embed src="miSwf.swf" width="100" height="100
  5.     FlashVars="var1=valor1&var2=valor2"/>
  6. </object>

Si estas utilizando SWFObject, puedes pasar las variables separadas utilizando el método addVariable, entonces el ejemplo anterior se vería de la siguiente forma:

  1. <script type="text/javascript">
  2. var so = new SWFObject("movie.swf", "my", "200", "100", "8", "");
  3. so.addVariable("var1", "valor1");
  4. so.addVariable("var2", "valor2");
  5. so.write("divmovie");
  6. </script>

Accediendo a FlashVars desde AS2
Cuando uno utiliza Flashvars, estas pasan a ser variables del _root de nuestra película principal. Luego podemos acceder de manera sencilla a estas variables anteponiendo la palabra _root.

  1. trace(_root.var1); // imprime "valor1"
  2. trace(_root.var2); // imprime "valor2"

Accediendo a FlashVars desde AS3
En AS3 las variables externas están contenidas en la propiedad LoaderInfo, entonces lo primero es tomar esta propiedad de la cual extraemos las variables contenidas en el método parameters.

  1. var param:Object = LoaderInfo(this.root.loaderInfo).parameters;
  2. trace(param["var1"]); // imprime "valor1"
  3. trace(param["var2"]); // imprime "valor2"

Como pueden observar es sencillo de acceder a estas variables, esto es muy practico cuando deseamos comunicar datos entre HTML y Flash.

Posts Relacionados

  •