Vite vs CRA: A Performance and Feature Comparison

To put it short and straight, between Vite vs Create React App, Vite performs better overall. But Create React App (CRA) has more compatibility. In some cases, CRA is better than Vite. To learn in depth please follow the post.

Vite is an ultra-fast no bundler development server setup. It starts your localhost server almost instantly. And lets you edit files with Hot Module Replacement (HMR) in the blink of an eye. Which relieves lots of stress while developing an ambitious project.

On the other hand, Create React App (CRA) used to be the default and traditional method of building React applications. It allows you to create React projects with TypeScript and plain JavaScript.

Both tools have undoubtedly played a very important role in the web development world. But,  Vite vs Create React App: Which option is better in modern front-end web development? We will try to explore and analyze this question in depth in this whole article.

Before starting the blog post, let me briefly explain why it is important to read this article carefully. I assume you are reading this post which means you will start working with the React Application.

Before starting your lovely project, you should know well which technology you should use. Otherwise, due to choosing the wrong tools or technology, you may feel regret in the middle of the project.

While working on a React project, choosing the right React development tools is very important. Because in most cases, your overall development satisfaction will depend on this. So I recommend reading this entire blog post. Which will save you from wasting a lot of time and frustration in the future.

What is Vite and Its Core Features and Philosophy

In the core concept, Vite is a front-end tooling solution. Which gives you an efficient dev server and code bundling feature for production.

Vite also has some other key features. All the major features are briefed one by one below:

Ultra-Fast No Bundler Dev Server

Vite provides one of the fastest-dev local servers available today. That means you can start your local host almost instantly.

Most build tools first bundle the project files into a single file. Then it starts the dev server and presents that single file into the browser. In this bundling process, the build tools take some time.

Larger projects have more dependencies, so more time is required for the bundling process. Resulting in a slower local server starting.

The reason build tools follow this process is that older browsers don’t support ESModule or multiple files. In that case, it was necessary to convert those files of the project into one file through the bundle process.

But current modern web browsers natively support ESModule. That means the browser is now able to import and export multiple files as needed.

Vite leverages the browser’s natively supported ESModule to achieve such high speed. In other words, Vite does not bundle your project files. It just starts the server. And the coding files of your project are imported as needed by the Browsers.

Because Vite doesn’t need to bundle project files. So time wasted in the bundle process is saved. And that’s how you experience a high-speed server.

Fast Hot Reloading

Imagine you’re in the middle of a project. And testing your app. At such a time you feel that you need to change something in your app. In such a situation you can make changes to the app without shutting down the server through Hot Reloading.

In this case, Vite provides an efficient and smooth Hot Reloading feature through the browser’s HTTP Headers.

Dependency Pre-Bundling Using ESbuild

Many times we need to use many types of dependencies for our project. These dependencies have some internal dependencies or modules. As your project grows over time, dependencies also increase.

In this case, Vite automatically pre-bundles your dependencies smartly. It handles your NPM dependencies efficiently.

For example, Tailwind CSS dependencies include 200+ internal modules. Vite bundles these 200+ internal modules into 1 module using esbuild.

By doing this, your browser can import the module by making only 1 HTTP request instead of 200+ HTTP requests. As a result, you will enjoy a smooth and fast page-loading experience.

Vite Core Philosophy

Vite has been thriving with a single-focused philosophy since its inception. That is to provide a fast and smooth developing happiness for frontend developers.

It currently supports the popular frontend framework React, Vue.js, and several other frameworks. And slowly Vite continues to grow its front-end tooling list.

An interesting fact is that the creator of Vite and Vue.js is the same person Evan You.

What is Create React App (CRA)?

Create React App (CRA) is a tool for developing single-page React applications. It comes with a webpack module bundler. And gives us a local server environment for working with React.

In 2011, Facebook used React experimentally on their News Feed. This led to the birth of React, one of the most popular libraries today.

React is inspired by XHP, a PHP-based HTML component library. A Meta engineer named Jordan Walke created “FaxJS” as an early-stage prototype project of React. Later on, it was further developed and named React. And started being used on Facebook and Instagram.

Initially, though, React was a private source library. But in May 2013, React was made open source at JSConf in the US.

Create React App (CRA) is used to create React’s local development environment. Until now, the React team officially recommended CRA for React development.

However, on Jan 22, 2023, Theo Browne opened a pull on GitHub to replace the Create React App (CRA) from React’s official docs. And the pull was going viral among the dev community.

In response, the React team decided to discontinue the CRA recommendation officially. Instead of CRA, Next.js is now the official recommendation by the React team.

Although Create React App (CRA) is not officially recommended by React. But it still held a lot of popularity. And for most of the time Create React App works absolutely fine.

Create React App (CRA) Core Features

CRA provides many core features and tools to build React applications. Which will give you an overall convenient environment to work with React.

Below is a brief on three important core features of CRA:

More Browser Compatibility with Babel

By default, Create React App or CRA comes with built-in Babel. Babel is a JavaScript code compiler. It converts your modern code to old backwards compatible code.

This means your modern code easily supports older browsers. Which gives your React app greater availability, stability, and compatibility.

Babel is able to convert modern JavaScript, ES6, TypeScript, React, and many other types of code into Blackwards-compatible code.

Analyze Code with ESLint

ESLint is a code analysis tool. It analyzes your JavaScript code and catches common programming errors.

ESLint also checks your code standard and enforces that you follow the standards. Which increases code quality and saves a lot of development time.

Create React App (CRA) comes up with pre-configured ESLint. That means you don’t need to configure ESLint separately in your React project.

Advanced Bundling with Webpack

We use a variety of module bundlers to optimize performance and reduce browser loading time. Among them, Webpack is one of the most popular module bundling tools.

Which smartly bundles our modules and makes them presentable to the browser. And again, Webpack comes built-in with CRA.

Pros of CRA:

• CRA is very simple. Most of the required dependencies are already pre-configured. So less learning is required.
• It is easily manageable as there is only one build dependency needed.
• By default, CRA comes with ESLint, Babel, and Webpack. But you have the power to advance configure or “eject” any dependencies as you need.

Cons of CRA:

• Slower dev server start. CRA compiles and bundles project dependencies before starting the server. This process takes some time. So local host server takes a little bit extra time to start.
• Fewer tools support and customizable options.
• Slower hot module replacement (HMR).

Vite vs Create React App: Ultimate Performance Comparison

So we already covered enough basics of both Create React App (CRA) and Vite. Now we will do the most important part. The performance testing.

All tests will be done on my old Windows 10 machine. It will be done on the same machine and same condition to get an unbiased result.

The Speed Sheet

In the speed sheet chart given above, we can clearly see that Vite is far ahead of Create React App in terms of speed.

The biggest performance gap is noticed during local server initialization. In this case, Vite is capable of 11 times more speed than CRA.

On the other hand, the least difference is seen during the first time the webpage loads. In this regard, Create React App and Vite show almost close performance. The CRA-based application took 590 milliseconds and Vite 380 milliseconds respectively when the webpage was refreshed.

Also, two major factors while working on a React application are Hot Module Replacement (HMR) and project building. A significant performance gap has been observed in both these subjects.

While CRA took 643 milliseconds in Hot Module Replacement, Vite took only 126 milliseconds. Which was an almost instant reload. Vite took 6.5 seconds to bundle the project dependencies, while Create React App (CRA) took 22.3 seconds. Which is 3.43 times slower than Vite.

Overall, the Vite is in a very respected position from a performance and speed perspective.

Installation Packages And Bundle Size

Vite embraces the lightweight approach. It does not install less important dependencies by default. So that unnecessary dependencies in your project do not kill the efficiency. Also, you can add dependencies as per your requirements anyway.

Create React App (CRA) embraces a ready-to-go approach. That is, CRA installs a wide range of dependencies by default so that the user does not have to do any additional configuration. And enjoy a hassle-free development experience.

For the purpose of this article, I installed a React project with TypeScript templates through both CRA and Vite. During Create React App’s default TypeScript template installation, it adds around 1508 dependencies. And it took 2 minutes 35 seconds.

Vite on the other hand prefers to be lightweight so it only adds 208 dependencies. Which is much less than 1508. As a result, installation of Vite TypeScript templates takes only 22 seconds. Which is much less than 2 minutes 35 seconds.

I have already published a blog article about installing projects through Create React App with TypeScript, you can read the article by clicking here.

So what about the project Bundle size? I hope you already guessed it. Yes, Vite is also winning in this criterion.

I built the same simple application with both Vite and CRA. And was bundling them. The folder size with the Create React App builder is 544 kb. And with Vite, it’s only 147 kb.

Features Comparison: CRA vs Vite

Customization and Configuration

Vite:

Vite is very flexible and highly configurable. You can easily add, remove, or modify various plugins through the “vite.config.js” file.

Vite is not pre-configured. So you can configure Vite according to your project needs. For that reason, Vite is able to achieve high efficiency and optimization.

CRA:

Create React App on the other hand provides a zero configuration ready-to-go setup. That means you can work with React projects instantly without doing any configuration.

While this approach is very easy to start with. However, it becomes more complex for you to configure as your project grows and requires more configuration.

Compatibility and Ecosystem

Vite:

One of the cool things about Vite is that it supports multiple frameworks. One of its core philosophies is to provide front-end developers with the best tooling support. From this core philosophy, Vite continues to grow its framework support list.

It supports React, Vanilla, Vue, Preact, Lit, Solid, etc. You will also find many community templates to work with on Vite.

CRA:

For a long time Create React App has held a respectable position in working with React projects. But like Vite, it doesn’t support multiple frameworks. It is closely integrated with the React ecosystem.

In CRA you get a bit more compatibility. Because it comes with a built-in Babel. Which gives you the compatibility to run your code on a wide range of older browsers.

Developing Experience

Vite:

Vite supports multiple frameworks, plugins, and templates. So you can create more ambitious projects in Vite.

Vite’s community is amazing and powerful. And its documentation is well-written. To learn more about Vite, check out their official documentation.

It is quite easy in terms of usability and simplicity. However, its learning curve is comparatively higher than CRA.

CRA:

There was a time when CRA’s developing experience was much better. But recently it’s a little harder to work with than before. And it lags behind the Vite in terms of developer happiness.

However, CRA still holds the status of the largest community. It has 101k stars on GitHub.

In terms of usability and simplicity, CRA is easy and usable for beginners. Thanks to its zero-configuration ready-to-code approach. And its learning curve is very straight and easy compared to Vite. Learn more on their official documentation.

Use Cases

When you are going to work on any large-scale ambitious project. And if you want a smooth front-end dev experience, then Vite is best suited for you.

But if you are a beginner and want to work with a simple single-page React application. Then CRA may be more suitable and easy for you than Vite.

It depends on what kind of project you plan to work on. And on what direction you plan to take your project in the future.

Let’s Call The Wrap

Ultimately, choosing between Vite and Create React App (CRA) depends on the project requirements.

On one side is Vite, which comes with a super fast dev server and instant hot reloading facility. CRA, on the other hand, comes with more compatibility and ease of use.

If speed is one of the crucial parts of the project then definitely choose Vite. And if the project needs more wider range of compatibility and beginner friendliness. Then Create React App should be a better option.

My personal recommendation is to go with Vite. Although its learning curve is relatively high, you will need to spend a little more time learning it than CRA. But it will be definitely worth the time in the long term.

That’s it for today, if you’ve read the article this far, thank you very much. And HAPPY CODING!