Next.js 16.4 añade una herramienta para recortar JavaScript

Next.js 16.4 permite utilizar un agente de IA para localizar JavaScript innecesario y proponer cómo reducirlo. La skill next-bundle-optimizer analiza las relaciones entre módulos mediante Turbopack y detecta importaciones que provocan cargas anticipadas. Lo recomendable es ejecutarla primero en modo informe, revisar sus propuestas y medir los resultados antes de modificar el código.

Vercel presentó esta herramienta el 28 de octubre de 2026. También actualizó el Bundle Analyzer para facilitar la revisión manual de las rutas más pesadas, comparar versiones y distinguir el código necesario para el renderizado inicial.

Por qué una importación puede cargar JavaScript que no necesitas

En una aplicación Next.js, el JavaScript descargado por el navegador depende de cómo se relacionan los módulos.

Una importación dinámica permite retrasar la carga de un componente hasta que se necesita. Sin embargo, si otro archivo importa ese mismo componente de forma estática, puede terminar dentro del bundle inicial.

Esto ocurre especialmente en aplicaciones que acumulan funcionalidades: editores, paneles administrativos, diálogos, gráficos o librerías compartidas entre distintas rutas.

Según el blog de Next.js, next-bundle-optimizer utiliza el grafo de módulos de Turbopack para localizar estas conexiones y proponer dónde separar dependencias.

El objetivo es evitar que el navegador descargue módulos antes de necesitarlos, sin eliminar funciones que la aplicación necesita.

Cómo instalar y ejecutar next-bundle-optimizer

La herramienta requiere Next.js 16.4 y Turbopack. Antes de utilizarla, comprueba la versión del proyecto y el sistema de compilación.

El procedimiento publicado por Next.js comienza instalando la skill:

npx skills add vercel/next.js --skill next-bundle-optimizer

Después, ejecútala desde un agente de programación compatible:

/next-bundle-optimizer

Por defecto, la skill solo genera un informe. Examina el bundle, identifica posibles problemas y propone soluciones sin aplicar modificaciones automáticamente.

Esta debería ser la primera ejecución en cualquier proyecto existente. Permite comprobar qué está detectando el agente y decidir qué cambios tienen sentido.

Cuando hayas revisado las propuestas, puedes utilizar:

/next-bundle-optimizer fix

Este modo aplica los cambios, repite el análisis y compara los resultados anteriores y posteriores, según Vercel y Programming Hero.

No conviene ejecutarlo directamente sobre una versión en producción sin revisar el código. Un cambio que reduce el bundle puede modificar cuándo se carga un componente o afectar a su comportamiento.

Mantener instrucciones claras para los agentes también ayuda a limitar qué archivos pueden modificar y qué comprobaciones deben realizar. Puedes ampliar esta parte en el artículo sobre AGENTS.md e instrucciones para agentes de programación.

Cuándo basta con utilizar next analyze manualmente

No todos los problemas justifican delegar la investigación en un agente.

Si sabes qué ruta carga demasiado código o acabas de incorporar una dependencia grande, puede resultar más sencillo abrir el analizador y comprobar qué módulos aparecen.

El comando next analyze permite inspeccionar los bundles de la aplicación.

La actualización descrita por Next.js introduce tres funciones especialmente útiles:

• Resumen de rutas: muestra cuáles tienen los bundles de cliente más grandes.
• Comparación de capturas: guarda análisis anteriores para comprobar cómo cambia el tamaño después de una modificación.
• Ruta crítica de renderizado: permite identificar el JavaScript que se carga de forma síncrona durante el renderizado inicial, separándolo de las dependencias asíncronas.

Estas vistas permiten investigar manualmente un problema concreto sin solicitar cambios automáticos.

Qué resultados obtuvo Vercel en sus aplicaciones

Vercel utilizó la skill en las aplicaciones de v0 y vercel.com, donde afirma haber eliminado o aplazado la carga de casi 2 MB de JavaScript comprimido entre distintas páginas.

El informe publicado por Vercel incluye estos casos:

En algunos casos, el código se eliminó de la carga inicial; en otros, se retrasó hasta que realmente hacía falta.

Son mediciones de Vercel sobre sus propias aplicaciones, no resultados que puedan extrapolarse a cualquier web.

Las webs con visores 3D necesitan revisar cuándo cargan sus librerías

En una web que incorpora visores 3D, configuradores o experiencias interactivas, es importante comprobar cuándo se descargan las dependencias utilizadas para renderizar la escena.

Si una página contiene un visor que solo aparece después de una interacción, conviene verificar que su código no esté incluido innecesariamente en la carga inicial.

La skill puede ayudar a encontrar importaciones que anulan esa separación. El analizador manual permite comprobar posteriormente si las dependencias han quedado fuera de la ruta crítica.

Pero reducir JavaScript no resuelve por sí mismo el peso de modelos, texturas o recursos gráficos. Esos elementos requieren una revisión específica, como explicamos en los límites de los visores 3D en móviles.

También conviene revisar otras dependencias heredadas y compatibilidad de navegadores, un tema relacionado con el desarrollo web sin polyfills innecesarios.

Qué comprobar antes de aceptar los cambios del agente

Esta semana, ejecuta el optimizador en modo informe sobre una ruta pesada, revisa las propuestas y compara el bundle antes de aceptar ningún cambio. Si necesitas optimizar una web con elementos interactivos o un visor 3D, cuéntanos qué está cargando demasiado código en Contrast 3D.