Optimización de bundles

Optimizar bundles de JavaScript

Un bundle grande ralentiza el tiempo de carga. Usa tree shaking, code splitting y análisis de dependencias para reducir tamaño.

Tree shaking

// Use named exports to enable tree shaking
// ❌ Bad: default export (harder to tree shake)
export default function heavyUtil() {}

// ✅ Good: named export
export function lightUtil() {}

// Import only what you need
import { lightUtil } from './utils';

Code splitting

// Dynamic import for split chunks
button.addEventListener('click', async () => {
  const { heavyFeature } = await import('./heavy-feature');
  heavyFeature();
});

Eliminar dependencias innecesarias

// Prefer small utilities over entire libraries
// ❌ Bad
import _ from 'lodash';

// ✅ Good
import debounce from 'lodash/debounce';

Analiza tu bundle

// Webpack Bundle Analyzer
npm install --save-dev webpack-bundle-analyzer

// Vite
npm install --save-dev rollup-plugin-visualizer