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!