Uso de memoria

A medida que las aplicaciones crecen y se enriquecen con más funcionalidades, pueden demandar más recursos durante el desarrollo local o la creación de builds de producción.

Exploremos algunas estrategias y técnicas para optimizar la memoria y abordar problemas comunes de memoria en Next.js.

Reducir el número de dependencias

Las aplicaciones con una gran cantidad de dependencias utilizarán más memoria.

El Analizador de paquetes (Bundle Analyzer) puede ayudarte a investigar dependencias grandes en tu aplicación que podrían eliminarse para mejorar el rendimiento y el uso de memoria.

Ejecutar next build con --experimental-debug-memory-usage

A partir de la versión 14.2.0, puedes ejecutar next build --experimental-debug-memory-usage para ejecutar el build en un modo donde Next.js imprimirá información sobre el uso de memoria continuamente durante el build, como el uso del heap y estadísticas de recolección de basura. También se tomarán instantáneas del heap automáticamente cuando el uso de memoria se acerque al límite configurado.

Bueno saber: Esta característica no es compatible con la opción de worker de build de Webpack, que se activa automáticamente a menos que tengas una configuración personalizada de Webpack.

Grabar un perfil de heap

Para buscar problemas de memoria, puedes grabar un perfil de heap desde Node.js y cargarlo en Chrome DevTools para identificar posibles fuentes de fugas de memoria.

En tu terminal, pasa el flag --heap-prof a Node.js al iniciar tu build de Next.js:

node --heap-prof node_modules/next/dist/bin/next build

Al finalizar el build, Node.js creará un archivo .heapprofile.

En Chrome DevTools, puedes abrir la pestaña Memory y hacer clic en el botón "Load Profile" para visualizar el archivo.

Analizar una instantánea del heap

Puedes usar una herramienta de inspección para analizar el uso de memoria de la aplicación.

Al ejecutar el comando next build o next dev, agrega NODE_OPTIONS=--inspect al inicio del comando. Esto expondrá el agente de inspección en el puerto predeterminado. Si deseas pausar antes de que comience cualquier código de usuario, puedes pasar --inspect-brk en su lugar. Mientras el proceso se ejecuta, puedes usar una herramienta como Chrome DevTools para conectarte al puerto de depuración y grabar/analizar una instantánea del heap para ver qué memoria se está reteniendo.

A partir de la versión 14.2.0, también puedes ejecutar next build con el flag --experimental-debug-memory-usage para facilitar la toma de instantáneas del heap.

Mientras se ejecuta en este modo, puedes enviar una señal SIGUSR2 al proceso en cualquier momento, y el proceso tomará una instantánea del heap.

La instantánea del heap se guardará en la raíz del proyecto de la aplicación Next.js y se puede cargar en cualquier analizador de heap, como Chrome DevTools, para ver qué memoria se está reteniendo. Este modo aún no es compatible con los workers de build de Webpack.

Consulta cómo grabar y analizar instantáneas del heap para obtener más información.

Worker de build de Webpack

El worker de build de Webpack te permite ejecutar compilaciones de Webpack dentro de un worker Node.js separado, lo que disminuirá el uso de memoria de tu aplicación durante los builds.

Esta opción está habilitada por defecto si tu aplicación no tiene una configuración personalizada de Webpack a partir de la versión v14.1.0.

Si estás usando una versión anterior de Next.js o tienes una configuración personalizada de Webpack, puedes habilitar esta opción configurando experimental.webpackBuildWorker: true en tu next.config.js.

Bueno saber: Esta característica puede no ser compatible con todos los plugins personalizados de Webpack.

Deshabilitar la caché de Webpack

La caché de Webpack guarda módulos de Webpack generados en memoria y/o en disco para mejorar la velocidad de los builds. Esto puede ayudar con el rendimiento, pero también aumentará el uso de memoria de tu aplicación para almacenar los datos en caché.

Puedes deshabilitar este comportamiento agregando una configuración personalizada de Webpack a tu aplicación:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (config.cache && !dev) {
      config.cache = Object.freeze({
        type: 'memory',
      })
    }
    // Importante: devuelve la configuración modificada
    return config
  },
}

export default nextConfig

Deshabilitar los mapas de origen (source maps)

La generación de mapas de origen consume memoria adicional durante el proceso de build.

Puedes deshabilitar la generación de mapas de origen agregando productionBrowserSourceMaps: false y experimental.serverSourceMaps: false a tu configuración de Next.js.

Bueno saber: Algunos plugins pueden activar los mapas de origen y pueden requerir configuración personalizada para deshabilitarlos.

Problemas de memoria en Edge

Next.js v14.1.3 solucionó un problema de memoria al usar el runtime Edge. Actualiza a esta versión (o posterior) para ver si resuelve tu problema.