Анализатор бандлов (Bundle Analyzer)

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

Установка

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

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

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

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

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

module.exports = withBundleAnalyzer(nextConfig)

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

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

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

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