Proceso que transforma el código fuente en archivos optimizados listos para despliegue (minificación, compilación, empaquetado).
El proceso de build transforma el código fuente en archivos optimizados listos para producción. Incluye: - Transpilación: TypeScript/JSX → JavaScript - Bundling: Combinar múltiples archivos - Minificación: Reducir tamaño de código - Tree shaking: Eliminar código no usado - Code splitting: Dividir en chunks - Optimización de assets: Imágenes, CSS Herramientas: Vite, webpack, esbuild, Rollup, Turbopack.
// vite.config.ts - Configuración de build import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], build: { outDir: 'dist', sourcemap: true, minify: 'terser', rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'], utils: ['lodash', 'date-fns'] } } } } }); // package.json - Scripts de build { "scripts": { "dev": "vite", "build": "tsc && vite build", "preview": "vite preview", "build:analyze": "vite build --mode analyze" } } # Comandos de build npm run build # Output típico: # dist/ # index.html # assets/ # index-abc123.js # Bundle principal # vendor-def456.js # Dependencias # index-xyz789.css # Estilos # logo-123abc.svg # Assets # Analizar bundle npx vite-bundle-visualizer
