Тестирование производительности React-компонентов в CI

Расскажу, как внедрял автоматическое тестирование производительности React-компонентов в дизайн-систему и сервисы SberDevices, а также про инструмент, который создал во время решения этой задачи.

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

Есть инструменты измерения производительности компонентов. Но у большинства из них нет поддержки React 18 или они не подходят под наши требования. Или они не автоматические и вообще ими никто не пользуется, потому что это дополнительная рутинная работа. Решение: реализовать и внедрить в проверки пул-реквеста систему тестирования производительности, которая будет честно измерять компоненты в нативной среде, при этом будет достаточно стабильной и выдавать как можно меньше ложных результатов в условиях прогонов на виртуальных машинах.

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

Технологии: TS, React 18, Puppeteer, Node.js, webpack, GitHub workflows. 

Будет интересно разработчикам и лидам команд, вовлеченных в поддержку своих сервисов по производительности.