Reducir el tamaño del bundle mejora los tiempos de carga y la experiencia del usuario. Las técnicas van desde análisis hasta code splitting y tree shaking.

Análisis del bundle

Usa vite-bundle-visualizer o webpack-bundle-analyzer para identificar módulos grandes. Busca bibliotecas duplicadas, importaciones completas de lo que solo necesita partes, y dependencias sobredimensionadas.

Tree Shaking

Asegura imports específicos en lugar de namespace imports: import { map } from 'lodash-es' en vez de import _ from 'lodash'. Usa librerías tree-shakeable (ESM).

Code Splitting

React.lazy() + Suspense para división por ruta. dynamic import() para módulos bajo demanda. El bundler genera chunks separados que se cargan cuando se necesitan.

Compresión

Brotli (mejor) y Gzip. Configura CDN para servir Brotli si el cliente lo acepta. Reduce hasta 70% del tamaño.

Estrategias avanzadas

Precarga de rutas críticas con <link rel=modulepreload>, eliminación de código muerto, reemplazo de librerías grandes por alternativas ligeras.