Сводка
Оптимизация производительности React и Next.js по 70 правилам, ранжированным по влиянию.
-
Организовано в 8 категорий от критических (устранение водопадов, оптимизация бандла) до низкого приоритета (расширенные паттерны), каждая с конкретными, применимыми правилами с префиксами для удобной ссылки
-
Охватывает серверную производительность, включая дедупликацию React.cache(), параллельную загрузку и минимизацию сериализации
-
Решает задачи на клиентской стороне: оптимизацию повторного рендера через мемоизацию и управление зависимостями, повышение производительности рендера с помощью стратегий CSS и паттернов гидратации
-
Включает оптимизации на уровне JavaScript, такие как пакетная обработка изменений DOM, кэширование и поиск по Set/Map за время O(1)
-
Каждое правило включает подробные объяснения, неверные и правильные примеры кода и контекстные указания по автоматизированному рефакторингу и генерации кода
Vercel React Лучшие практики
Полное руководство по оптимизации производительности для приложений на React и Next.js, поддерживаемое Vercel. Содержит 70 правил в 8 категориях, ранжированных по влиянию с целью направлять автоматизированный рефакторинг и генерацию кода.
Когда применять
Обращайтесь к этим рекомендациям, когда:
-
Написание новых компонентов React или страниц Next.js
-
Реализация получения данных (клиентская или серверная)
-
Проверка кода на предмет проблем с производительностью
-
Рефакторинг существующего кода React/Next.js
-
Оптимизация размера бандла или времени загрузки