Why I prefer Vite over Create-React-App for React Projects
Tags: javascript, webdev, vite, react
Published: 2022-09-03 07:39:11

## Introduction

Vite and Create-React-App (CRA) are build tools for frontend applications that provide a faster developer experience. They provide many features out of the box that significantly reduces the development and shipping time of the applications. They provide a local development server to develop the apps locally and also provide the feature to take an optimized production build for shipping the project.

## Main Differences
- CRA is used only for Scaffolding React Applications.
- Vite can be used for Scaffolding vanilla JS, Vue, React, etc., Applications.

## Working with CRA and Vite for React
Let's get our hands dirty and test it ourselves. All the commands will be run from the vs code bash terminal.

### Clear NPM Cache

First up, before going into the comparison, let's clear the npm cache by executing the below commands.

    $ npm cache clean --force

We are clearing the npm cache to start from scratch. Or else, the packages stored in the cache might be used while scaffolding the app, which will reduce the timings.

### Create-React-App

**Scaffolding the App:**

Now let's try CRA. Open up the terminal and run the following command to install the CRA package globally.


    $ npm i -g create-react-app 

Now run the below command to create the react app.

    $ time npx create-react-app cra-demo

`time` command in Linux will display the time elapsed details of the command that follows. This command will work in vs code bash terminal as well.

Once the command execution is over, we will see the time taken at the end.


![Time elapsed CRA.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662140595417/PIA2GqA-m.png)

So, for creating an app using CRA, the elapsed time is `1 minute and 50 seconds (110s)`.

**Production Build:**
Without making any changes to the app, let's run the build command to check the production bundle size. 


    $ npm run build

The production build will be available in the `build` directory. Let's check the size of the build folder using the below command.


    $ du -sh build


![CRA build size.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662140639985/lfw7_1zss.png)

The production bundle size is `586K`.
Now let’s move on to Vite.

### Using Vite:

**Scaffolding the App:**

Before running vite, let's clean the npm cache once again with the command that we used above.

Now, let’s create a react app using the below command


    $ time npm create vite@latest vite-demo -- --template react


![Vite scaffolding.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662140664930/qVkfY0u9N.png)

Great! It just scaffolded an app in `4.5s`. But wait! That’s not over yet. Vite will just scaffold the app without installing any dependencies. We need to run one more command to install the dependencies. 

    $ cd vite-demo
    $ time npm install

Let’s time the installation duration and see.


![Vite package install.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662140684405/OsbSF2Vgr.png)


That’s Great again! It just took 15 seconds to install the dependencies. In total VIte roughly took `20 seconds` to scaffold a react app. Time has reduced significantly.

**Production Build:**

Without making any changes to the app, let's run the build command to check the production bundle size.


    $ npm run build

The production build will be available in the `dist` directory. Now check the size of the build folder using the below command.


    $ du -sh dist


![Vite Prod build.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662140698133/4yahJ-v-X.png)

The production bundle size is just `165K` which is less than one-third of the production build created by React.
The lesser the bundle size, the faster rendering of the app by the browsers.

## Summary

Let’s summarize our findings in a table for better understanding.

| **Create React App (CRA)**                                      | **Vite**                                                       |
| --------------------------------------------------------------- | -------------------------------------------------------------- |
| It can be used only for scaffolding the react apps              | It can be used for scaffolding vanilla js, vue, react, etc.,    |
| It supports Typescript                                          | It supports Typescript                                         |
| Time taken to create a project is `110s`                        | Time taken to create a project is `20s`                        |
| Production build will be available in the `build` folder by default | Production build will be available in the `dist` folder by default |
| Production bundle size is `586K`                                | Production bundle size is `165K`                               |


## Conclusion

As we can see from the table above, Vite is the clear winner here. Hence, I prefer Vite over CRA. Comment down your opinions below