A la hora de distribuir las librerías JavaScript una buena práctica es comprimirlas para reducir su tamaño. Así se consigue que pesen menos y carguen más rápido. La compresión del código JavaScript se puede llevar a cabo con el paquete uglify. En esta entrada de la serie creación de una librería JavaScript se explicará cómo instalarlo y utilizarlo.
Esta entrada pertenece a la serie “Creación de una librería JavaScript” cuyo código se puede encontrar en la cuenta de GitHub de Analytics Lane. Serie compuesta por las siguientes entradas:
- Creación de una librería JavaScript
- Estructurar las funciones JavaScript
- Pruebas unitarias en JavaScript
- Rango en pruebas unitarias en JavaScript
- Cobertura de las pruebas unitarias en JavaScript
- Medir la calidad del código JavaScript
- Compresión del código JavaScript
- Ejecutar múltiples scripts npm
Instalación del uglify en Node
Antes de comprimir el código JavaScript es necesario instalar el módulo uglify. En el buscador de npm se puede observar que existen diferentes versiones de este. Por ejemplo, existe uglify-js, que soporta el estándar ECMAScript 5, y uglify-js, que soporta el estándar ECMAScript 6. En jslane se utiliza ECMAScript 6, como quedó patente en la entrada anterior, por lo que es necesario instalar uglify-js. A diferencia de los paquetes anteriores este es necesario instalarlo como dependencia global. Para ello en máquinas UNIX se utilizará el comando
sudo npm install uglify-es -g
Mientras que en Windows el comando sudo se debe omitir.
npm install uglify-es -g
Compresión del código JavaScript
Una vez instalado el módulo es posible comprimir los archivos JavaScript para reducir su tamaño. A modo de prueba se puede comprobar cómo afecta esto al archivo jslane.js ubicado en la carpeta lib. Actualmente este archivo contiene el siguiente código.
Para comprimirlo únicamente es necesario escribir la siguiente línea en la terminal.
uglifyjs ./lib/jslane.js -o ./lib/jslane.min.js
En la que se le indica a uglifyjs que comprima el archivo y, mediante la opción -o, se le indica que el resultado lo guarde en jslane.min.js. El resultado es un nuevo archivo de 87 bytes frente al original de 135 bytes.
Opciones en uglifyjs
El comando uglifyjs admite múltiples opciones con las que se puede obtener un grado mayor de compresión. Entre ellas dos de las más interesantes son
--compress: Activa la compresión de funciones JavaScript reduciendo aún más el tamaño de los archivos.--mangle: Cambia el nombre de los objetos para que ocupen un único carácter, mejorando aún más la compresión del archivo. Además de ofuscar el código.
Así con estas dos opciones, se puede escribir en la línea de comando
uglifyjs ./lib/jslane.js -o ./lib/jslane.min.js --compress –mangle
Con lo que se obtiene un nuevo archivo jslane.min.js de solo 64 bytes.
Comprimir la librería
Realmente el archivo que es interesante comprimir es la librería, ya que es el archivo que se utilizará en producción. El resto son básicamente para desarrollo. Por lo que para su compresión se utilizará la siguiente combinación de comandos.
> browserify index.js --standalone jslane -o ./dist/jslane.js
> uglifyjs ./dist/jslane.js -o ./dist/jslane.min.js --compress --mangle
Recordemos que el primer comando compila la librería, mientras que el segundo permite crear una versión comprimida. En el caso de la librería el archivo original ocupa 1945 bytes mientras que el comprimido 1268. Lo que supone un ahorro del 35% del espacio original.
Creación de un script
Al igual que en los casos anteriores se puede crear un script para simplificar el proceso de compresión. Para ello se creará un nuevo script llamado minimize y con el siguiente comando uglifyjs ./dist/jslane.js -o ./dist/jslane.min.js --compress --mangle. Recordando que ya se había definido un script llamado build para compilar la librería el proceso anterior se puede lanzar simplemente utilizando los siguientes comandos.
> npm run build
> npm run minimize
Conclusiones
En esta séptima entrega se ha visto cómo realizar la compresión del código JavaScript con uglifyjs. La compresión permite reducir el tamaño de los archivos y, por lo tanto, reducir el tiempo de carga de las librerías. En la próxima y ultima entrega se vera cómo ejecutar múltiples scripts npm.
Deja una respuesta