Vercel, стоящая за разработкой Next.js, представила проект react-best-practices. Это open-source репозиторий, содержащий более 40 правил оптимизации производительности, накопленных за десятилетие работы с высоконагруженными продакшн-системами.

Главная фишка релиза — формат. Правила структурированы специально для «потребления» AI-агентами и LLM, хотя они не менее полезны и для ручного аудита кода.

Что внутри: 8 категорий оптимизации

Все правила разделены по приоритетности — от CRITICAL до LOW. Инженеры Vercel выделили две ключевые проблемы, которые чаще всего «убивают» производительность в реальных проектах:

1. Устранение асинхронных водопадов (async waterfalls) — когда запросы данных идут последовательно вместо параллельного выполнения.
2. Уменьшение размера бандла — критический фактор для скорости загрузки.

Помимо этого, база знаний охватывает серверную производительность, клиентский data fetching, борьбу с лишними ререндерами и микро-оптимизации JavaScript. Каждое правило снабжено примерами «как делать не надо» и «как правильно».

Как это использовать вайбкодерам

Для нас это обновление — прямой способ «прокачать» мозги своим AI-помощникам. Все правила компилируются в единый файл AGENTS.md, который агент может быстро просканировать перед рефакторингом или написанием нового компонента.

Инструментарий распространяется через экосистему Agent Skills. Чтобы добавить эти знания в свой рабочий процесс (например, в Claude Code, Cursor или Windsurf), достаточно выполнить одну команду:

npx skills add vercel-labs/agent-skills

Почему это важно

Вайбкодинг часто грешит тем, что AI генерирует рабочий, но неоптимальный код — например, забывает про Suspense или создает лишние клиентские компоненты там, где нужны серверные. Подключение официальных гайдлайнов от Vercel напрямую в контекст агента позволяет минимизировать технический долг еще на этапе генерации кода, не дожидаясь жалоб пользователей на медленный интерфейс.