• Ir al contenido principal
  • Skip to secondary menu
  • Ir a la barra lateral primaria
  • Ir al pie de página
  • Inicio
  • Secciones
    • Ciencia de datos
    • Criptografía
    • Herramientas
    • Noticias
    • Opinión
  • Programación
    • JavaScript
    • Julia
    • Matlab
    • Python
    • R
  • Boletín
  • Contacto
  • Acerca de Analytics Lane
  • Tienda
    • Libros
    • Equipamiento de oficina
    • Equipamiento en movilidad
    • Tiendas afiliadas
      • AliExpress
      • Amazon
      • GearBest
      • GeekBuying
      • JoyBuy

Analytics Lane

Ciencia e ingeniería de datos aplicada

  • Ciencia de datos
  • Criptografía
  • Python
  • Matlab
  • R
  • Julia
  • JavaScript
  • Herramientas
  • Opinión
  • Noticias

Compresión del código JavaScript (Creación de una librería JavaScript 7ª parte)

marzo 22, 2019 Por Daniel Rodríguez Dejar un comentario

JavaScript

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.

¿Te ha parecido de utilidad el contenido?

¡Puntúalo entre una y cinco estrellas!

Puntuación promedio 0 / 5. Votos emitidos: 0

Ya que has encontrado útil este contenido...

¡Síguenos en redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

Contenido relacionado

Archivado en:JavaScript Etiquetado con:node

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

I accept the Terms and Conditions and the Privacy Policy

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Publicidad


Barra lateral primaria

Suscríbete a nuestro boletín

Suscríbete al boletín semanal para estar al día de todas las publicaciones.

Política de Privacidad

¡Síguenos en redes sociales!

  • facebook
  • github
  • telegram
  • pinterest
  • rss
  • tumblr
  • twitter
  • youtube

Publicidad

Tiendas afiliadas

Ayúdanos realizando tus compras sin coste adicional con los enlaces de la tienda. ¡Gracias!

Entradas recientes

Creación de un certificado Let’s Encrypt en Windows con Win-Acme

enero 22, 2021 Por Daniel Rodríguez Dejar un comentario

Aplicaciones de Node en producción con PM2

enero 20, 2021 Por Daniel Rodríguez Dejar un comentario

SQLite en Python

enero 18, 2021 Por Daniel Rodríguez Dejar un comentario

Publicidad

Es tendencia

  • Excel en Python Guardar y leer archivos Excel en Python bajo Python
  • Seleccionar filas y columnas en Pandas con iloc y loc bajo Python
  • Unir y combinar dataframes con pandas en Python bajo Python
  • ¿Cómo eliminar columnas y filas en un dataframe pandas? bajo Python
  • Operaciones de filtrado de DataFrame con Pandas en base a los valores de las columnas bajo Python

Publicidad

Lo mejor valorado

5 (3)

Ordenar una matriz en Matlab en base a una fila o columna

5 (3)

Automatizar el análisis de datos con Pandas-Profiling

5 (5)

Diferencias entre var y let en JavaScript

5 (6)

Operaciones de filtrado de DataFrame con Pandas en base a los valores de las columnas

5 (3)

Unir y combinar dataframes con pandas en Python

Publicidad

Comentarios recientes

  • Daniel Rodríguez en Calculadora de probabilidades de ganar a la lotería
  • abel en Calculadora de probabilidades de ganar a la lotería
  • David Arias en Diferencias entre regresión y clasificación en aprendizaje automático
  • Juan Aguilar en Archivos JSON con Python: lectura y escritura
  • Camilo en Contar palabras en una celda Excel

Publicidad

Footer

Secciones

  • Ciencia de datos
  • Criptografía
  • Herramientas
  • Noticias
  • Opinión

Programación

  • JavaScript
  • Julia
  • Matlab
  • Python
  • R

Analytics Lane

  • Acerca de Analytics Lane
  • Boletín de noticias
  • Contacto
  • Lo más popular
  • Tienda

Tiendas Afiliadas

  • AliExpress
  • Amazon
  • BangGood
  • GearBest
  • Geekbuying
  • JoyBuy

Sobre de Analytics Lane

En Analytics Lane tratamos de explicar los principales conceptos de la ciencia e ingeniería de datos con un enfoque práctico. Los principales temas tratados son ciencia de datos, ingeniería de datos, inteligencia artificial, machine learning, deep learning y criptografía. Además, también se habla de los principales lenguajes de programación y herramientas utilizadas por los científicos e ingenieros de datos.

Tiendas afiliadas

Ayúdanos realizando tus compras sin coste adicional con los enlaces de la tienda. ¡Gracias!

Amazon

2018-2020 Analytics Lane · Términos y condiciones · Política de Cookies · Política de Privacidad · Herramientas de privacidad · Contacto