¿Por qué reducir el código de JavaScript?

Al reducir el tamaño de los archivos, la minificación de JavaScript puede mejorar el rendimiento de las páginas web.

Objetivos de aprendizaje

Después de leer este artículo podrás:

  • Definir la minificación de JavaScript
  • Más información sobre la uglificación, la ofuscación y la encriptación

Contenido relacionado


¿Quieres saber más?

Suscríbase a theNET, el resumen mensual de Cloudflare sobre las ideas más populares de Internet.

Revisa la política de privacidad de Cloudflare para saber más sobre cómo Cloudflare gestiona tus datos personales.

Copiar enlace del artículo

Mejorar el rendimiento de tu sitio web con Cloudflare Pro y nuestros complementos de herramientas de velocidad

¿Qué es la minificación en JavaScript?

La minificación, también conocida como minimización, es el proceso de eliminar todos los caracteres innecesarios del código fuente de JavaScript sin alterar su funcionalidad. Esto incluye la eliminación de espacios en blanco, comentarios, y puntos y comas, junto con el uso de nombres de variables y funciones más cortos. La minificación del código JavaScript permite reducir el tamaño del archivo.

Por ejemplo, este es un bloque de código antes y después de la minificación:

Antes de la minificación, vemos ocho líneas de código

JavaScript sin minificación

Después de la minificación: una sola línea de código

JavaScript con minificación

La minificación acelera la carga de la página web, y se mejora así la experiencia del sitio web, haciendo felices tanto a los visitantes como a los motores de búsqueda.

¿En qué se diferencia la minificación de la ofuscación, la compresión, la encriptación o la uglificación?

  • Uglificación: básicamente es lo mismo que la minificación. Uglify JS es una biblioteca de JavaScript para minificar archivos de JavaScript. "Uglificar" un archivo JavaScript es minificarlo con Uglify. La uglificación mejora el rendimiento, pero reduce la legibilidad.
  • Encriptación: es el proceso de convertir los datos, llamados datos planos, en datos codificados. Estos datos encriptados, o codificados, se conocen como texto cifrado, y se necesita una clave secreta para poder descifrarlos. El navegador no puede ejecutar el código encriptado. La encriptación es una función de seguridad, y no reduce necesariamente el tamaño de un archivo.
  • Ofuscación: este proceso se emplea para ocultar la lógica de negocio. El código se modifica para que sea ilegible para los humanos. Esto dificulta la ingeniería inversa. La ofuscación se diferencia de la encriptación en que los ordenadores siguen siendo capaces de entender y ejecutar el código. La ofuscación se consigue al cambiar los nombres de las variables, funciones y miembros. La reducción resultante del tamaño del archivo también mejora el rendimiento, aunque este no es el objetivo principal de la ofuscación.
  • Compresión: la compresión de datos es un proceso que reduce el número de bits necesarios para representar los datos. La compresión de datos puede liberar un valioso espacio en los discos duros, acelerar la transferencia de archivos y reducir los costes de ancho de banda de la red. Algunos archivos, como los archivos de Microsoft Word, pueden comprimirse hasta un 90 % de su tamaño original.

¿Por qué los desarrolladores no escriben directamente código minificado?

La minificación da lugar a archivos compactos, lo cual hace que sea una buena práctica de rendimiento web. Entonces, ¿por qué no escribir código que ya esté minificado?

El código JavaScript está escrito por y para personas, que necesitan espacios en blanco, formato y comentarios para poder entender y depurar el código. Después de que se haya escrito el código, se puede usar un software de minificación para mejorar el rendimiento. Esto se debe a que los navegadores pueden ejecutar el código sin necesidad de entenderlo.

¿Cuáles son las desventajas de la minificación?

La minificación puede romper los scripts complicados por variables que dependen del sitio, como los temas, los plugins y el entorno del servidor. Además, la minificación debe hacerse con otros ajustes de rendimiento. Por sí sola, puede que no ofrezca ganancias significativas. La minificación también puede introducir errores que sean difíciles de depurar.

A pesar de estas desventajas, usualmente merece la pena intentar la minificación para las posibles ganancias de rendimiento. Descubre también cómo minificar CSS.