react-performance-optimization — субагент для Claude Code: что делает
Субагент ищет и чинит узкие места React-приложений: лишние ре-рендеры, раздутый бандл, утечки памяти. Пригодится, когда страница тормозит или просели Core Web Vitals.
npx claude-code-templates@latest --agent performance-testing/react-performance-optimizationЧто делает react-performance-optimization
Субагент работает по профилю React-разработчика: разбирает ре-рендеры и согласование дерева компонентов, анализирует бандл, ищет утечки памяти и слабые места в загрузке данных. Отдельно смотрит на Core Web Vitals — LCP, FID, CLS. Инструменты у него простые: Read, Write, Edit и Bash, то есть он читает код, правит файлы и запускает команды сборки или профилирования.
Внутри описаны готовые приёмы: мемоизация компонентов через React.memo вместе с useMemo, разбиение кода через lazy и Suspense. Автор просит давать измеримые решения со сравнением до и после — так что на выходе ждите не общие советы, а конкретные правки с цифрами замеров.
Вызывать его стоит осознанно: описание помечено как PROACTIVELY, поэтому агент может подключаться сам, когда задача выглядит как работа с производительностью. Если вы не хотите, чтобы он вмешивался в обычные правки компонентов, проверьте настройки субагентов до того, как запускать его на живой ветке.
Какие задачи решает
- найти причину лишних ре-рендеров компонента
- уменьшить размер бандла через разбиение кода
- вычистить утечки памяти и забытые очистки эффектов
- разобрать просевшие метрики LCP, FID и CLS
- сравнить производительность до и после правок
Примеры запросов агенту
- профилируй этот список задач: почему он ре-рендерится на каждый ввод в поле поиска
- разбей бандл приложения: вынеси страницу Dashboard в отдельный чанк через lazy и Suspense
- найди утечку памяти в этом компоненте и покажи замеры до и после
Как установить react-performance-optimization
1Через claude-code-templates
npx claude-code-templates@latest --agent performance-testing/react-performance-optimization2Вручную: положить файлы
.claude/agents/react-performance-optimization.mdДля всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию
Вручную: положить файлы
.codex/agents/react-performance-optimization.tomlCodex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/
Вручную: положить файлы
.cursor/agents/react-performance-optimization.mdCursor понимает и .claude/agents/
По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст
Из того же набора205
Весь набор →Похожие
Рядом в теме «Фронтенд и UI»
Все субагенты по теме «Фронтенд и UI» →Вопросы о react-performance-optimization
Как установить react-performance-optimization в Claude?
Через шаблоны: npx claude-code-templates@latest --agent performance-testing/react-performance-optimization. После этого файл субагента лежит в .claude/agents/react-performance-optimization.md.
Что делает react-performance-optimization?
Разбирает производительность React-приложения: ре-рендеры, размер бандла, утечки памяти, загрузку данных и метрики Core Web Vitals. Правит код и запускает команды через Bash.
Когда этот субагент включается сам?
В описании стоит пометка PROACTIVELY: агент может подхватывать задачи, которые выглядят как оптимизация производительности, без явного вызова. Если это мешает, ограничьте его в настройках субагентов.
