10 промтов для рефакторинга JavaScript-кода: ускорение фронтенда через AI-ревью и оптимизацию бандла

JavaScript-код имеет свойство накапливать технический долг: сначала это быстрый прототип, потом — легаси, которое страшно трогать. По данным State of JS 2025, более 60% разработчиков сталкиваются с проблемами производительности в существующих проектах. Но есть хорошая новость: современные AI-инструменты (ChatGPT, Claude, GitHub Copilot) могут стать вашим вторым пилотом в рефакторинге и оптимизации. Главное — правильно формулировать запросы. В этой подборке — 10 проверенных промтов для реальных задач: от поиска утечек памяти до уменьшения бандла. Каждый промт сопровождается примером использования и пояснением, какую задачу он закрывает.

1. Анализ Event Loop и асинхронности

Задача: Найти блокирующие операции, которые замедляют отрисовку.

Промт:

Проанализируй этот JavaScript-код на предмет блокировки Event Loop. Найди синхронные операции, которые могут выполняться дольше 50 мс, и предложи асинхронные альтернативы. Учти, что код работает в браузере.

[вставьте код]

Пример использования: У вас есть функция парсинга большого JSON (5 МБ). AI укажет, что JSON.parse блокирует поток, и предложит использовать Web Worker или разбить данные на чанки.

Почему работает: Модель обучена на документации MDN и статьях по оптимизации, поэтому распознаёт типичные антипаттерны.

2. Рефакторинг legacy-кода с сохранением поведения

Задача: Улучшить читаемость и производительность старого кода, не меняя логику.

Промт:

Отрефактори этот код, сохранив его поведение. Улучши читаемость, убери дублирование, используй современные возможности ES2022+. Если видишь потенциальные баги — укажи на них отдельно.

[вставьте код]

Пример: Код с вложенными if и for можно превратить в цепочку методов массивов. AI предложит вариант с flatMap и reduce, но предупредит о возможном изменении порядка элементов.

Совет: Всегда запрашивайте тесты для проверки, что поведение не изменилось.

3. Оптимизация рендеринга в React

Задача: Уменьшить количество ререндеров и улучшить отзывчивость.

Промт:

Этот React-компонент часто перерисовывается. Проанализируй зависимости useEffect, useCallback и useMemo. Предложи оптимизации: мемоизацию, вынос состояния, использование useReducer. Объясни, почему каждый ререндер происходит.

[вставьте код компонента]

Пример: AI может обнаружить, что объект в зависимостях useEffect создаётся заново при каждом рендере, и предложить обернуть его в useMemo или вынести за пределы компонента.

Источник: Официальная документация React по оптимизации производительности.

4. Анализ и уменьшение размера бандла

Задача: Сократить время загрузки за счёт удаления неиспользуемого кода.

Промт:

Проанализируй этот отчёт webpack-bundle-analyzer (или Vite). Найди самые тяжёлые зависимости, которые можно заменить на более лёгкие аналоги или загружать асинхронно. Предложи конкретные шаги для tree-shaking.

[вставьте вывод анализатора или package.json]

Пример: AI укажет, что moment.js весит 300 КБ, и предложит заменить его на date-fns (20 КБ) или использовать нативные Intl.DateTimeFormat.

Факт: По данным Bundlephobia, замена moment на date-fns сокращает бандл на 80%.

5. Поиск утечек памяти

Задача: Выявить места, где объекты не освобождаются.

Промт:

Проверь код на утечки памяти: забытые таймеры, незакрытые подписки, циклические ссылки. Предложи исправления с использованием WeakMap, AbortController или других механизмов.

[вставьте код]

Пример: AI найдёт, что в useEffect не очищается setInterval, и предложит возвращать функцию очистки.

Ссылка: Chrome DevTools Memory Inspector — официальный инструмент для диагностики.

6. Code Review с AI: поиск багов и антипаттернов

Задача: Быстрое ревью пул-реквеста перед мержем.

Промт:

Проведи code review этого PR. Обрати внимание на: 1) потенциальные баги, 2) нарушение принципов SOLID, 3) проблемы с производительностью, 4) безопасность. Дай рекомендации с примерами кода.

[вставьте diff или файлы]

Пример: AI заметит, что в новом коде используется innerHTML без санитизации, и предложит textContent или DOMPurify.

Почему полезно: Экономит время senior-разработчиков и снижает вероятность пропустить ошибку.

7. Написание unit-тестов для сложной логики

Задача: Покрыть тестами рефакторинг или новый модуль.

Промт:

Напиши unit-тесты для этой функции, используя Jest. Покрой граничные случаи: пустые значения, отрицательные числа, исключения. Добавь моки для внешних зависимостей.

[вставьте код функции]

Пример: Для функции расчёта скидки AI сгенерирует тесты на 0%, 100%, отрицательную цену и отсутствие товара.

Совет: Проверяйте, что тесты действительно падают при внесении бага.

8. Оптимизация алгоритмов и структур данных

Задача: Ускорить работу с большими массивами или объектами.

Промт:

Предложи более эффективный алгоритм для этой задачи. Оцени сложность по Big O. Если возможно, используй Map/Set вместо объектов или массивов.

[вставьте код]

Пример: Поиск дубликатов через filter и indexOf (O(n²)) AI заменит на Set (O(n)).

Источник: Классические алгоритмы и структуры данных, адаптированные под JS.

9. Уменьшение времени до первого байта (TTFB) и LCP

Задача: Улучшить метрики Core Web Vitals.

Промт:

Проанализируй этот HTML и JS. Предложи, как улучшить LCP и TTFB: критические стили, preload, defer/async для скриптов, оптимизация шрифтов. Учти, что сайт на React.

[вставьте код]

Пример: AI порекомендует вынести критический CSS инлайн, а остальное загружать асинхронно, а также использовать font-display: swap.

Ссылка: web.dev/vitals — официальное руководство Google.

10. Безопасный рефакторинг с проверкой типов

Задача: Перевести проект на TypeScript или добавить JSDoc-типы без поломок.

Промт:

Добавь JSDoc-типы к этому JavaScript-коду. Проверь, что типы соответствуют реальному использованию. Если есть несоответствия — укажи на них. Предложи, как исправить.

[вставьте код]

Пример: AI найдёт, что функция ожидает число, а передаётся строка, и предложит преобразование или изменение сигнатуры.

Почему полезно: Постепенная типизация снижает количество ошибок в рантайме.

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

1. Всегда делайте бэкап перед применением изменений.
2. Запускайте тесты после каждого рефакторинга.
3. Используйте канареечные релизы для проверки в реальных условиях.
4. Проверяйте метрики (Lighthouse, Web Vitals) до и после.

Эти промты — не волшебная таблетка, а инструмент, который экономит часы рутинной работы. Главное — применять их осознанно: AI предлагает, а решение принимаете вы. Начните с одного промта, например, анализа Event Loop, и постепенно внедряйте остальные. Помните: цель — не просто ускорить код, а сделать его поддерживаемым. Попробуйте эти промты в своём следующем проекте и поделитесь результатами в комментариях.