Investigué tanto la documentación de Next JS como preguntas similares, como el tiempo de compilación lento de la página en desarrollo con Next.js y TypeScript (que es específico de TypeScript; esta pregunta se refiere a JavaScript y no implica compilar TypeScript)

Estoy usando next.js 10.0.9 y después de ejecutar next , mi aplicación tarda alrededor de 50 segundos en compilarse y comenzar a responder a las solicitudes HTTP.

Después de hacer un cambio, toma otros 12 segundos para reconstruir. Esto parece mucho más lento en comparación con otros marcos JS populares.

Mas detalle:

• npm run dev simplemente ejecuta next y next tarda alrededor de 50 segundos en responder (justo después de que se imprima el archivo compiled successfully ).

Esto significa que tareas como git bisect para encontrar dónde se introdujo un error son muy lentas, ya que a continuación se debe realizar una reconstrucción completa de 1 minuto después de revisar cada confirmación.

 $ npm run dev > hl-alpha-frontend@1.0.0 dev /home/mike/Code/myapp/alpha/frontend > next ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from /home/mike/Code/myapp/alpha/frontend/.env.local info - Loaded env from /home/mike/Code/myapp/alpha/frontend/.env.development info - Loaded env from /home/mike/Code/myapp/alpha/frontend/.env warn - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://err.sh/next.js/react-version Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected. See here for more info: https://err.sh/next.js/built-in-css-disabled info - Using external babel configuration from /home/mike/Code/myapp/alpha/frontend/babel.config.json event - compiled successfully event - build page: / wait - compiling... event - compiled successfully

• Hacer pequeños cambios en los archivos requiere alrededor de 12 segundos de compiling... viendo el triángulo antes de que la página responda al compiled successfully .

¿Cómo puedo acelerar los tiempos de compilación de next.js?

Actualizaciones

Ejecutar @next/bundle-analyzer ayudó - gracias @juliomalves - Puedo ver que estamos cargando todos los react-heroicons (ese es el gran index.js en la imagen) que ~puedo arreglar fácilmente con importaciones más específicas.~ Actualizar - esto ahora se hace a través de la base de código 👍

Viejo:

 > import * as Icon from "@graywolfai/react-heroicons";

Nuevo:

 import { BellOutline } from "@graywolfai/react-heroicons";

Esto ha acelerado mis tiempos de compilación (después de ejecutar next , la tarea de compiling finaliza más rápido). Sin embargo, mis paquetes todavía parecen tener el mismo tamaño.