react-performance-optimizer — субагент для Claude Code
Субагент находит узкие места в рендеринге React, настраивает виртуализацию списков и помогает урезать размер бандла. Пригодится при просадках FPS и плохих метриках Core Web Vitals.
npx claude-code-templates@latest --agent web-tools/react-performance-optimizerЧто делает react-performance-optimizer
Субагент анализирует компоненты и предлагает паттерны React 18: перевод тяжёлых вычислений на useTransition и useDeferredValue, отложенную загрузку маршрутов через React.lazy и предварительную подгрузку чанков. Для работы ассистент использует встроенные инструменты Read, Write, Edit, Bash и Grep, поэтому может самостоятельно проверять исходный код и конфиги сборщика.
В рендеринге агент делает упор на разделение бандла, настройку webpack-bundle-analyzer и виртуализацию списков через библиотеки вроде react-window. Для ускорения метрики LCP субагент настраивает предзагрузку шрифтов и критических стилей через теги link. Если в проекте нет lodash или специализированных библиотек виртуализации, код из шаблонов субагента потребует установки внешних пакетов.
Какие задачи решает
- устранить задержки интерфейса через useTransition и useDeferredValue
- настроить виртуализацию тяжёлых списков с помощью react-window
- разделить бандл на чанки и настроить webpack-bundle-analyzer
- ускорить отрисовку первого экрана и показатель LCP
Примеры запросов агенту
- Проверь компонент SearchResults и переведи фильтрацию списка на concurrent-паттерны React
- Настрой сборку Webpack так, чтобы сформировать отчёт bundle-report.html
- Оптимизируй отображение длинного каталога с помощью виртуализации
Как установить react-performance-optimizer
1Через claude-code-templates
npx claude-code-templates@latest --agent web-tools/react-performance-optimizer2Вручную: положить файлы
.claude/agents/react-performance-optimizer.mdДля всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию
Вручную: положить файлы
.codex/agents/react-performance-optimizer.tomlCodex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/
Вручную: положить файлы
.cursor/agents/react-performance-optimizer.mdCursor понимает и .claude/agents/
По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст
Вопросы о react-performance-optimizer
Как установить react-performance-optimizer в Claude Code?
Выполните npx claude-code-templates@latest --agent web-tools/react-performance-optimizer или добавьте конфигурацию в файл .claude/agents/react-performance-optimizer.md.
Что делает react-performance-optimizer?
Субагент исследует кодовую базу на React, находит причины лишних ререндеров, помогает внедрить мемоизацию и оптимизирует метрики Core Web Vitals.
Какие инструменты окружения использует субагент?
Для анализа и изменения кодовой базы агент применяет инструменты Read, Write, Edit, Bash и Grep.
