Инструменты и библиотеки

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

---

Измерения и профилирование

Инструмент	Назначение	Когда использовать
web-vitals	RUM: сбор LCP / INP / CLS от реальных пользователей	Продакшен, всегда
useReportWebVitals (Next.js)	CWV + Next.js-специфичные метрики: hydration, route-change-to-render	Next.js проекты
PerformanceObserver	Сбор произвольных метрик у реальных пользователей	RUM, продакшен
performance.mark/measure	Замер критичных операций вручную	Диагностика конкретных мест
Lighthouse	Lab: лабораторные замеры, аудит страницы	До / после оптимизаций
Chrome DevTools Performance	Профилирование main thread, поиск bottleneck	Диагностика INP, Long Tasks
CrUX Vis	Исторические Field Data по домену	Анализ трендов

SHOULD

• web-vitals или useReportWebVitals подключён в продакшене и отправляет метрики в аналитику.

---

Runtime-мониторинг (dev)

Инструменты для локальной диагностики проблемных рендеров — только в dev-окружении.

Инструмент	Что делает
React Scan	Визуально подсвечивает компоненты с проблемными рендерами прямо в браузере
Why Did You Render (WDYR)	Логирует причины лишних рендеров в консоль

---

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

SHOULD

Запускать при появлении подозрений на раздутый бандл или после добавления крупных зависимостей.

Инструмент	Применение
webpack-bundle-analyzer	Webpack / Next.js проекты
source-map-explorer	Анализ через source maps
vite-bundle-analyzer	Vite / Astro проекты

---

Виртуализация списков

SHOULD

Применяется когда список рендерит сотни и более элементов и вызывает заметные лаги при скролле.

Библиотека	Применение
@tanstack/react-virtual	Гибкая виртуализация, поддержка динамических высот
react-window	Простые случаи, фиксированные размеры

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }: { items: string[] }) {
  const parentRef = useRef<HTMLDivElement>(null);
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 40,
  });

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: virtualizer.getTotalSize() }}>
        {virtualizer.getVirtualItems().map((item) => (
          <div
            key={item.key}
            style={{ transform: `translateY(${item.start}px)` }}
          >
            {items[item.index]}
          </div>
        ))}
      </div>
    </div>
  );
}

---

Lazy-load по видимости

SHOULD

Применяется для отложенной загрузки некритичных блоков — секций ниже fold, тяжёлых виджетов.

Библиотека: react-intersection-observer

import { useInView } from 'react-intersection-observer';

function LazySection() {
  const { ref, inView } = useInView({ triggerOnce: true });

  return <div ref={ref}>{inView ? <HeavyComponent /> : <Skeleton />}</div>;
}

---

Web Workers

Для тяжёлых вычислений вне main thread. Примеры из регламента:

• Сортировка / фильтрация массивов > 5 000 объектов
• Глубокое сравнение (diffing) сложных вложенных структур
• Пересчёт координат для тысяч точек на графиках
• Программная обработка Canvas-анимаций