Использование памяти

По мере роста приложений и добавления новых функций, они могут требовать больше ресурсов при локальной разработке или создании продакшен-сборок.

Рассмотрим стратегии и техники для оптимизации памяти и решения распространённых проблем с памятью в Next.js.

Уменьшение количества зависимостей

Приложения с большим количеством зависимостей потребляют больше памяти.

Анализатор бандлов (Bundle Analyzer) поможет исследовать крупные зависимости в вашем приложении, которые можно удалить для улучшения производительности и использования памяти.

Запуск next build с --experimental-debug-memory-usage

Начиная с версии 14.2.0, вы можете запустить next build --experimental-debug-memory-usage для выполнения сборки в режиме, где Next.js будет непрерывно выводить информацию об использовании памяти в процессе сборки, такую как использование кучи (heap) и статистику сборки мусора. Снимки кучи (heap snapshots) также будут автоматически создаваться при приближении к установленному лимиту памяти.

Полезно знать: Эта функция несовместима с опцией Webpack build worker, которая автоматически включается, если у вас нет пользовательской конфигурации Webpack.

Запись профиля кучи (heap profile)

Для поиска проблем с памятью вы можете записать профиль кучи из Node.js и загрузить его в Chrome DevTools для выявления потенциальных источников утечек памяти.

В терминале передайте флаг --heap-prof в Node.js при запуске сборки Next.js:

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

После завершения сборки Node.js создаст файл .heapprofile.

В Chrome DevTools откройте вкладку Memory и нажмите кнопку "Load Profile" для визуализации файла.

Анализ снимка кучи (heap snapshot)

Вы можете использовать инструмент инспектора для анализа использования памяти приложением.

При запуске команд next build или next dev добавьте NODE_OPTIONS=--inspect в начало команды. Это откроет агент инспектора на стандартном порту. Если вы хотите остановить выполнение до запуска пользовательского кода, используйте --inspect-brk. Во время работы процесса вы можете подключиться к порту отладки через инструменты вроде Chrome DevTools, чтобы записать и проанализировать снимок кучи и увидеть, какая память удерживается.

Начиная с версии 14.2.0, вы также можете запустить next build с флагом --experimental-debug-memory-usage для упрощения создания снимков кучи.

В этом режиме вы можете отправить сигнал SIGUSR2 процессу в любой момент, и процесс создаст снимок кучи.

Снимок кучи сохранится в корне проекта Next.js и может быть загружен в любой анализатор кучи, например Chrome DevTools, для просмотра удерживаемой памяти. Этот режим пока несовместим с Webpack build workers.

Подробнее см. как записывать и анализировать снимки кучи.

Webpack build worker

Webpack build worker позволяет запускать компиляции Webpack в отдельном Node.js воркере, что уменьшает использование памяти приложением во время сборок.

Эта опция включена по умолчанию, начиная с v14.1.0, если в приложении нет пользовательской конфигурации Webpack.

Если вы используете более старую версию Next.js или имеете пользовательскую конфигурацию Webpack, вы можете включить эту опцию, установив experimental.webpackBuildWorker: true в next.config.js.

Полезно знать: Эта функция может быть несовместима с некоторыми пользовательскими плагинами Webpack.

Отключение кэша Webpack

Кэш Webpack сохраняет сгенерированные модули Webpack в памяти и/или на диске для ускорения сборок. Это может улучшить производительность, но также увеличит использование памяти приложением для хранения кэшированных данных.

Вы можете отключить это поведение, добавив пользовательскую конфигурацию Webpack в ваше приложение:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    if (config.cache && !dev) {
      config.cache = Object.freeze({
        type: 'memory',
      })
    }
    // Важно: вернуть изменённую конфигурацию
    return config
  },
}

export default nextConfig

Отключение source maps

Генерация source maps потребляет дополнительную память во время процесса сборки.

Вы можете отключить генерацию source maps, добавив productionBrowserSourceMaps: false и experimental.serverSourceMaps: false в конфигурацию Next.js.

Полезно знать: Некоторые плагины могут включать source maps и могут требовать дополнительной настройки для отключения.

Проблемы с памятью в Edge runtime

В Next.js v14.1.3 исправлена проблема с памятью при использовании Edge runtime. Обновитесь до этой версии (или новее), чтобы проверить, решает ли она вашу проблему.