Guía de minificación JavaScript

¿Por qué minificar tu JavaScript?

La minificación JavaScript elimina espacios y renombra símbolos para reducir el tamaño de los archivos antes del navegador. Esta guía cubre la configuración de Terser, la config Webpack en producción y cómo el tree shaking complementa la minificación — y cuándo un paso rápido con un minificador JavaScript en línea basta para scripts pequeños.

Reducción del 60-80% del tamaño de los archivos JavaScript

Mejora del First Contentful Paint (FCP) de 200-500ms

Ahorros significativos en ancho de banda y costes de CDN

Mejor puntuación en los Core Web Vitals de Google

Experiencia de usuario optimizada, sobre todo en móvil

Impacto real en el rendimiento

Métricas de rendimiento concretas

Datos reales de optimización en un proyecto e-commerce:

Before optimization

Tamaño de archivos: 2.3 MB
Tiempo de carga: 3.2s
Tasa de rebote: 68%
Tasa de conversión: 2.1%

After optimization

Tamaño de archivos: 580 KB
Tiempo de carga: 1.8s
Tasa de rebote: 42%
Tasa de conversión: 3.7%

Impacto en el SEO

Google usa los Core Web Vitals como factor de ranking. La minificación mejora directamente estas métricas:

LCP (Largest Contentful Paint): -40% de media

FID (First Input Delay): -60% gracias a menos parsing

CLS (Cumulative Layout Shift): reducción de reflows

TTI (Time to Interactive): -35% de tiempo de espera

Puesta en marcha de Terser

Instalación y configuración básica

Terser es el sucesor de UglifyJS, más rápido y con mejor soporte ES6+.

Instalación

npm install --save-dev terser

Configuración básica

const terser = require('terser');

const result = await terser.minify(code, {
  compress: {
    drop_console: true,
    drop_debugger: true,
    pure_funcs: ['console.log']
  },
  mangle: {
    toplevel: true
  }
});

Script NPM personalizado

// package.json
{
  "scripts": {
    "build:js": "terser src/js/*.js -o dist/bundle.min.js",
    "build:prod": "npm run build:js && npm run build:css"
  }
}

Configuración avanzada para producción

Configuración óptima para un entorno de producción con source maps y optimizaciones avanzadas.

Configuration

const terserConfig = {
  compress: {
    arguments: true,
    booleans_as_integers: true,
    drop_console: true,
    drop_debugger: true,
    ecma: 2020,
    keep_infinity: true,
    passes: 3,
    pure_funcs: ['console.log', 'console.info'],
    unsafe: true,
    unsafe_arrows: true,
    unsafe_comps: true,
    unsafe_math: true
  },
  mangle: {
    toplevel: true,
    properties: {
      regex: /^_/
    }
  },
  format: {
    comments: false,
    ecma: 2020
  },
  sourceMap: {
    filename: 'bundle.min.js',
    url: 'bundle.min.js.map'
  }
};

Uso

const fs = require('fs');
const terser = require('terser');

async function minifyFile(inputPath, outputPath) {
  const code = fs.readFileSync(inputPath, 'utf8');
  const result = await terser.minify(code, terserConfig);
  
  fs.writeFileSync(outputPath, result.code);
  if (result.map) {
    fs.writeFileSync(outputPath + '.map', result.map);
  }
  
  console.log(`Minified: ${inputPath} -> ${outputPath}`);
  console.log(`Size reduction: ${((code.length - result.code.length) / code.length * 100).toFixed(1)}%`);
}

Alternativa con UglifyJS

Instalación y uso

UglifyJS sigue siendo una opción viable, sobre todo para proyectos más antiguos.

Instalación

npm install --save-dev uglify-js

Configuración UglifyJS

const UglifyJS = require('uglify-js');

const result = UglifyJS.minify(code, {
  compress: {
    drop_console: true,
    drop_debugger: true,
    pure_funcs: ['console.log']
  },
  mangle: true,
  output: {
    comments: false
  }
});

Integración con Webpack

Configuración Webpack con Terser

Integración profesional en un workflow Webpack moderno.

Configuration Webpack

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            pure_funcs: ['console.log']
          },
          mangle: {
            toplevel: true
          }
        },
        extractComments: false
      })
    ]
  }
};

package.json

{
  "scripts": {
    "build": "webpack --mode=production",
    "build:analyze": "webpack-bundle-analyzer dist/static/js/*.js"
  },
  "devDependencies": {
    "terser-webpack-plugin": "^5.3.0",
    "webpack-bundle-analyzer": "^4.9.0"
  }
}

Técnicas avanzadas

Tree shaking y Dead Code Elimination

Eliminar el código muerto y optimizar los imports para una minificación máxima.

Usar imports ES6 específicos: `import { specificFunction } from 'library'`

Evitar los imports wildcard: `import * as utils from 'utils'`

Configurar Webpack para el tree shaking

Usar anotaciones de pure functions

Optimización de polyfills

Minimizar el impacto de los polyfills en el tamaño del bundle.

Antes

import 'core-js/stable';
import 'regenerator-runtime/runtime';
// 50KB de polyfills cargados

Después

// Polyfills condicionales
if (!Array.prototype.includes) {
  // Polyfill específico - 2KB
}
// Carga bajo demanda

Monitoring y métricas

Herramientas de medición

Supervisa el impacto de tus optimizaciones con estas herramientas:

Lighthouse: auditoría completa de rendimiento

WebPageTest: tests detallados de carga

Bundle Analyzer: visualización del tamaño de los bundles

Core Web Vitals: métricas Google en tiempo real

Alertas automáticas

Configura alertas para mantener el rendimiento.

Configuration GitHub Actions

// .github/workflows/performance.yml
name: Performance Check
on: [push]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Lighthouse CI
        run: |
          npm install -g @lhci/cli
          lhci autorun --upload.target=temporary-public-storage

Herramientas de minificación

Usa las herramientas de minificación gratis para optimizar tu código:

Minificador JavaScript

Minifica, desminifica y embellece JavaScript al instante.

Minificador CSS

Optimiza hojas de estilo CSS para un mejor rendimiento.

Formateador JSON

Formatea JSON minificado con sangría personalizable — herramienta dedicada del cluster JSON.

Optimizador SVG (SVGO)

Optimización SVGO profunda más allá del minify rápido — presets safe, default y aggressive.

Utilidades de codificar y escapar

Prepara cadenas para URLs, markup o APIs — todo permanece en el navegador:

Base64

Codifica o decodifica texto UTF-8 en Base64, incluido el alfabeto URL-safe.

Codificar URL

Codifica en porcentaje componentes de consulta o URIs con encodeURIComponent, encodeURI o form-urlencoded.

Decodificar URL

Decodifica cadenas percent-encoded — componente, URI completa o form-urlencoded.

Entidades HTML

Escapa o quita el escape de &, <, comillas y entidades con nombre antes de insertar markup.

Conclusión

La minificación JavaScript no es una opción, es una necesidad. Con las buenas prácticas y las herramientas adecuadas, puedes reducir de forma significativa el tamaño de tus archivos al tiempo que mejoras la experiencia de usuario y el posicionamiento.

Implementa Terser en tu workflow de build

Configura alertas de rendimiento automáticas

Mide con regularidad el impacto en los Core Web Vitals

Prueba en distintos dispositivos y conexiones

Documenta tus optimizaciones para el equipo

Guía de minificación JavaScript — Terser y Webpack

¿Por qué minificar tu JavaScript?

Impacto real en el rendimiento

Puesta en marcha de Terser

Instalación

Configuración básica

Script NPM personalizado

Configuration

Uso

Alternativa con UglifyJS

Instalación

Configuración UglifyJS

Integración con Webpack

Configuration Webpack

package.json

Técnicas avanzadas

Antes

Después

Monitoring y métricas

Configuration GitHub Actions

Minificador JavaScript

Minificador CSS

Formateador JSON

Optimizador SVG (SVGO)

Base64

Codificar URL

Decodificar URL

Entidades HTML

Conclusión

Artículos relacionados