wandres.dev
De pnpm a producción

Domina Build & Producción
hasta nivel dios

El camino a producción: pnpm, módulos, Vite y Rolldown, bundling, code splitting, lazy loading, monorepos y remote caching (Turborepo/Nx).

La ruta

41 niveles, de novato a dios

Cada nivel construye sobre el anterior. Sin saltos, sin huecos.

Ontología Nivel 0 · El mapa del build

La visión aérea del camino a producción: módulos, package managers, Vite, el bundler, empaquetado, monorepos, caching y deploy. El mapa mental completo.

Mapa mentalToolchain

Por qué existe el build Nivel 1 · módulos y navegadores

El problema que resuelven las build tools: módulos, compatibilidad de navegadores, TypeScript/JSX, y una breve historia de webpack a Vite.

HistoriaProblemaMódulos

Módulos JS Nivel 2 · ESM vs CommonJS

El sistema de módulos: ESM (import/export), CommonJS (require), dynamic import, y la interoperabilidad entre ambos.

ESMCommonJSimport

Package managers Nivel 3 · npm, yarn, pnpm

Los gestores de paquetes: npm vs yarn vs pnpm, y por qué pnpm gana con su store de contenido enlazado y su ahorro de disco.

pnpmnpmstore

package.json a fondo Nivel 4 · campos y scripts

La anatomía de package.json: dependencies vs devDependencies, scripts, semver, engines, y los campos que importan.

package.jsonsemverscripts

Resolución de módulos Nivel 5 · exports e imports

Cómo Node y los bundlers resuelven un import: el campo exports, conditions, subpath imports, y los mapas de resolución.

exportsconditionsresolve

Lockfiles Nivel 6 · reproducibilidad

Los lockfiles (pnpm-lock.yaml): builds reproducibles, el árbol de dependencias, hoisting, y por qué NO borrarlos.

lockfilereproduciblehoisting

pnpm workspaces Nivel 7 · el monorepo básico

Workspaces de pnpm: varios paquetes en un repo, el protocolo workspace, --filter para tareas selectivas, y dependencias internas.

workspacesfilterworkspace:

pnpm catalogs Nivel 8 · versiones compartidas

Catalogs: definir versiones de dependencias una sola vez y referenciarlas; catalogMode strict/prefer/manual; coherencia a escala.

catalogscatalogModeversiones

El registro npm Nivel 9 · publicar paquetes

El registro: publicar, paquetes scoped, dist-tags, provenance (procedencia firmada), y alternativas como JSR.

npm publishscopedprovenance

Vite Nivel 10 · el dev server moderno

Qué es Vite: dev server sobre ESM nativo del navegador, arranque instantáneo, y por qué reemplazó a webpack en dev.

Vitedev serverESM

HMR Nivel 11 · hot module replacement

Cómo funciona el HMR: el grafo de módulos, aceptar actualizaciones sin recargar, preservar estado, y la API import.meta.hot.

HMRimport.meta.hotgrafo

Configurar Vite Nivel 12 · plugins y resolve

La config de Vite: plugins, resolve.alias, server, define, css, y cómo estructurar una configuración mantenible.

configpluginsalias

optimizeDeps Nivel 13 · pre-bundling

El pre-bundling de dependencias con esbuild: por qué Vite convierte CJS a ESM y agrupa deps para reducir peticiones en dev.

optimizeDepsesbuildpre-bundle

Ecosistema de plugins Nivel 14 · Rollup-compatible

El sistema de plugins de Vite (compatible con Rollup): hooks, transformar código, módulos virtuales, y escribir el tuyo.

pluginshooksvirtual

La Environment API Nivel 15 · multi-entorno y SSR

La Environment API de Vite: modelar cliente, SSR y edge como entornos separados; el nuevo modelo que unifica dev y build.

Environment APISSRedge

Dev vs build Nivel 16 · las dos mitades

Las dos naturalezas de Vite: ESM sin bundle en dev vs un bundle optimizado en build; por qué difieren y sus implicaciones.

devbuilddiferencias

Qué hace un bundler Nivel 17 · el grafo de módulos

La anatomía de un bundler: entry points, el grafo de módulos, resolución, transformación y la generación del output.

bundlergrafoentry

Rollup Nivel 18 · el modelo de plugins

Rollup: el bundler que definió el modelo; output formats (esm, cjs, iife), plugins, y por qué Vite lo usó en build.

Rollupoutputplugins

Rolldown Nivel 19 · el bundler en Rust

Rolldown 1.0 (sobre Oxc): el bundler en Rust que reemplaza a esbuild y Rollup en Vite 8; API compatible con Rollup y builds 10-30x más rápidos.

RolldownRustOxc

esbuild, SWC y Oxc Nivel 20 · el toolchain en Rust/Go

Los transformadores rápidos: esbuild (Go, bundler+transform), SWC (Rust, transform), Oxc (Rust, todo el toolchain); qué usa cada capa.

esbuildSWCOxc

Tree shaking Nivel 21 · eliminar código muerto

Tree shaking: análisis estático para quitar lo que no se usa; el papel de ESM, sideEffects en package.json, y sus límites.

tree shakingsideEffectsDCE

Code splitting Nivel 22 · dividir el bundle

Code splitting: dividir el código en chunks cargados bajo demanda; dynamic import, chunks compartidos, y la estrategia de división.

code splittingchunksdynamic import

Lazy loading Nivel 23 · cargar bajo demanda

Lazy loading: diferir código no crítico; por ruta y por componente, prefetch/preload, y el equilibrio con el número de peticiones.

lazyprefetchroute-based

Minificación Nivel 24 · terser, esbuild, oxc

Minificar el output: terser vs esbuild vs oxc-minify, mangling, compresión, y los source maps para depurar en producción.

minifysource mapsterser

Assets Nivel 25 · CSS, imágenes, fuentes

El pipeline de assets: importar CSS/imágenes/fuentes, hashing para cache-busting, inlining de assets pequeños, y CSS code splitting.

assetshashingCSS

Empaquetar una librería Nivel 26 · ESM, CJS, tipos

Publicar una librería: qué formatos ofrecer (ESM, CJS, UMD), incluir tipos de TypeScript, y qué NO empaquetar (externals).

libraryformatsexternals

exports para librerías Nivel 27 · dual package

El campo exports para librerías: dual package (ESM+CJS), conditions (import/require/types), subpaths, y el peligro del dual package hazard.

exportsdual packagetypes

Herramientas de build Nivel 28 · Vite lib, tsup, unbuild

Construir la librería: Vite en lib mode, tsup (esbuild), unbuild (rollup); generar tipos con dts, y elegir herramienta.

lib modetsupdts

Publicar la librería Nivel 29 · versiones y provenance

Publicar: versionado semántico, dist-tags (latest/next), provenance firmada, empaquetar solo lo necesario (files), y npm vs JSR.

publishsemverJSR

Changesets Nivel 30 · versionado en monorepo

Changesets: declarar el impacto de cada cambio, versionar múltiples paquetes de forma coordinada, generar changelogs y publicar en CI.

changesetschangelogrelease

Monorepos Nivel 31 · por qué y cómo

Monorepos: un repo con muchos paquetes; ventajas (código compartido, cambios atómicos), retos (build, CI), y el panorama de herramientas.

monorepoestructuraherramientas

Turborepo Nivel 32 · task graph y caching

Turborepo: el grafo de tareas, el pipeline (turbo.json), inputs/outputs, y el caching local que evita re-ejecutar lo que no cambió.

Turborepotask graphcache

Remote caching Nivel 33 · compartir la caché

Remote caching: subir artefactos de build a una caché compartida (Vercel o self-hosted) para que otra máquina o CI reutilice el resultado.

remote cacheVercelself-hosted

Nx Nivel 34 · el build system completo

Nx: grafo de tareas, plugins y generadores, Nx Cloud con Replay, y distributed task execution (DTE) que reparte tareas entre máquinas.

NxNx CloudDTE

Elegir herramienta Nivel 35 · Turborepo vs Nx vs Moon

Comparar los build systems: Turborepo (simple, rápido) vs Nx (completo, plugins) vs Moon; criterios para elegir según tu equipo.

comparaciónelecciónMoon

Cómo funciona la caché Nivel 36 · hashing e invalidación

La caché por dentro: hashing de inputs (archivos, deps, env), qué invalida un hit, y la seguridad (envenenamiento de caché, el CVE CREEP).

hashinginvalidaciónseguridad

Module Federation Nivel 37 · microfrontends

Module Federation: compartir código entre apps en runtime; microfrontends, equipos independientes, remotes/host, y sus trade-offs.

Module Federationmicrofrontendsruntime

Optimización de producción Nivel 38 · bundle budgets

Optimizar el output: analizar el bundle (visualizer), presupuestos de tamaño, dividir vendor, y perseguir Core Web Vitals desde el build.

bundle analysisbudgetsWeb Vitals

CI/CD para frontend Nivel 39 · pipeline y deploy

La tubería a producción: instalar con caché, lint/test/build, la caché remota en CI, previews por PR, y desplegar al edge o a un CDN.

CI/CDdeployedge

Nivel Dios: síntesis Nivel 40 · el toolchain unificado

La imagen completa: arquitectar el build de un producto a escala, el toolchain unificado en Rust (VoidZero: Vite, Rolldown, Oxc), y hacia dónde va todo.

síntesisVoidZerofuturo
201lecciones
41niveles
0→∞de cero a dios

¿Listo para dominar Build & Producción?

Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.

Comenzar el camino →