JavaScript
Explica cómo bundlers y transpilers transforman módulos y sintaxis, y cómo los source maps conectan el código generado con su fuente original.
El código fuente que escribes puede no ser el mismo archivo que ejecuta el runtime. Herramientas pueden resolver módulos, transformar sintaxis, dividir chunks y generar mapas hacia el origen.
source files
↓ resolver
module graph
↓ transformar
chunks/assets
↓ ejecutar
debug con source mapsUn bundler recorre el grafo y produce archivos de salida.
Puede:
Convierte una sintaxis o lenguaje fuente a otro JavaScript objetivo.
JavaScript moderno
↓
JavaScript compatible con runtime objetivoNo toda API nueva puede transformarse solo con sintaxis. Una característica de runtime puede necesitar polyfill.
Añade una API que el entorno no ofrece.
if (!Array.prototype.someMethod) {
// Implementación compatible.
}Un polyfill debe respetar el contrato del estándar. Añadir métodos globales propios con nombres futuros puede crear conflictos.
Chrome moderno
Node 24
navegadores con soporte definidoEl target determina qué sintaxis se conserva, qué se transforma y qué polyfills pueden requerirse.
Analiza imports y exports estáticos para retirar código no utilizado.
export function used() {}
export function unused() {}La efectividad disminuye con efectos globales, acceso dinámico o formatos difíciles de analizar.
const module = await import("./editor.js");Puede generar un chunk cargado bajo demanda. Muchos chunks pequeños también añaden overhead; mide la estrategia.
Reduce nombres y estructura para entrega.
function calculateTotal(items) {}Puede convertirse en una forma compacta. No debe cambiar el comportamiento observable correcto.
Relacionan posiciones del archivo generado con archivos fuente.
bundle.js:1:4920
↓ source map
src/orders.js:38:12Permiten breakpoints y stack traces legibles.
Beneficios:
Riesgos:
Pueden subirse de forma privada a una plataforma de observabilidad sin servirlos públicamente.
const apiUrl = import.meta.env.PUBLIC_API_URL;La forma exacta pertenece a la herramienta. Un valor insertado en frontend queda dentro del bundle y no es secreto.
Builds de desarrollo priorizan:
Builds de producción priorizan:
No diagnostiques rendimiento final únicamente desde el servidor de desarrollo.
Las herramientas no sustituyen probar el runtime objetivo. Pueden transformar sintaxis, pero APIs como Web Workers, IndexedDB o ciertos métodos deben existir o adaptarse.
import { feature } from "./index.js";Un barrel que reexporta muchos módulos con efectos puede hacer que el bundler incluya más código de lo esperado. Inspecciona el grafo y el bundle.
¿Por qué transformar optional chaining no añade automáticamente fetch a un navegador antiguo?
Porque optional chaining es sintaxis transformable. fetch es una API del entorno y necesita soporte nativo o un polyfill compatible.
Diseño de módulos y APIs públicas cierra el bloque con límites mantenibles y dependencias dirigidas.