Consigue una mejor compresión con UglifyJS

UglifyJS es ampliamente conocido como el más potente y eficaz compresor de código JavaScript disponible en la red. La compresión por defecto de UglifyJS, --compress, está bien pero realiza todo el trabajo sucio. Hay un gran número de directrices adicionales para la opción compress, incluyendo:

  • sequences: une sentencias simples consecutivas usando el operador coma
  • properties: reescribe el acceso a propiedades usando el caracter punto. Por ejemplo: foo["bar"] → foo.bar
  • dead_code: elimina el código inalcanzable
  • drop_debugger: elimina el debugger
  • unsafe (por defecto:false): aplica transformaciones "unsafe" (ya hablaremos de ello más adelante)
  • comparison: aplica ciertas optimizaciones para nodos binarios, por ejemplo: (a <= b) â†' a> b (sólo cuando es unsafe), intenta negar nodos binarios, por ejemplo, a = !b && !c && !d && !e → a=!(b||c||d||e) etc.
  • evaluate: intenta evaluar expresiones constantes
  • booleans: optimizaciones para operaciones booleanas, por ejemplo: !!a ? b : c → a ? b : c
  • loops: optimizaciones para bucles do, while y for cuando pueden estáticamente determinar la condición
  • unused: eliminación de funciones y variables sin referenciar
  • hoist_fun: Declaración de funciones hoist
  • hoist_vars (por defecto:false): declaración de variables hoist
  • if_return: optimizaciones para if/return y if/continue
  • cascade: pequeña optimización para sentencias, transforma x, x en x y x = algo(), x en x = algo()
  • warnings: muestra warnings cuando encuentra código inservible o declaraciones que no se utilizan
  • negate_iife: niega las "Immediately-Called Function Expressions" donde se descarta el valor de retorno, para evitar los parens que el generador de código inserta
  • pure_getters (por defecto:false) Si lo estableces a true, UglifyJS asumirá que el objeto de acceso a la propiedad (por ejemplo foo.bar o foo["bar"]) no tiene efectos colaterales
  • pure_funcs (por defecto: null) Puedes pasar un array de nombres y UglifyJS va suponer que esas funciones no producen efectos colaterales. OJO: no comprobará si el nombre se redefine en su alcance. Por ejemplo var q = Math.floor(a / b). Si la variable q no se utiliza en otros lugares, UglifyJS la eliminará, pero seguirá manteniendo que Math.floor (a / b), sin saber lo que hace. Puede pasar pure_funcs: ['Math.floor'] para hacerle saber que esta función no producirá ningún efecto colateral. Esta implementación añade algo de sobrecarga (la compresión será más lenta).
  • drop_console (por defecto: false) Si lo estableces a true, descartarás las llamadas a console.*

Así que en lugar de hacer simplemente una compresión básica, comprime al máximo tus archivos JavaScript alterando booleanos, eliminando usos de variables innecesario, eliminando código inservible, y mucho más. He aquí un ejemplo de un caso utilizando el API NodeJS:

var UglifyJS = require('uglify-js');
var fs = require('fs');

var result = UglifyJS.minify('site.js', {
	mangle: true,
	compress: {
		sequences: true,
		dead_code: true,
		conditionals: true,
		booleans: true,
		unused: true,
		if_return: true,
		join_vars: true,
		drop_console: true
	}
});

fs.writeFileSync('site.min.js', result.code);

Puede pasar los valores de compresión a través de línea de comandos también. Este artículo no está destinado a ser innovador, pero si a crear conciencia de que el simple uso de --compress no optimiza la minificación potencial de cualquier código. Si vas a comprimir tu código JavaScript, ¡hazlo por todo lo alto!

Y este ha sido el tutorial sobre cómo conseguir una mejor compresión con UglifyJS, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

 

 

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.