Патерни продуктивності React, які ми використовуємо на продакшні
Практичні техніки оптимізації React, що використовуються в продуктах fluxLab.dev — code splitting, мемоізація, віртуалізація та оптимізація зображень.
Вступ
Продуктивність — це не запізніла думка у fluxLab.dev, а фіча. Через наші продукти ми виробили патерни, що тримають React-додатки швидкими навіть при зростанні складності.
Патерн 1: Server Components за замовчуванням
У Next.js App Router кожен компонент — Server Component, поки ви не додасте 'use client'. Ми використовуємо це максимально. У фронтенді Jobber 70% компонентів — серверні. Вони додають нуль JavaScript у клієнтський бандл.
Патерн 2: Lazy load нижче фолду
Все, що не видно при початковому завантаженні, лінійно завантажується. Для аналітичної панелі Jobber lazy loading компонентів графіків зменшив початковий бандл на 120КБ.
Патерн 3: Оптимізація зображень з Next/Image
Кожне зображення використовує next/image з правильним атрибутом sizes — це критично для того, щоб браузер завантажував правильний розмір зображення.
Патерн 4: Дебаунс інпутів пошуку
Ми дебаунсимо всі пошукові інпути на 300мс. У списку компаній Jobber це зменшило API-виклики на 80%, зберігаючи відгукливість інтерфейсу.
Патерн 5: Віртуалізація довгих списків
Для списків з понад 50 елементами ми використовуємо віртуалізацію. Лише видимі елементи рендеряться в DOM. Kanban-дошка в Jobber використовує цей патерн.
Патерн 6: Оптимістичні оновлення для Drag-and-Drop
Коли користувач перетягує картку між колонками на Kanban-дошці Jobber, ми оновлюємо UI миттєво — до завершення API-виклику. Якщо виклик не вдається, відкатуємо зміну.
Патерн 7: Попереднє завантаження критичних даних
Для сторінок, які користувач, ймовірно, відвідає наступними, ми завантажуємо дані при наведенні курсору. Це знімає 200-400мс з часу навігації.
Патерн 8: Аналіз бандлу
Ми запускаємо @next/bundle-analyzer на кожному релізі. Будь-яке зростання понад 10КБ потребує обґрунтування.
Вимірювання продуктивності
Ми відстежуємо Core Web Vitals на продакшні: LCP під 2.5с, FID під 100мс, CLS під 0.1. Наш портфоліо-сайт flux-lab.dev набирає 95+ балів Lighthouse.
Висновок
Оптимізація React — це розумні рішення на постійній основі: Server Components замість Client Components, lazy loading замість жадібного завантаження, та вимірювання перед оптимізацією.