Оптимизация сборки пакетов

Оптимизация сборки внешних пакетов может значительно улучшить производительность вашего приложения. По умолчанию пакеты, импортируемые в ваше приложение, не собираются. Это может повлиять на производительность или не работать, если внешние пакеты не предварительно собраны, например, при импорте из монорепозитория или node_modules. На этой странице вы узнаете, как анализировать и настраивать сборку пакетов.

Анализ JavaScript-бандлов

@next/bundle-analyzer — это плагин для Next.js, который помогает управлять размером сборок вашего приложения. Он генерирует визуальный отчет о размере каждого пакета и его зависимостях. Вы можете использовать эту информацию для удаления больших зависимостей, разделения или ленивой загрузки вашего кода.

Установка

Установите плагин, выполнив следующую команду:

npm i @next/bundle-analyzer
# или
yarn add @next/bundle-analyzer
# или
pnpm add @next/bundle-analyzer

Затем добавьте настройки анализатора сборок в ваш next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {}

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withBundleAnalyzer(nextConfig)

Генерация отчета

Выполните следующую команду для анализа ваших сборок:

ANALYZE=true npm run build
# или
ANALYZE=true yarn build
# или
ANALYZE=true pnpm build

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

Оптимизация импорта пакетов

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

Вы можете оптимизировать импорт таких пакетов, добавив опцию optimizePackageImports в ваш next.config.js. Эта опция загружает только те модули, которые вы действительно используете, сохраняя при этом удобство написания импортов с множеством именованных экспортов.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    optimizePackageImports: ['icon-library'],
  },
}

module.exports = nextConfig

Next.js также автоматически оптимизирует некоторые библиотеки, поэтому их не нужно включать в список optimizePackageImports. См. полный список.

Сборка определенных пакетов

Для сборки определенных пакетов вы можете использовать опцию transpilePackages в вашем next.config.js. Эта опция полезна для сборки внешних пакетов, которые не предварительно собраны, например, в монорепозитории или импортированы из node_modules.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['package-name'],
}

module.exports = nextConfig

Сборка всех пакетов

Для автоматической сборки всех пакетов (поведение по умолчанию в App Router) вы можете использовать опцию bundlePagesRouterDependencies в вашем next.config.js.

/** @type {import('next').NextConfig} */
const nextConfig = {
  bundlePagesRouterDependencies: true,
}

module.exports = nextConfig

Исключение определенных пакетов из сборки

Если у вас включена опция bundlePagesRouterDependencies, вы можете исключить определенные пакеты из автоматической сборки с помощью опции serverExternalPackages в вашем next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Автоматически собирать внешние пакеты в Pages Router:
  bundlePagesRouterDependencies: true,
  // Исключить определенные пакеты из сборки для App и Pages Router:
  serverExternalPackages: ['package-name'],
}

module.exports = nextConfig