Performance Testing of React Components in CI Pipelines

In this talk, I will share my experience of implementing automatic performance testing of React components in the design system and SberDevices services. I will also discuss the tool that I created in the process. 

Inconspicuous bugs in components that cause performance problems can leak into production. The problem is only discovered after deployment in the form of changed metrics. At this point, business goals start to conflict with speed goals, and as a result, the problem can take a long time to solve.

There are tools for measuring the performance of components, but most of them do not support React 18, or they do not meet our requirements, or they are not automatic and no one uses them at all, because it is additional routine work. Solution: implement and integrate a performance testing system into pull request checks that will measure components in a native environment, while being stable enough and producing as few false positives as possible when running on virtual machines.

I'm going to talk about requirements, research of existing tools, problems and implementation.

Technologies: TS, React 18, Puppeteer, Node.js, webpack, GitHub workflows.

Target audience: developers and team leads involved in supporting their services for performance.