Анализ бандла, Tree Shaking и Code Splitting в Next.js

Зачем это нужно#

В веб-приложениях JavaScript является самым дорогим ресурсом с точки зрения вычислительной мощности клиентского устройства. В отличие от растровых изображений одинакового веса, каждый килобайт JS-кода требует не только передачи по сети, но и последующей распаковки, синтаксического парсинга и компиляции движком V8 перед исполнением.

Раздутый клиентский бандл приводит к немедленной деградации ключевых метрик:

• TBT (Total Blocking Time) и INP (Interaction to Next Paint): Главный поток браузера блокируется долгой компиляцией и гидратацией React, игнорируя пользовательские клики и ввод.
• Мобильная производительность: На бюджетных мобильных устройствах со слабыми CPU-ядрами парсинг бандла весом более 200 КБ может занимать от 1.5 до 3 секунд.

Фреймворк Next.js реализует автоматический Code Splitting по сегментам маршрутов и алгоритм Tree Shaking. Однако неаккуратное использование внешних npm-библиотек (например, монолитного Lodash, библиотек иконок) и создание так называемых Barrel Files способны случайным образом подтянуть в клиентский бандл сотни килобайт мертвого кода.

Ментальная модель#

Принципы разделения кода в App Router#

1. Маршрутное разделение (Route-based Splitting): Код, относящийся к маршруту /dashboard, компилируется в отдельный чанк и никогда не скачивается пользователем, находящимся на странице /blog.
2. Общие чанки (Shared Chunks): Библиотеки, используемые в нескольких макетах (ядро React, клиентский рантайм Next.js), сборщик группирует в чанки First Load JS shared by all, кэшируемые браузером между переходами.
3. Статический анализ модулей (ESM Tree Shaking): Сборщик проверяет синтаксис import и export. Если из библиотеки импортирована только одна функция, компилятор стремится вырезать все остальные неиспользуемые части пакета.

Синтаксис и API#

Настройка @next/bundle-analyzer#

Для визуализации состава чанков используется официальный плагин @next/bundle-analyzer. В проектах на базе pnpm установка и запуск производятся следующими командами:

pnpm add -D @next/bundle-analyzer cross-env

Конфигурация подключается в next.config.ts:

import type { NextConfig } from 'next';
import withBundleAnalyzer from '@next/bundle-analyzer';

const nextConfig: NextConfig = {
  // Экспериментальные и оптимизационные параметры
  experimental: {
    // Автоматический глубокий Tree Shaking для пакетов с Barrel-файлами
    optimizePackageImports: ['lucide-react', 'date-fns', 'lodash-es'],
  },
};

const analyzer = withBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
});

export default analyzer(nextConfig);

Для генерации интерактивной карты в браузере выполните команду сборки:

cross-env ANALYZE=true pnpm run build

Динамические импорты через next/dynamic#

Для изоляции тяжелых клиентских библиотек (например, графиков Recharts или редакторов TipTap) используется функция dynamic().

'use client';

import React, { useState } from 'react';
import dynamic from 'next/dynamic';

// Внимание: свойство { ssr: false } РАЗРЕШЕНО ТОЛЬКО в клиентских компонентах ('use client')
const DynamicAnalyticsChart = dynamic(
  () => import('@/components/HeavyChart').then((mod) => mod.HeavyChart),
  {
    loading: () => (
      <div className="w-full h-64 bg-bg-surface animate-pulse rounded-xl border border-border flex items-center justify-center">
        <span className="text-xs text-text-muted font-mono">Загрузка модуля визуализации...</span>
      </div>
    ),
    ssr: false, // Отключает рендеринг на сервере (библиотека использует canvas / window)
  }
);

export function DashboardMetrics() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="space-y-4">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="px-4 py-2 rounded-lg bg-accent-violet text-white text-sm font-medium hover:bg-accent-violet/90 transition-colors"
      >
        {isOpen ? 'Скрыть аналитику' : 'Показать аналитику'}
      </button>

      {/* Код чанка скачивается браузером только в момент первого рендера */}
      {isOpen && <DynamicAnalyticsChart />}
    </div>
  );
}

Практические паттерны#

1. Серверные компоненты как главное средство Code Splitting#

В React Server Components код библиотек выполняется исключительно на сервере. Это означает, что зависимости, используемые в серверных компонентах, физически не включаются в клиентский бандл.

// Серверный компонент (без 'use client')
import { getPostBySlug } from '@/lib/posts';
// Пакет 'marked' весит ~40 КБ, но он НИКОГДА не будет отправлен в браузер
import { marked } from 'marked';
import sanitizeHtml from 'sanitize-html';

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);

  // Вычисления происходят на сервере, клиент получает чистый безопасный HTML
  const rawHtml = await marked.parse(post.content);
  const cleanHtml = sanitizeHtml(rawHtml);

  return (
    <article className="prose dark:prose-invert max-w-3xl mx-auto py-8">
      <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />
    </article>
  );
}

2. Замена устаревших библиотек на ESM-альтернативы#

• Заменяйте moment (290 КБ без возможности Tree Shaking) на date-fns или нативный браузерный Intl.DateTimeFormat.
• Заменяйте монолитный lodash (70 КБ CommonJS) на модульный lodash-es либо нативные методы массивов ES2024.

Распространённые ошибки#

Вопросы для собеседования#