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
- Development time, as we need to wait for 2 to 6 secs for each change.
- Production Build Time, it might take around 10 to 20 minutes to deploy a quick fix.
- 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.
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
- On-demand file serving over native ESM, no bundling required!
- Hot Module Replacement (HMR) that stays fast regardless of app size.
- Out-of-the-box support for TypeScript, JSX, CSS and more.
- Pre-configured Rollup builds with multi-page and library mode support.
- Rollup-superset plugin interface shared between dev and build.
- Flexible programmatic APIs with full TypeScript typing.
- 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).
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 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 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 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 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"
},
- Add the below commands to scripts
"scripts": {
"start": "vite",
"build": "vite build"
},
- 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%
fromindex.html
//From
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
//To
<link rel="icon" href="/favicon.ico" />
- 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
- 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/
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
Reference
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
More Blogs
- Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
- Don't Optimize Your React App, Use Preact Instead
- How to Reduce React App Loading Time By 70%
- Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support
- No More ../../../ Import in React
- 10 React Packages with 1K UI Components
- 5 Packages to Optimize and Speed Up Your React App During Development
- How To Use Axios in an Optimized and Scalable Way With React
- 15 Custom Hooks to Make your React Component Lightweight
- 10 Ways to Host Your React App For Free
- How to Secure JWT in a Single-Page Application
Top comments (12)
I love Vite!
Just to add one thing, to create a new Vite app with npm, do
and let the selection menu do the rest! No parameters needed!
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.
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).
Here you go :-) dev.to/cathalmacdonnacha/migrating...
Great! Gonna check that!
Thank you so much for pointing out the advanteges using Vite over CRA/webpack! Exactly what I needed right now! 💯
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.
Thank you. really good read.
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.
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.
Great article
Thank you for this great post ✨💯!!
I have updated my react app to use rocket fast vitejs⚡️ for faster dev!!