Optimización de bundle en Next.js: recortando Javascript en el cliente

Una aplicación Next.js rápida no solo depende del tiempo de respuesta del servidor (TTFB) o de un buen alojamiento en la CDN. El factor más crítico para conseguir una interacción fluida y evitar el bloqueo del navegador es el tamaño de JavaScript que se descarga y ejecuta en el cliente. Si tu bundle de entrada en producción pesa varios megabytes, los dispositivos móviles de tus usuarios sufrirán retrasos severos en interactividad, destruyendo tus métricas de INP (Interaction to Next Paint) y la conversión del negocio. Reducir los bytes que viajan por la red es la optimización con mayor impacto.

Analizando lo que pesas

Antes de optimizar, necesitas ver qué está consumiendo espacio. Next.js facilita esto mediante herramientas de análisis de bundle (como @next/bundle-analyzer). Al ejecutar el build con esta herramienta activa, obtendrás un mapa interactivo visual (Treemap) que muestra exactamente cuánto pesa cada una de tus páginas y qué dependencias de node_modules están inflando el bundle. Esto te permite identificar los módulos culpables del sobrepeso.

A menudo descubrirás que librerías pesadas de iconos (como cargar miles de iconos de FontAwesome o Lucide sin importar de forma individual) o utilidades gigantescas (como Lodash completo) se están importando por completo en lugar de cargar únicamente las funciones que necesitas. Asegurarte de que tus dependencias soportan tree-shaking es vital para mantener el bundle a raya.

Importaciones dinámicas y Lazy Loading

La solución principal para evitar descargar código que el usuario no necesita en los primeros segundos es el Lazy Loading. Next.js provee la función next/dynamic para importar componentes React de forma dinámica. Esto divide el código en diferentes chunks que se descargan bajo demanda.

Por ejemplo, componentes grandes como modales complejos, chats de soporte interactivos, mapas de Google Maps o reproductores de vídeo no deben cargarse en el bundle inicial. Al importarlos de forma dinámica con { ssr: false } o cargarlos únicamente cuando el usuario hace clic en un botón, retrasas la descarga de su JavaScript correspondiente hasta el momento exacto en que son requeridos, manteniendo el primer renderizado de la página extremadamente ligero, veloz y optimizado para móviles de gama media.