Both Create React App (CRA) and Vite are build tools that can be used to create single page applications (SPAs).

Today, CRA is still considered the de facto standard for creating new React applications. It’s even officially recommended in the React documentation. To be fair, I’ve used CRA in several applications and it’s a feature rich solution that does a good job.

I have no hate for CRA, but in my experience, it can be slow even for medium sized apps. From start up times for the dev server to production build times, CRA leaves a lot to be desired.

I recently switched an internal application over from CRA to Vite.

Vite is a more modern build tool that uses rollup and esbuild under the hood to drastically improve speed. After the change, I’ve noticed that start up and build times have significantly improved.

These are the changes I’ve seen:

Before (CRA)

• Starting the dev server: 1 minute and 5 seconds
• Creating a production build locally: 1 minute and 30 seconds
• Creating a production build in our CI / CD pipeline: 3 minutes

After (Vite)

• Starting the dev server: 25 seconds the first time and less than 4 seconds on subsequent runs (after caching)
• Creating a production build locally: 12 seconds
• Creating a production build in our CI / CD pipeline: 1 minute

I recognize that this isn’t a proper performance test, but it’s a noticeable change I’ve experienced in my own workflow.

So where do the 32 minutes come from? I took a look at the number of times I ran the CI / CD pipeline in the past week (16) and multiplied that by the time difference saved between CRA and Vite (2 minutes).

The thing to keep in mind is that this only reflects my use of the CI / CD pipeline. If we account for the rest of the team and local development, that’s even more time saved!