The vast majority of projects rely on Create React App mainly because of the fact that this particular solution is pushed by the creators of the most popular front-end application development library, React. CRA is the default choice in React’s documentation and for many developers it remains the default option since they have never checked out other JavaScript app build tools.
But there are better alternatives. At Makimo, we are moving many or even most of our applications to Vite. In the article below, I’ll describe why we took on this task.
I will also discuss the limitations of Create React App. CRA is a very simple tool for configuring JavaScript projects, and while you can create a working project with a single command, due to its limitations on configuration and the bundler used, Vite proved to be a better choice.
Benefits of Vite vs Create React App
CRA (Create React App) is an extension that makes it unnecessary to configure Webpack, one of the most popular bundlers. CRA does not add new capabilities to Webpack. On the contrary, it limits the number of possible choices, making it a foolproof solution for beginner developers.
Build speed
The main reason for changing CRA to Vite was speed. Vite uses the esbuild bundler, which is much faster than the Webpack used in CRA. It owes its speed to the fact that it is written in Go — a fast, multithreaded language compiled to machine code, unlike Webpack, written using JavaScript, which is interpreted and single-threaded, which in turn makes it slower.
In one smaller project, we swapped CRA for Vite and the time it took to build the application dropped almost in half. We went from 28.4 seconds to 16.1. The savings of this time can be seen most with any kind of automation, such as Github Actions, where we pay for each minute consumed.
The local server also starts much faster. CRA starts the same project in 4.5 seconds, where Vite performs the task in just 390 ms. This translates into significant time savings. With a single developer working on a project, the differences may not be noticeable, but if we look at the bigger picture, the savings are already much greater.
The savings from initial builds and deployments might be a cool thing, but there’s something even better. During development we use hot reload (reloading the application after each change while writing the application so that it reflects the changes as quickly as possible) many times a day. In CRA, we had to wait about 5 seconds for the view to update after each save. In Vite, this happens virtually instantly, which makes development more enjoyable and efficient, and prevents distractions when waiting to build the application, which completely changes the quality of work.
Saving a few seconds each time doesn’t seem like much, but if you think about a large application that can take several minutes to build, the difference is then definitely more noticeable.
Here are a couple more projects we have rewritten:
| Project 1 | Project 2 | |
| Production build | 28.4s -> 16.1s | 107s -> 36.2s |
| Developer mode | 4.5s > 0.390s | 7.4s -> 0.365s |
| Hot reloading | 5s -> tens of ms | 4 -> tens of ms |
Transferring the application to Vite is also quick. There are a lot of step-by-step tutorials on the Internet on how to do it, which allows you to efficiently transfer your app in less than a day. I have personally used and can recommend this one: https://dev.to/wojtekmaj/migrating-your-react-app-from-webpack-to-vite-inp.
Configurability
Many people have chosen CRA because it does not require configuration. Its main advantage is the ability to run a React application with a single command, but this comes at the cost of a lack of flexibility. With larger projects, you will surely notice the need to add new capabilities to CRA.
When CRA does not support a feature, the hacking of its shortcomings begins. For example, to restore Webpack’s configuration file, you have to install CRACO instead of CRA itself, which limits us to using CRA in version 4.
On the other hand, Vite has plugin support developed with rollup.js in mind, which is a popular new solution that allows you to quickly write Rollup plugins, enabling you to add missing capabilities. Rollup has a much larger ecosystem of plugins, allowing you to create an environment more tailored to your needs.
Support for frameworks
In the company, we use various frameworks, such as React, Vue and Svelte. CRA limits its capabilities only to React. When we develop applications in another framework, we would have to learn another tool from scratch. Vite, despite the fact that it is created by the creators of Vue, allows us to configure React, Vue and less popular frameworks such as SolidJS, Svelte or Lit. By using Vite for each project, we save a lot of learning time and the projects are more unified, which allows newcomers to join the project more easily.
SSR
Vite also has built-in support for the increasingly popular server side rendering, which is the building of parts of a page on the server side, making it even faster and more convenient for the user to use the site.
Development
Previously, we used a solution called Snowpack, but unfortunately the project is no longer maintained, so we started looking for well-developed alternatives with a large user base as well as contributors, so as not to fall into the vicious circle of changing tools every now and then.
Conversely, Vite has a reasonably stable and extensive ecosystem. On npm, it has an average of 2.5 million downloads per week. Updates are released on average once a month, and the community is constantly working on fixes.
Killer feature
The most important gain, however, is speed during application development. Even a few seconds of waiting for an application to refresh in your browser can cause you to get distracted and lose focus. And this can happen hundreds of times in a day. With Vite, we have never experienced such a problem.
Summary
Create React App is suitable for building your first simple app in React. However, you’ll quickly notice its limitations, so it makes sense to choose a more configurable tool when creating an app.
Vite proved to be the best choice for our company, where we use many different frameworks.
Because of its speed and simplicity of configuration, the time invested in switching to Vite quickly pays off. Despite its huge capabilities, the tool is easy to use and does not limit developers.
Above all, the use of Vite allows you to save time as well as it is a flexible enough tool to fit into any JS project.
I recommend it to everyone.
