Back to blog

Using Vitest bench to track performance regressions in your CI

Using Vitest bench to track performance regressions in your CI
Posted on November 21st, 2023 by
Adrien Cacciaguerra avatar
Adrien Cacciaguerra
@adriencaccia
Arthur Pastel avatar
Arthur Pastel
@art049

One of the easiest ways to track performance regressions in your JavaScript applications is to use Vitest's API. It lets you write benchmarks as easily as unit tests:


Then you can run the benchmarks with :


The problem that we now face is that the results are inconsistent between runs. Running the command multiple times in a CI/CD runner or on your machine will yield different results. Thus it will be hard to spot performance regressions with confidence.

This is where using CodSpeed comes in handy. CodSpeed provides a way to run benchmarks in a consistent manner, and thus detect performance regressions with confidence.

We are excited to announce that CodSpeed now has first-class support for Vitest!

How to use Vitest with CodSpeed

Install the package and as dev dependencies:



Create or update the file at the root of your project:



Let's create a fibonacci function and create some benchmarks on it. Create a new file :


Create a new file :


Now we can run the benchmarks with :


We can see that CodSpeed has been detected and that the benchmarks have been run. For the moment we can see the default output of Vitest's API.

Running the benchmarks in your CI

To generate performance reports, you need to run the benchmarks in your CI. This allows CodSpeed to detect the CI environment and properly configure the instrumented environment.

Enable the repository on CodSpeed

The first step is to log in to CodSpeed and import the repository you want to track. You can find more information about this in the CodSpeed documentation.

After installing the GitHub app and importing the repository in CodSpeed, you will be prompted a secret to copy. This token is used to authenticate the CodSpeed GitHub Actions workflow.

Add a CodSpeed GitHub Actions workflow

Open a Pull Request on your repo with the previous changes, and the following GitHub Actions workflow . It will run the benchmarks and report the results to CodSpeed on every push to the branch and every pull request:


If everything went well, the workflow should run and after it finishes you should see a comment from the CodSpeed GitHub app on the Pull Request with the run report.

Visualizing the benchmarks on the CodSpeed app

By clicking on the CodSpeed comment in the Pull Request, you will be redirected to the CodSpeed report of the PR. You will see a list of the benchmarks, and when clicking on the benchmark its flame graph will appear:

Execution profile
Execution profile not availableWe couldn't create an execution profile for this benchmark.Check the documentation for more details on enabling trace generation.

Flame Graphs component taken from the CodSpeed app. It is fully interactive, don't hesitate to play with the buttons!

And that's it for the installation of CodSpeed with Vitest, now we can explore a bit more what CodSpeed offers.

Visualizing a performance change

One of the main features of CodSpeed is to detect and visualize the performance changes of a pull request.

Let's now say that we are on a more complex project where we have a function that parses a GitHub pull request. We created a pull request with some performance improvements, and the following is in the CodSpeed report:

parsePr::short body
Improve parsing performance
+25%
1.5 ms
1.2 ms
Measured with CodSpeed
Execution profile
parsePr::short body
parsePr (92.89%)
prepareParsingBody (63.21%)
parseBody (57.32%)
parseIssueFixed (25.49%)
logMetrics (19.64%)
sendEvent (8.01%)
parseTitle (28.67%)
modifyTitle (6.49%) (new)
logMetrics (21.33%)
sendEvent (8.70%)
Slower
Faster
New

The Diff graph shows the resulting graph of the difference between the head and base runs, allowing us to pinpoint where the performance changes are inside the code

We observe a 25% improvement in the overall benchmark, driven by enhancements in the and functions. Although the function has experienced regression, its impact on the overall benchmark is less pronounced compared to the observed improvements. Additionally, a new function, , is introduced and denoted by the distinctive blue color.

Thanks to the differential flame graph, it is now really easy to understand at a glance what code changes impact the performance.

Wrapping up

And there you have it—CodSpeed now supports Vitest to make performance testing a breeze for your JavaScript and TypeScript projects! With an easy-to-use bench API and the magic touch of CodSpeed's consistency, tracking regressions is as simple as adding a unit test.

Get ready to supercharge your CI with performance reports, flame graphs, and more!


If you enjoyed this article, you can follow us on Twitter to get notified when we publish new articles and product updates.

Resources

Share this:

Ready to bench?

Unlock the full potential of your code today. Don't guess, just measure.
Get started
Request a Demo
ResourcesHomePricingDocsBlogGitHub
Copyright © 2023 CodSpeed Technology SAS. All rights reserved.