wandres.dev
ONTOLOGÍA · El mapa del build

La ontología del build frontend

El mapa mental del camino a producción: módulos, package managers, Vite, el bundler, empaquetado de librerías, monorepos, remote caching y deploy.

⏱ 12 min

Escribir código es la mitad del trabajo; la otra mitad es convertir ese código en algo que un navegador cargue rápido, en cualquier parte del mundo, sin que el usuario espere. Ese camino —de tu carpeta src a un CDN en el edge— pasa por package managers, un dev server, un bundler, un empaquetador y, a escala, un sistema de caché distribuida. Este mapa te da la visión aérea antes de recorrerlo.

🎯 Al terminar esta lección sabrás
  • Ver el mapa mental completo del build frontend moderno.
  • Entender las capas: paquetes, Vite, bundler, empaquetado, monorepo, deploy.
  • Situar el toolchain en Rust de 2026 (Vite 8, Rolldown, Oxc).
  • Empezar con el modelo mental correcto del camino a producción.

El territorio, de un vistazo

mindmap
root((Build y Produccion))
  Paquetes
    ESM y CommonJS
    pnpm y el store
    workspaces y catalogs
    npm registry
  Vite
    Dev server ESM
    HMR
    optimizeDeps
    Environment API
  Bundler
    Rollup
    Rolldown en Rust
    esbuild SWC Oxc
    Tree shaking
    Code splitting
  Empaquetado
    Librerias ESM CJS
    exports y tipos
    Changesets
  Monorepo
    Turborepo
    Nx
    Remote caching
    Module Federation
  Produccion
    Bundle budgets
    CI CD
    Deploy al edge

Las ideas clave

📦

Del paquete al grafo

Todo empieza en módulos (ESM) y paquetes (pnpm). Un bundler los une en un grafo, elimina lo que no se usa (tree shaking) y lo divide en trozos que se cargan bajo demanda (code splitting).

⚡

Vite: dos naturalezas

En desarrollo, Vite sirve ESM nativo sin empaquetar, para un arranque instantáneo. En producción, empaqueta con un bundler optimizado. Entender esa dualidad es clave.

🦀

Rust se come el toolchain

En 2026 el toolchain se reescribió en Rust: Rolldown (bundler, sobre Oxc) es el motor de Vite 8, y Oxc/oxlint/oxfmt sustituyen a ESLint y Prettier con 50-100x de velocidad.

🗄️

A escala, la caché lo es todo

En un monorepo grande, la victoria no es compilar rápido: es NO compilar. Turborepo y Nx cachean la salida de cada tarea y la comparten (remote caching) entre máquinas y CI.

Por qué importa en 2026

⚡
No compilar es la optimización definitiva

Durante años la carrera fue “compilar más rápido”: de webpack (JavaScript) a esbuild (Go) a Rolldown y Oxc (Rust), cada salto redujo los tiempos de build en un orden de magnitud. Pero hay un techo: el build más rápido es el que no ocurre. Ahí es donde el caching cambia el juego. Un monorepo con Turborepo o Nx hashea las entradas de cada tarea —los archivos, las dependencias, las variables de entorno— y, si nada cambió, replica el resultado cacheado en milisegundos en lugar de recompilar. Con remote caching, el trabajo que hizo tu compañera esta mañana lo reutiliza tu CI esta tarde. El resultado es que un pipeline que tardaba veinte minutos pasa a tardar veinte segundos cuando el 90% del repo no cambió. Interiorizar esta jerarquía —módulos rápidos, bundler rápido, y por encima de todo, no repetir trabajo— es lo que separa a quien “hace que compile” de quien diseña el build de un producto que escala a cientos de personas. Eso sí: cachear es difícil de hacer bien, y un caching mal aislado puede envenenarse (el CVE CREEP de 2025 lo demostró). Poder y peligro, como siempre.

El camino

  • Niveles 1–9 · Fundamentos — por qué el build, módulos ESM/CJS, pnpm, package.json, resolución, lockfiles, workspaces, catalogs y el registro npm.
  • Niveles 10–16 · Vite — el dev server, HMR, config, optimizeDeps, plugins, la Environment API y dev vs build.
  • Niveles 17–25 · El bundler — el grafo, Rollup, Rolldown, esbuild/SWC/Oxc, tree shaking, code splitting, lazy loading, minificación y assets.
  • Niveles 26–30 · Librerías — empaquetar, exports, herramientas de build, publicar y Changesets.
  • Niveles 31–37 · Monorepos y caching — monorepos, Turborepo, remote caching, Nx, elegir, el hashing de la caché y Module Federation.
  • Niveles 38–40 · Producción — optimización y budgets, CI/CD, y el nivel Dios de síntesis.
⚔️ Sitúate en el mapa
  1. Estudia el mapa mental y localiza qué capa te resulta más opaca hoy: ¿paquetes, bundler, o caching?
  2. Abre un proyecto tuyo y mira su package.json y su lockfile: ¿sabes qué hace cada dependencia y por qué está ahí?
  3. Ejecuta su build y cronométralo. Esa cifra es tu línea base; al terminar el track sabrás exactamente por qué tarda lo que tarda.
  4. Comprométete con la mentalidad: entender el camino de src a producción es entender la mitad invisible del frontend.