Моё React-приложение в последние месяцы становится всё медленнее, и я не понимаю, почему. Я начала смотреть в Chrome DevTools, но не очень разбираюсь в метриках производительности. Есть ли простой способ найти узкие места?
Запусти свою приложение с помощью `npm run build` и посмотри на размер бандла - сразу видно, не раздулась ли какая-нибудь библиотека. Часто случается, что ты случайно импортируешь целые библиотеки, а нужна тебе только одна маленькая функция. Полезный трюк: используй Lighthouse-аудит в Chrome DevTools, не только метрики производительности - он намного яснее показывает, где именно забивается, и дает конкретные предложения по улучшению вместо просто загадочных цифр.
Самая частая проблема - ненужные повторные рендеры. Посмотри, какие компоненты постоянно перерисовываются, хотя их props вообще не изменились. В Chrome DevTools можешь использовать вкладку React Profiler - там видно ровно, какие компоненты дольше всего рендерятся и как часто это происходит. Часто помогает уже `React.memo()` для отдельных компонентов или `useMemo()` для дорогостоящих вычислений, чтобы это оптимизировать. Если этого недостаточно, может быть, что твой state слишком централизованно организован и каждое маленькое изменение перерисовывает всё приложение - тогда помогла бы Context API или инструмент управления state вроде Redux.
Если приложение становилось медленнее на протяжении месяцев, стоит посмотреть на зависимости - некоторые пакеты со временем растут или приносят с собой больше кода, который тебе вообще не нужен. С помощью `npm ls` или `yarn why` можешь проверить, какие библиотеки установлены дважды или почему определённые пакеты вообще там находятся. Кстати: в Chrome DevTools в разделе Performance можешь запустить запись, тогда увидишь конкретно, где приложение теряет время - посмотри на активность Main Thread, а не только на отдельные метрики.
Прежде чем ты слишком глубоко погружишься в Chrome DevTools: чаще всего дело не в производительности браузера, а в том, что твоя app слишком много кода загружает или отправляет слишком много API-запросов. Это неприятный сюрприз, если смотришь только на Flame Charts.
Я бы начал с двух практических проверок: во-первых, открой вкладку Network и посмотри, какого размера у тебя бандлы и как долго выполняются API-запросы. Если там лежат какие-то огромные JavaScript-файлы или сервер вечность отвечает, то никакая оптимизация React тебе не поможет. Во-вторых, используй `npm outdated` или посмотри на свой package.json - иногда через зависимости нечаянно подтягиваются огромные пакеты, которые ты не используешь активно. С помощью `npm ls` ты также можешь посмотреть, какие пакеты установлены несколько раз.
Если всё это выглядит нормально, то React DevTools (это отдельный плагин для браузера, не Chrome DevTools) смогут тебе помочь: с их помощью ты видишь в реальном времени, какие компоненты рендерятся и как часто. Это намного показательнее любых метрик производительности. Ищи там компоненты, которые постоянно перерендеривают себя, хотя их входные данные не изменились - это действительно частая причина проблем.
Войдите, чтобы ответить.
