14 herramientas para reducir Javascript

Javascript minificación es una técnica que condensa tu script en una huella mucho más pequeña. Pierde la legibilidad humana pero conserva un ancho de banda considerable, al final, Javascript es para su navegador, no para sus usuarios.

La mayoría de los sitios web de producción utilizan la minificación de Javascript, pero la forma en que esto se logra varía mucho. Nuestras opciones son bastante variadas, desde simples convertidores en línea hasta herramientas de GUI más completas para dirigir interfaces de línea. En este artículo echaremos un vistazo a Cómo funciona la minificación de Javascript, cómo podemos integrarlo en nuestro flujo de trabajo y cuáles son los pros y los contras de minimizar.

Cómo funciona la minificación

La mejor manera de aprender lo que sucede cuando minimizas tu código es mirar el repositorio de Github de UglifyJS. Este script se usa en muchos convertidores en línea, así como en herramientas de GUI y herramientas de línea de comandos como Grunt. Estas son algunas de las transformaciones que aplica para acortar tu código:

Elimina el espacio innecesario
Acorta los nombres de las variables, generalmente a caracteres individuales
Se une a las declaraciones de var consecutivas.
Convierte matrices a objetos cuando es posible.
Optimiza si las declaraciones
Calcula expresiones constantes simples
etc.

Como ejemplo rápido, aquí hay una función que esencialmente escribe un texto dado.

 función hello (texto) document.write (texto);

hola ('Bienvenido al artículo');

Veamos que pasa cuando minimizamos esto. Tenga en cuenta la eliminación de espacios y sangría y la reducción de la variable de texto.

function hello (e) document.write (e) hello ("Bienvenido al artículo")

Herramientas de minificación de Javascript

Las herramientas utilizadas para minimizar Javascript se pueden categorizar en 3 grupos: herramientas en línea, herramientas GUI y herramientas de línea de comandos.

Con las herramientas en línea, generalmente se trata de pegar su código y copiar el resultado inmediatamente.
Las herramientas GUI a menudo contienen mucha más funcionalidad; La minificación JS es solo una pequeña parte de lo que hacen..
Las herramientas de línea de comando también suelen ser más completas y ofrecen minificación como módulo..

Herramientas en linea

javascript-minifier.com es una herramienta atractiva con una API
Online YUI Compressor es una herramienta más poderosa que utiliza el compresor YUI, con muchas opciones y capacidades de minificación de CSS también.
jscompress.com es un minificador de bajo coste pero hace el trabajo
jsmini.com es otra opción simple pero totalmente utilizable

Lo mejor de las herramientas en línea es la velocidad con la que puede trabajar con ellas. Las herramientas complejas de la GUI y la línea de comandos se reducen más rápido, pero necesita tener un proyecto configurado para que funcione correctamente. La desventaja de estas herramientas es que en su mayoría proporcionar 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, SASS compilation, JS Minification y mucho más.
Prepros es una aplicación de pago multiplataforma que le brinda aún más opciones
Codekit es mi aplicación de elección. Es una aplicación de pago solo para Mac que ofrece compilación de códigos, minificación, un servidor de vista previa, gestión de paquetes Bower y mucho más.
AjaxminGui es una herramienta gratuita de Windows de un solo propósito para minimizar su JS
UltraMinifier es una aplicación gratuita para OS X que minimiza CSS y JS con solo arrastrar y soltar
Smaller es una herramienta de OS X que minimiza y concatena archivos por ti.

He mencionado dos tipos de aplicaciones GUI aquí. Las aplicaciones simples de minificación en un solo paso son muy parecidas a sus contrapartes en línea. Son extremadamente rápidos de usar, ya que solo puede arrastrar y soltar archivos en ellos, sin necesidad de configuración. Dicho esto, ellos proporcionar prácticamente ninguna personalización.

Las herramientas de GUI más grandes (Prepros, Koala, Codekit) son excelentes para administrar proyectos y ofrecerle un poco más de opciones de compresión, pero lo hacen. Necesito un poco de configuración. Una minificación rápida de JS tomaría unos 20 segundos de configuración, lo que es mucho, en comparación con el proceso de 2 segundos de las herramientas de GUI en línea o simples.

Por otro lado, le ofrecen más funciones en general y le brindan automatización. Sus archivos JS se minimizarán cada vez que los guarde, sin necesidad de minimizarlos manualmente. Si está desarrollando algo en Javascript, este es definitivamente el camino a seguir..

Herramientas de línea de comandos

Minify es para aquellos que desean minimizar JS desde la línea de comandos pero no desean configurar nada sofisticado en Grunt o Gulp
Uglify.js que hemos mencionado anteriormente también está disponible como una herramienta de línea de comandos independiente
Grunt tiene una extensión para minificación de Javascript llamada grunt-contrib-uglify
Gulp también tiene minificación JS utilizando Uglify.js a través de gulp-uglify

¡Las herramientas de línea de comandos no son solo para los geeks de Linux! No soy muy bueno en la terminal, pero configurar cosas como Grunt y Gulp es fácil a través de su excelente documentación. La ventaja de las herramientas de la línea de comandos es la increíble cantidad de flexibilidad que tiene desde las opciones hasta la salida..

Por otro lado, hay una poco de una curva de aprendizaje. Acostumbrarse a la línea de comandos. requiere algo de práctica (no mucha) que encontrará restrictiva Antes de comenzar a disfrutar de los beneficios..

Visión general

Si eres nuevo en el desarrollo web, recomendaría una de las tres primeras herramientas GUI. Le ayudarán a administrar sus proyectos en general y le ofrecerán mucho más que solo la minificación de JS..

Si eres un profesional experimentado probablemente deberías estudiar Grunt o Gulp Como estos ofrecen el mayor control sobre las tareas de automatización. Si necesitas minificar un script rápidamente sin configurar un proyecto, Las herramientas de la línea de comandos pueden ahorrarle mucho tiempo..

Cada grupo de herramientas tiene sus pros y sus contras y, en verdad, probablemente terminará usando una de cada una en algún momento u otro. Tenga en cuenta que cuando esté en un entorno de producción, siempre debe minimizar su Javascript y CSS.!