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

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

Анализ 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. См. полный список.

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

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

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

module.exports = nextConfig

Next.js включает список популярных пакетов, которые в настоящее время работают над совместимостью и автоматически исключаются. См. полный список.