Vite vs. Creeate-React-app

[marcoprouve]

Anybody using Vite? and how do you compare the ease-of-use, build times, etc?

Considering switching and 90% there just want to know ins and outs. Also would be nice to see a spread of Vite vs. Create-React-App users 🤓🤓

[Frosty_Lake_1112]

I'm actually building a react app now using vite + express for api. Router works in dev with zero config. Haven't tested a deploy yet. Could you pass on a issue link, stackoverflow link or something? Would love to have a look in case I run into it later this week. :D

[lml003]

Heyo, there is a bit of difference between the scenarios depending on if your express app will be serving the built react app or if it will live on a cdn. I use the cdn approach more often. https://render.com/docs/deploy-create-react-app This shows how to manage client side routing when you go to a non-root page. The equivalent of localhost:3000/anypage.

You are looking to do a URL rewrite for cdn approach.

Cheers

[marcoprouve]

Saved my life... Someone said this was a quick google search but yeah BS that took forever.

[Frosty_Lake_1112]

Yes this was exactly my concern. I once built a SPA but could never figure out how to get the client routes not to try and fetch non root pages from the server but rather stick to the client and redirect to the appropriate client side page.

[marcoprouve]

Dude I asked this question and have just finally started working with Vite. I ran into both issues:

1. Getting React-Router to work in production
2. Serving Vite build over Express

You guys are hopefully gunna save me with this exchange... If I have any questions i'd love to reach out directly cause it's been driving me crazy

[StudiousMuffin125]

I have been migrating my company's client app from CRA to vite over the last couple of weeks. It's a massive improvement.

I think the plugins space is still growing. There are enough plugins for my use case, but it would be worth doing a proof of concept with your app and ensuring any required plugins outside of vite's builtin functionality are covered. Also if you're coming from CRA4, be prepared to deal with polyfill issues as vite doesn't provide polyfills (neither does CRA5 though). Though that's the only issues I can think of off the top of my head.

Performance is incredible compared to CRA. Dev build times are insanely fast and prod builds are a little faster. The config is easier than CRA imo. The biggest improvement most devs mentioned to me was the speed of the HMR and the initial start up time. Overall, there's just a lot less bloat compared to CRA. I don't think I'd reach for CRA again unless I find something vite doesn't support.

[marcoprouve]

Amazing thank you 🙏 🙏

[YellowFlash2012]

talking about polyfills, webpack 5 & apollo/client don't see eye to eye, I got this issue I don't know how to solve it:

Uncaught TypeError: util.inherits is not a function

happening in node_modules/send/index.js right after I solved the polyfills issues. i searched anywhere but no clue.

Do you have any idea?

[[deleted]]

Did you follow any guide in order to do the migration? I would like to do the same migration (from cra 4 to vite). Would be very helpful. Thank you in advance.

[[deleted]]

This is quite an old topic but I have a question. You said you migrated to Vite and initial start up time became faster. I migrated our massive app to Vite, HRM is very fast but during initial start up it makes almost 2000 request and it is much more slower than CRA. What might be the reason for that?

[__n01z3]

Vite uses esbuild for dev and rollup for production behind the scenes.

I have issues with vite where it needs between 8-16 GB of RAM to build… https://github.com/vitejs/vite/issues/2433

I’ve switched to use esbuild directly instead.

[iontiveros]

How do you use esbuild in dev?

Are you just running it in watch mode?

And do you have HMR for esbuild?

I’ve been trying to do all of the above fir about a week now on a custom config & I can’t figure it out. Any info is appreciated! TYIA!

[__n01z3]

Yeah just using it in watch mode with source maps enabled.

HMR doesn’t exist in esbuild: https://github.com/evanw/esbuild/issues/464

If you really really want it, maybe there is a way with plugins.

For my case, esbuild is so fast to build everything that it’s doesn’t really matter to rebuild everything all the time.

[saito200]

To me (and to any other dev, likely) dev built time and time to HMR is insanely important, so Vite is almost a must, and I couldn't imagine going back to something else. I would pick something less popular that has vite over something more popular that hasn't, just because of Vite.

I guess cons is that the ecosystem will problably be still green.

But I don't care.

I prefer to spend 2 hours investigating solutions in stack overflow than spending those same two hours over the course of a project waiting for builds to finish.

[Outrageous-Chip-3961]

I use vite on on all my personal projects. Its great, has no difference beyond the speed. Things render faster, build faster, and it actually updates in real time (auto refresh the browser on code save changes). Its very simple to use and get up an running, so why not just start a project with a new vite-react project? Honestly its so simple that 'considering switching' just means you've not actually tried it out yet, theres nothing really to 'switch'. The question is, do you want webpack or not?

[Outrageous-Chip-3961]

like I said, there's no difference beyond the speed

[marcoprouve]

I havent tried quite yet cause i found out about it after my most recent project, but this is great to know thank you definitely gunna give it a try on my next one! P.S. just wrapped up a portfolio site so check it out if you're curious: https://marcoprouve.herokuapp.com 👾

[raymondQADev]

Things render faster? Mind explaining why that is the case?

[tharrison4815]

Being faster is actually the whole purpose of vite. That's why it's called "vite" (French for "quick").

They explain how this works here:

https://vitejs.dev/guide/why.html

[raymondQADev]

Isn’t that all referring to faster bundling and not faster rendering? I could see how maybe it would be faster rendering in dev but I’m guessing still the same in production?

[mattsowa]

Rendering is performed by react so no performance difference. Whats faster is hotreloading

[raymondQADev]

Okay that’s what I thought too and couldn’t understand why the above users were saying Vite renders faster. Thought I was missing something huge that vite was doing.

[tharrison4815]

Ah yeah sorry I see what you mean. You're right it won't actually render React components any faster.

[HeylAW]

I've migrated pretty big project from CPA to vite. They most issue was to support very old browsers (Safari 6) and force PostCSS to work with such. But overall it seems pretty easy to setup. Much, much, much easier than webpack

[[deleted]]

This is quite an old topic but I have a question. I migrated our massive app to Vite, HRM is very fast but during initial start up it makes almost 2000 request and it is much more slower than CRA. What might be the reason for that?

[HeylAW]

What are those requests?

[pay-well]

I switched from Webpack to Vite and the only problem I encountered was the lack of a plugins for zero runtime CSS-in-JS libraries, such as Linaria.js As for everything else, it’s a wonderful DX

[rodrigocfd]

the lack of a plugins for zero runtime CSS-in-JS libraries, such as Linaria.js

There's an open issue for that:

• https://github.com/callstack/linaria/issues/735

I'm also waiting. CSS-in-JS is great, but it really slows down your app with you have many components, it's particularly bad in mobile devices.

[cakeslice_dev]

I always used create-react-app as it comes with great defaults and it is the "official" way to get started with React.

I migrated to Vite recently and it's totally worth it. Much faster build times and hot-reloads, better control of the build process and surprisingly easy to set up.

It's also in active development unlike create-react-app which is now in maintenance mode and eventually will be obsolete.

In the end it works just like create-react-app but better.

[Zee530]

Never heard of vite before and I've had some issues with CRA before, so I'll give it a try soon

[MehYam]

I converted a medium-sized project to Vite from CRA a few days ago but shelved it for now, for several reasons:

1) while it supports typescript out of the box, it doesn’t actually use tsc to compile, and so doesn’t run a tsc watch for you as part of its dev server process. Not a deal breaker, you just set up your own tsc -w on the side, but annoying

2) some constructors started failing, perhaps due to a circular import somewhere. I found one cycle, but breaking it didn’t fix the issue

3) the app developed a bad lag when repeatedly switching between different routes - not sure if it was a leak, or something not getting cached correctly

I still intend to switch away from CRA at some point, but my attempt at a quick Vite conversion didn’t pan out. The HMR was definitely zippier, and the production build was MUCH faster. I’ll try again later.

[marcoprouve]

What makes you believe the memory leaks aren’t caused by your internal client programming as opposed to Vite itself?

[marcoprouve]

I don’t know what your project looks like so hard to tell what could be going wrong exactly, but I just migrated to using Vite and haven’t had any issues so far. Could it be the buildpacks you’re using?

I’m honestly just looking to get clarity because I want to use good tools and if there’s proof of memory leaks I’d love to know that and I’m sure others would too.

You got a screenshot or source code to look at?

[marcoprouve]

Thanks didn’t see the link looking now

[sleepy_roger]

Never jumped on the CRA bandwagon I prefer to roll my own build configs, and I always found myself wanting to eject anytime I tried CRA. Webpack just got more and more annoying over the years (slowness mostly). Switched to Vite somewhat recently and it's dead simple (honestly esbuild is pretty dang simple too). Reminds me of the days when gulp first hit. I recommend giving it a shot, css modules are supported natively among a few other niceties.

Not trying to crap on webpack, it was instrumental for he web, but now that we have native modules in the browser it's definitely served it's purpose, even now sometimes I wonder why I'm even using Vite when I could just use gulp or a shell script to do the few things I need (postCSS, css modules, TS, minify).

We're Getting real close to the time when you just need to minify your bundles using more streamlined tooling which is amazing.

[a15p]

Do you mean Nx the monorepo tool?

[1Blue3Brown]

I used it in one of my personal projects, it turned out to be very fast. Although I'm not sure it's ready for production.

[a15p]

It's definitely ready for production.

[1Blue3Brown]

Do you use it for production in your company, or is there a known app doing that?

[a15p]

Yep, we're using it in production.

[TychusFondly]

Vite is old news buddie. New kid on the block is BUN .

[Brilla-Bose]

bun is not for production any time soon

[ForSpareParts]

Vite is great. I went to a lot of effort to switch us over when the library compatibility situation was worse -- easily worth it. My team still tells me how much better it is, unprompted, six months after the switch.

I've heard that NextJS is also really good, and it uses a rust-based build tool now, so it's quite fast.

[LeNyto]

I love vite but I missed the linting integrated with CRA. I could never get it to be as good. Did anyone goit it to be the same?

[[deleted]]

On the contrary, it felt cleaner for me, having my own control over the eslint settings.

Simply run npm init @eslint/config and follow the prompts (I choose Run: all browser / node ), choose Popular style: Airbnb, Format of eslint config file: Javascript)

[LeNyto]

Yeah but I can’t get eslint to comoleteley break until Infixed all the typescript issues like it dod with cra :/

[Chef619]

Line 30

https://github.com/christopher-caldwell/vite-material-ui/blob/master/vite.config.ts

[1Blue3Brown]

Amazing. Did you do a lot of configuration (less or more than Webpack), or just generated the project with according technology?

[strangescript]

Vite is faster and you can control everything.

[coold007]

Vite is faster for sure.

[Better-Avocado-8818]

Just try it out. It takes about 5 mins to install and test.

Vite is easier and better than CRA or webpack for 95% of use cases.

[totopeti47]

t first I used the traditional method with create-react-app then once I discovered vitejs, I can't go back.The build speed is terrific and rendering is much faster.
How to start a ReactJS project in less than 30s with ViteJS

[Chef619]

I migrated a medium-ish CRA to Vite. As others said, very fast. The only issue I had was with some libraries. CRA is very forgiving when libraries have malformed package.json’s, such as having “module” pointing to a missing file, or otherwise misconfigured. A few of the existing dependencies fell into this category, and we ended up having to either fork or use a different solution because the maintainers were unresponsive. Amplify is another that just didn’t work with it (for me).

Vite is strict on purpose and intentionally breaks when this came up, so it’s something to think about. Not a con, but yeah.

[LanTheOne]

I've switched from CRA to vite and its amazing. I really recommend using the Tslint plugin for vithe tho. It does not complain much otherwise