Comprimir y ofuscar archivos .js de JavaScript

Los archivos .js se descargan al cliente como archivos de texto plano y son fácilmente visibles por cualquier ojo curioso y al mismo tiempo si el programador fue muy juicioso comentando, indentando y escribiendo nombres de variables claros los .js empiezan a pesar más Kb de lo normal.
Para solventar esto hay 3 técnicas que permiten hacer el código más pequeño en peso y menos legible para el ojo humano (solo menos legible, ya que existe obligatoriamente la inversa para estos métodos).

1. Minimizar el código :
   Básicamente lo que hace es eliminar comentarios, espacios y tabuladores al código.
   Está técnica es muy segura para el código (de aquí en adelante cuando hablemos de seguridad estamos hablando de la compatibilidad del código generado) pues no lo modifica demasiado, no requiere tampoco un proceso de traducción pues el código sigue intacto, pero, no comprime demasiado ni da mucha seguridad.
   
   El mejor de su genero es el JSMin.
   
   
2. Ofuscar el contenido :
   Está técnica, además de minimizar, modifica el código cambiando el nombre las variables y de las funciones por nombres más pequeños (obviamente menos descriptivos), por ejemplo la variable "textoBusqueda" se transforma en "abc" y de igual forma con nombres de funciones, eventos y el resto de vairables.
   
   Por modificar el código tan agresivamente es menos seguro (quiero decir que en su traducción el .js puede quedar inservible), pero al mismo tiempo su peso es menor y su lectura más complicada. También requiere de una traducción por parte del cliente (ya que las funciones no se llaman como deberían) y esto es tiempo y recursos en la máquina del cliente.
   
   Entre las opciones que hay son:
   
   
   
   • YUI Compressor:
     Escrito en Java y uno de los más conocidos, también uno de los más seguros. Además también sirve para CSS.
     
     
   • Packer:
     Para mucho es el mejor, tiene buena compresión, aunque se cree que no están seguro como YUI pero si tiene un alto nivel de seguridad.
     
     
   • Crunchy:
     Otra opción de obfuscation, es más agresivo que YUI y no es tan seguro.
     
     
   • JSCruncher Pro:
     Es comercial, no lo he probado pero se dice que es bueno.
     
     
   • Dojo ShrinkSafe:
     Se dice que es uno de los más seguros.
     
     
   • JSMart:
     No lo he probado, comprime también CSS.
     
     
   • Encontré también una paginilla interesante que compara algunos de los métodos que describimos arriba, CompressorRater.
     
   
   
   
3. GZip o HTTP Compression:
   En esta técnica se pasa un .js o un .css o .html (si, también sirve) comprimido al navegador, este lo descomprime y lo ejecuta. Todo lo que se pasa está compreso por ende se usa menos ancho de banda del servidor, pero, más RAM al tener que comprimir todo antes de pasárselo al cliente. El cliente a su vez debe descomprimir antes de ejecutar.
   
   Es una técnica no siempre tan segura ya que no todos los navegadores soportan gzip (en el link de arriba hay una lista de navegadores que lo soportan, está en ingles), he escuchado que IE 6 tiene un error leyendo ciertos contenidos comprimidos.
   
   Encontré una página que explica muy bien como usar esta técnica en gonzo.teoriza.com.

Conclusión

Comprimir nuestros scripts puede tener ventajas en el uso del ancho de banda (por ende $$$) pero también desventajas en el uso de la RAM tanto del servidor (gzip) como en el cliente (ofuscación).
Las pruebas con nuestros scripts nos dirán que técnica o técnicas usar y en que casos (no olvidar las pruebas con el navegador).

No creo que sea muy recomendable para el cliente hacer gzip y ofuscación al mismo tiempo, pero no le veo problema al gzip y minimizar.

No olvidar, siempre hacer una copia de seguridad antes de minimizar el código u ofuscarlo.Los archivos ya modificados son buenos para el servidor final (producción) pero para desarrollo definitivamente toca con los normalitos.

Usuarios que han visto este tema también han visto...

- Clase Date en Javascript
- Frases en diagonal con Javascript.
- MozAfterPaint, evento para controlar los cambios en la página
- Cabecera siempre visible con Javascript DHTML
- Expresiones Regulares en JavaScript

- Versión imprimible de este documento

- Enviar por e-mail este documento