Minificar el Javascript es una técnica que condensa tus scripts en unos archivos mucho más pequeños y sobre todo ligeros. Esto hace que pierda legibilidad humana, pero conservarás un ancho de banda considerable. Después de todo, Javascript es un lenguaje destinado a los navegadores, no a los usuarios.
La mayoría de sitios web en producción utilizan sus javascripts minificados, pero la forma en la que se minimizan estos archivos es muy variable. Desde conversores online super simples hasta herramientas GUI más complejas, las opciones son muy variadas. En este artículo vamos a echar un vistazo a cómo funciona la minimización del código Javascript, cómo podemos adaptarlo a nuestro trabajo y cuáles son los pros y los contras de la minimización.
Cómo funciona la minimización
La mejor manera de aprender lo que sucede cuando se minimiza un código es echar un vistazo al repositorio de Github de UglifyJS. Este script se utiliza en muchos conversores, así como en herramientas GUI y herramientas de línea de comandos como Grunt. Estas son algunas de las transformaciones que se aplican en tu código cuando lo minimizas:
- Se eliminan los espacios innecesarios
- Se acortan los nombres de las variables, por lo general, a caracteres individuales
- Se unen las declaraciones de variables consecutivas
- Se convierten los arrays a objetos cuando es posible
- Se optimizan las sentencias if
- Se calculan las expresiones constantes simples
- Etcétera
Como ejemplo rápido, aquí tenemos una función que, fundamentalmente, escribe algo de texto.
function hello( text ) {
document.write( text );
}
hello( 'Bienvenido a este articulo' );
Vamos a ver qué pasaría si minificásemos esto. Fíjate en la eliminación de espacios y de indentaciones, y también en el acortamiento del nombre de la variable de texto.
function hello(e){document.write(e)}hello("Bienvenido a este articulo")
Herramientas para minificar Javascript
Las herramientas utilizadas para minificar Javascript pueden clasificarse en 3 grupos: herramientas online, herramientas GUI y herramientas de línea de comandos.
- Las herramientas online, por línea general, es cuestión de pegar el código y copiar el resultado.
- Las herramientas GUI a menudo cuentan con muchas más funciones. La minificación de Javascript es sólo una pequeña parte de lo que hacen.
- Las herramientas de línea de comandos también suelen ser más amplias, ofreciendo la minificación como un módulo añadido.
Herramientas online
- javascript-minifier.com es una herramienta de aspecto agradable con una API
- Online Compresor YUI es una herramienta más potente que utiliza el compresor YUI, con un montón de opciones y funciones de minificación para CSS también.
- jscompress.com es una minificador humilde pero que hace muy bien su trabajo
- jsmini.com es otra opción sencilla, pero totalmente utilizable
La gran ventaja de las herramientas online es la velocidad con la que se puede trabajar con ellas. Las herramientas GUI y las de línea de comandos minimizan más rápido, pero es necesario tener un proyecto creado para que funcionen correctamente. La desventaja de estas herramientas online es que la mayoría ofrecen poca o ninguna personalización, al menos en comparación con las herramientas de línea de comandos.
Herramientas GUI
- Koala es una herramienta gratuita para LESS, compilación SASS, minimizacion de JS y mucho más
- Prepros es una aplicación de pago multi-plataforma que te proporciona aún más opciones
- Codekit es mi aplicación preferida. Es una app exclusiva de Mac que ofrece compilación de código, minimización, vista previa, gestión de paquetes y mucho más
- AjaxminGui es una herramienta gratuita de Windows para minificar tu JS
- UltraMinifier es una aplicación gratuita para OS X que minifica el CSS y el JS con solo arrastrar y soltar
- Smaller es una herramienta para OS X que minimiza y concatena archivos para ti
He mencionado dos tipos de aplicaciones GUI antes. Las aplicaciones minimización de un paso son muy parecidas a sus contrapartes online. Son extremadamente rápidas de utilizar ya que sólo tienes que arrastrar y soltar los archivos en ellas, y encima no requieren instalación. Dicho esto, como hemos dicho antes, no ofrecen prácticamente ninguna personalización.
Herramientas GUI de mayor calado como Prepros, Koala o Codekit son expertas en la gestión de proyectos y proporcionan unas cuantas opciones más para la compresión, pero necesitan un poco de configuración. Para una minimización rápida de un JS, tardarías unos 20 segundos en configurarla. Lo cual es mucho, comparado con las herramientas GUI simples o con las online.
Por otro lado, ofrecen más características en general y te proporcionan automatización. Tus archivos JS serán minimizados cada vez que los guardes, no tendrás necesidad de minimizarlos manualmente. Si estás desarrollando algo en Javascript, este es definitivamente el camino que debes seguir.
Herramientas de linea de comandos
- Minify es para aquellos que quieren minificar JS desde la línea de comandos, pero no quieren relacionarse con Grunt o Gulp
- Uglify.js, el cual hemos mencionado antes, también está disponible como una herramienta de línea de comandos independiente
- Grunt cuenta con una extensión para la minimización de Javascript llamada grunt-contrib-uglify
- Gulp también cuenta con minimización de JS usando Uglify.js través gulp-uglify
Las herramientas de línea de comandos no solo son para los frikis de Linux. Personalmente no soy muy bueno con las terminales, pero construir cosas con Grunt y Gulp es fácil gracias a su gran documentación. La ventaja de las herramientas de línea de comandos es la increíble flexibilidad que tiene entre las opciones de salida.
Por otro lado, tienen una curva de aprendizaje considerable. Cuesta acostumbrarse a estas herramientas hasta que por fin obtienes beneficios de ellas.