¿Qué es la minificación?

También llamado: minificar, minify, bundling

El código se escribe para que lo lean personas: con sangría, comentarios y nombres descriptivos. El navegador no necesita nada de eso. Al minificar, se obtiene un archivo equivalente pero mucho más pequeño.

Ejemplo

Antes:

// Calcula el precio con IVA
function precioConIva(precio, tipo = 0.21) {
  const total = precio * (1 + tipo);
  return Math.round(total * 100) / 100;
}

Después:

function precioConIva(n,t=.21){return Math.round(n*(1+t)*100)/100}

Con herramientas como esbuild, Terser o Lightning CSS se hace en un paso de la construcción:

$ npx esbuild src/app.js --bundle --minify --outfile=dist/app.min.js

Cosas que conviene saber

• Se complementa con la compresión Gzip o Brotli; las dos juntas dan el mejor resultado.
• Los mapas de código (source maps) permiten depurar en el navegador viendo el código original aunque se sirva el minificado.
• En WordPress, muchos plugins de caché minifican automáticamente; si algo se rompe tras activarlo, prueba a desactivar la minificación de JavaScript o la combinación de archivos.

Errores habituales

• Editar a mano el archivo .min.js: el siguiente proceso de construcción sobrescribirá los cambios.

¿Tienes un producto o servicio relacionado con Minificación? Anúnciate en este término.

Categorías: Frontend