DEV Community

Cover image for Use Vite for React Apps instead of CRA
Nilanth
Nilanth

Posted on • Edited on • Originally published at Medium

Use Vite for React Apps instead of CRA

Most of us will be using Create React App for creating React App. It supports all the configurations out of the box. But when your project code grows you might face higher build times, a slower start in the development server and waiting 2 to 5 secs to reflect the changes you have made in code and this might increase rapidly when the app grows on a larger scale.

This increases

  1. Development time, as we need to wait for 2 to 6 secs for each change.
  2. Production Build Time, it might take around 10 to 20 minutes to deploy a quick fix.
  3. Time, Time is money 🙂.

Why CRA dev server is slow?

CRA uses Webpack to bundle the code. Webpack bundles the entire code, so if your codebase is very large more than 10k lines you might see a slower start in the development server and a long waiting time to see the changes made.

bundler-image

As you can see in the above image, the Entire code is bundled to make the server ready for development.

How to make it faster?

Instead of using CRA for creating React App, we can migrate to Vite. Vite is the next generation frontend tooling to build the app faster.

Highlights of Vite

  1. On-demand file serving over native ESM, no bundling required!
  2. Hot Module Replacement (HMR) that stays fast regardless of app size.
  3. Out-of-the-box support for TypeScript, JSX, CSS and more.
  4. Pre-configured Rollup builds with multi-page and library mode support.
  5. Rollup-superset plugin interface shared between dev and build.
  6. Flexible programmatic APIs with full TypeScript typing.
  7. Supports React, Vue, Preact, Svelte.

How Vite is faster than CRA?

Vite uses esbuild which is written in Go and pre-bundles dependencies 10–100x faster than JavaScript-based bundlers.

Vite improves the development server start time by dividing the modules of an application into two categories: dependencies and source code.

Dependencies are mostly plain JavaScript that does not change often during development. Some large dependencies (e.g. AntD) are also quite expensive to process.

Source code often contains non-plain JavaScript that needs transforming (e.g. JSX, CSS or etc components), and will be edited very often. Also, not all source code needs to be loaded at the same time (e.g. with route-based code-splitting).

vite-build

As you see in the above image, Vite only needs to transform and serve source code on demand, when the browser requests it. Code-behind conditional dynamic imports are only processed if actually used on the current screen.

I have migrated an existing CRA based react app to Vite. Let’s compare the difference.

CRA Dev server start duration

cra-dev-server

CRA took 12s to start the development server. The sample app only contains 2 routes and 6 components. Let’s see the same using Vite

Vite Dev server start duration

vite-dev-server

Vite only took 298ms to start the dev server, It’s blazing fast when compared to CRA. As you can see a huge difference between the two tools. Let’s also compare the production build time of both.

CRA build duration

cra-build

CRA took 16.66s to build the app. Let’s see Vite's performance.

Vite build duration

Vite uses the same bundle approach for production build with Rollup, as using unbundled native ESM in production will cause extra HTTP requests.

vite-build

Vite with rollup took only 9.11s to build the entire app, Seems better compared to CRA. As it reduces the 40 to 50 percentage for build time when using Vite. This is more effective. For instance, if your current build time is 20 minutes, it will come down to 10 to 12 minutes when using Vite 🚀.

Not satisfied with the comparison check this tweet.

Hope you are thinking about how to migrate your current React CRA app to Vite?

It’s not a big deal! Let start over

Migration CRA to Vite

  • Remove the react-scripts from the package.json dependency.
  • Add sass in package.json, if you are using CSS or SCSS.
  • Add the below dependencies as a dev dependency
"devDependencies": {
  "@vitejs/plugin-react": "1.1.1",
  "vite": "2.7.0"
},
Enter fullscreen mode Exit fullscreen mode
  • Add the below commands to scripts
"scripts": {
  "start": "vite",
  "build": "vite build"
},
Enter fullscreen mode Exit fullscreen mode
  • Create a file vite.config.js in the root folder and add the below code

react() is used to avoid the manual import of React in .jsx and .tsx modules.

  • Move the index.html file outside public the folder.

  • Remove all the %PUBLIC_URL% from index.html

//From
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
//To
<link rel="icon" href="/favicon.ico" />
Enter fullscreen mode Exit fullscreen mode
  • Add the below script tag in the body of the index.html
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script> // Need to add
Enter fullscreen mode Exit fullscreen mode
  • Update your ENVs from REACT_APP to VITE as below
// From
REACT_APP_ENV = local
REACT_APP_HOST_UR = https://reqres.in/api/
// To
VITE_ENV = local
VITE_HOST_URL = https://reqres.in/api/
Enter fullscreen mode Exit fullscreen mode
  • Now just run npm install or yarn

  • Now run yarn start or npm start, Done!. Now our CRA app is migrated to Vite.

Notes:

If you face any issues in importing the components use the resolve alias.

New React App using Vite

Use the below command to create a fresh react app.

yarn create vite my-react-app --template react
Enter fullscreen mode Exit fullscreen mode

Reference

  1. Vite
  2. esbuild
  3. Rollup
  4. Vite preset templates

Conclusion

Vite seems very efficient, speeder and saves more time compared to CRA. Try Vite, you can see the difference.

Thank you for reading.

Get more updates on Twitter.

You can support me by buying me a coffee ☕

eBook

Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples

ReactJS Optimization Techniques and Development Resources

Twitter Realtime Followers Count

Twiter Stats

More Blogs

  1. Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
  2. Don't Optimize Your React App, Use Preact Instead
  3. How to Reduce React App Loading Time By 70%
  4. Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support
  5. No More ../../../ Import in React
  6. 10 React Packages with 1K UI Components
  7. 5 Packages to Optimize and Speed Up Your React App During Development
  8. How To Use Axios in an Optimized and Scalable Way With React
  9. 15 Custom Hooks to Make your React Component Lightweight
  10. 10 Ways to Host Your React App For Free
  11. How to Secure JWT in a Single-Page Application

Top comments (12)

Collapse
 
jonaspetri profile image
Jonas Petri

I love Vite!
Just to add one thing, to create a new Vite app with npm, do

npm init vite
Enter fullscreen mode Exit fullscreen mode

and let the selection menu do the rest! No parameters needed!

Collapse
 
andrewbaisden profile image
Andrew Baisden

I have heard many good things about Vite. My default is to use Create React App or Next.js. Might give Vite a go next time to see how it compares first hand.

Collapse
 
radandevist profile image
Andrianarisoa Daniel

Nice article about vite. I think it is a good idea too if you added another one on how to setup tests with it (vitest +react testing library).

Collapse
 
cathalmacdonnacha profile image
Cathal Mac Donnacha 🚀
Collapse
 
radandevist profile image
Andrianarisoa Daniel

Great! Gonna check that!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

Thank you so much for pointing out the advanteges using Vite over CRA/webpack! Exactly what I needed right now! 💯

Collapse
 
seancassiere profile image
Sean Cassiere

Yup, I completely agree!

I recently migrated a large Typescript CRA app to Vite, and loved the dev server and build times.

Although I ran into a weird a couple bugs, which REQUIRED me have the import React statement in all my .tsx files (something which CRA didn't need), and the component exported from the react-moment package outright didn't work.

Outside of these couple issues, been loving the switch and improved dev experience.

Collapse
 
connor_cc profile image
Connor

Thank you. really good read.

Collapse
 
ilialuk profile image
Ilia luk

try comparing it to CRA with craco-esbuild, I believe they will compare the same and this whole migration argument of faster build times will be pointless.

Collapse
 
arjun_kayalmoni profile image
Full Stack Spiderman

using plugins: [react()] has no effect and I'm still receiving React reference error. Trying to find a way to avoid importing react in *.jsx

This happens when I migrated my app from CRA to vite.

Collapse
 
cathalmacdonnacha profile image
Cathal Mac Donnacha 🚀

Great article

Collapse
 
suryapranesh4 profile image
Surya Pranesh

Thank you for this great post ✨💯!!
I have updated my react app to use rocket fast vitejs⚡️ for faster dev!!