Saltar al contenido

Empezando con ECMAScript6

La minificación es un proceso diseñado para reducir el tamaño de los archivos que el navegador tiene que descargar (incluyendo archivos HTML, CSS y JavaScript). El objetivo es minimizar la cantidad de tiempo que el usuario tiene que esperar a que los recursos se descarguen. Los minificadores de JavaScript logran esto eliminando los comentarios, los espacios en blanco innecesarios, renombrando las variables para hacerlas más cortas, y así sucesivamente.

La minimización hace que el tamaño del archivo sea menor, pero también hace que el guión sea más difícil de leer para los humanos. Dicho esto, ya que ya tenemos los mapas de fuente establecidos, no necesitamos leer la salida compilada para la depuración, así que también podríamos minificar nuestro código.

Empezando con ECMAScript6
Empezando con ECMAScript6

Webpack tiene una opción de «modo de producción» que incluye la minificación del guión. Para habilitarla, sólo hay que añadir una bandera -p al script de construcción en el archivo package.json:

123 "scripts":{"build": "webpack --watch -p"},

json

Si descargaste el código del juego de la serpiente de ejemplo en la última sección, puedes probarlo abriendo el archivo ES6Snake.html. En Chrome, si abres la consola de desarrollo y abres el archivo bundle.js, te mostrará un mensaje acerca de que está minado y tiene mapas de origen asociados a él:

Puedes abrir los guiones originales en el árbol de archivos bajo el nodo webpack://:

Entonces puedes abrir uno de estos guiones, colocar puntos de ruptura y depurar como lo harías normalmente.