¿Qué es Closure Compiler?

Closure Compiler es una herramienta de optimización y minificación de JavaScript creada por Google. A diferencia de los minificadores tradicionales, realiza análisis estático de tipos, eliminación de código muerto y renombrado avanzado de símbolos, lo que permite reducir el tamaño del bundle y mejorar el rendimiento de la aplicación.

Se ofrece en tres modos:

• WHITESPACE_ONLY: solo elimina espacios y comentarios.
• SIMPLE_OPTIMIZATIONS: elimina código muerto y realiza renombrado seguro.
• ADVANCED_OPTIMIZATIONS: análisis de tipos, inlining, renombrado agresivo y eliminación de código no usado.

Instalación y Configuración Inicial

Closure Compiler está disponible como jar, npm package y como binario Docker. A continuación, los métodos más usados:

npm install --save-dev google-closure-compiler

wget https://repo1.maven.org/maven2/com/google/javascript/closure-compiler/v20240502/closure-compiler-v20240502.jar -O closure-compiler.jar
java -jar closure-compiler.jar --js src/**/*.js --js_output_file dist/app.min.js --compilation_level SIMPLE_OPTIMIZATIONS

También puedes usar la imagen oficial de Docker:

docker run --rm -v $(pwd):/src google/closure-compiler \
  --js /src/src/**/*.js \
  --js_output_file /src/dist/app.min.js \
  --compilation_level ADVANCED_OPTIMIZATIONS

Primeros Pasos: Ejemplos Prácticos en JavaScript

Veamos cómo el mismo código se transforma bajo los diferentes niveles de compilación.

/**
 * Calcula la suma de los números pares en un arreglo.
 * @param {Array} arr
 * @return {number}
 */
function sumEven(arr) {
  var total = 0;
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {
      total += arr[i];
    }
  }
  return total;
}
// Export para uso externo
export { sumEven };

function a(b){var c=0;for(var d=0;d

function a(b){var c=0;for(var d=0;d

Puedes probar rápidamente con npx google-closure-compiler usando la opción --compilation_level que prefieras.

Comparativa: Closure Compiler vs. UglifyJS vs. Terser

En la siguiente tabla de dos columnas se resumen las principales diferencias en cuanto a tamaño del bundle, velocidad de compilación y nivel de optimización.

Mejores Prácticas y Configuración Avanzada

1️⃣ Usa JSDoc para tipos

/** @type {number} */
let contador = 0;

Los tipos permiten que el compilador elimine código que nunca será usado y detecte errores antes de tiempo.

2️⃣ Configura externs cuando usas APIs externas

java -jar closure-compiler.jar \
  --js src/**/*.js \
  --externs externs/google_maps.js \
  --compilation_level ADVANCED_OPTIMIZATIONS

Los archivos externs informan al compilador que ciertos símbolos son proporcionados en tiempo de ejecución (por ejemplo, la API de Google Maps).

3️⃣ Genera reportes de renombrado y de tamaños

java -jar closure-compiler.jar \
  --js src/**/*.js \
  --compilation_level ADVANCED_OPTIMIZATIONS \
  --property_renaming_report reports/props.txt \
  --output_wrapper "(function(){%output%}).call(this);"

Estos reportes son útiles para depurar problemas de breakage después de la compilación.

4️⃣ Habilita --language_out y --language_in

Controla la versión de ECMAScript objetivo. Ejemplo: compilar código ES2022 a ES5 para navegadores legacy:

java -jar closure-compiler.jar \
  --js src/**/*.js \
  --language_in ECMASCRIPT_2022 \
  --language_out ECMASCRIPT5 \
  --compilation_level SIMPLE_OPTIMIZATIONS

Resolución de Problemas Comunes

• El código se rompe después de ADVANCED_OPTIMIZATIONS: Verifica que todas las funciones/propiedades públicas estén declaradas en externs o exportadas con goog.exportSymbol / export.
• Errores de tipo JSDoc: Usa --jscomp_error=checkTypes para que el compilador falle en tiempo de compilación y no en producción.
• Mapa de origen (source map) no se genera: Añade --create_source_map=dist/app.min.js.map y enlaza el mapa en tu HTML.
• Compilación lenta en CI: Cachea el .jar y usa la opción --conformance_configs para limitar análisis estático a lo esencial.

Seguridad y Compatibilidad

Closure Compiler elimina código muerto y renombra variables, lo que dificulta la lectura del código y puede actuar como una capa de ofuscación ligera. Sin embargo, no sustituyes a una estrategia de seguridad completa.

• Never embed secrets (API keys) en el código fuente; usa variables de entorno.
• Revisa los externs antes de publicar para asegurarte de que no se eliminen APIs críticas.
• Prueba siempre en los navegadores objetivo; el modo ADVANCED puede generar código que depende de funciones de ES5 o superiores.