Why not with CRA-

When your project code grows you might get a slower start in the development server, and wait for 3 to 6secs to reflect the changes in the browser. you might face higher build times also.

CRA uses Webpack to bundle your code. Webpack bundles the entire code, so if your codebase is very large, you might see a slower start in the development server.

Vite

A build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts: 1. “dev server”, 2. “build command that bundles your code with Rollup”.

How Vite will resolve slow development and higher build time problem

Slow Server Start-

Dependencies are mostly plain JavaScript that does not change often during development. Vite pre-bundles dependencies using esbuild. esbuild is written in Go and pre-bundles dependencies 10–100x faster than JavaScript-based bundlers.

Source code often contains non-plain JavaScript that needs transforming and will be edited very often. Vite serves source code over native ESM. Vite only needs to transform and serve source code on demand, as the browser requests it.

Pics credit — vitejs

bundler-based build setup, it is inefficient to rebuild the whole bundle for obvious reasons: the update speed will degrade linearly with the size of the app.

In Vite, HMR(Hot Module Replacement) is performed over native ESM. When a file is edited, Vite only needs to precisely invalidate the chain between the edited module and its closest HMR boundary

Creating a react application using Vite

npm create vite@latest

cd ViteTutoral

npm install

npm run dev

Scripts are there in Package JSON

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

Happy Learning…👏👏👏👏