I have been using parcel for web development because I thought webpack is very difficult to use. However, for my latest personal project, I tried webpack. To my surprise, I found webpack 5 much simpler to use then I thought it is (significantly easier than make or gradle, the complexity is not even on the same level). Everything pretty much worked out of box now. All I had to do was to copy the starting template for typescript from their website (~20 lines, half of which are open/closing brackets) and copy the setup for dev server. HMR, code splitting via dynamic imports, etc. all worked without any setup.

Webpack is probably fine for new or small projects. It's when you've been using it for a while, do anything complex, or worst of all your framework libraries update then you have to update Webpack which is a nightmare.

Ive had Webpack break more of my deploys than any other piece of software in the last 3 years.

Vite was basically a plug and play replacement (almost zero config) and I also got to drop Babel, so that meant replacing about 12 packages in my package.json and who knows how many in Yarn.lock (Mostly babel and webpack plugins) with 2 vite packages. It's much faster at builds and the chunking of small js files seemed more intelligent and better integrated with Vue.

Vite is incredibly fast compared to Webpack.

I didn't really know how much time I could have been saving, and I never even thought of Webpack as slow.

IIRC Vite wraps esbuild, which is written in Go and very fast.

You can use esbuild with webpack via esbuild-loader, but what makes Vite so fast is mainly the strategy of pre-bundling dependencies when running the dev server, this makes hot starts and hot reloads incredibly quick.

Vite is just a few lines, and it’s a much better experience than webpack

Last time I checked NPM the weekly downloads were still heavily slanted in favour of version 4. I wonder if that plays into perception of it.

At work, an engineer in a different team recently recommended we switch to Vite because it’s “so much faster”. Warm builds are 700ms with our very uninteresting Webpack 5 config. It’s hard to imagine that the cost of reconfiguring our entire build would be worth it.

> pretty fast hot reload

An understatement to be sure: you can set VS Code to auto-save every 1 second and that way whatever you type instantly appears via Vite's Hot Reload in your dev browser. No waiting multiple seconds for a recompile.

It's game-changing workflow (for some tasks).

I dunno if it's just me, but I've always found live reload to be an overstated benefit. I usually have a mental model of what I'm trying to code that I don't want to check until it's at a specific state - the seconds it takes to press reload doesn't really add up to that much.

I'd say it's more beneficial for CSS styling but I usually mock up my changes in the dev inspector and then copy it over anyways.

Exactly that though. For a SPA you’re going to have a bunch of state loaded and you don’t want to refresh. If you’re using something like tailwind where you’re transpiling your css too then it’s a major boon to have it hot reloaded.

I’ve found vite to be an awesome dev experience.

Not just you.

Hotreload can be handy to some extent, annoying in others - I like to preserve state of given app including what the dom looks like + the window/memory state in devtools. Iterate in code, refresh, then compare. You can do that with multiple browser tabs for example. But not with hotreloading; each tab will re-render/reload the global window state.

Game-changer perhaps in a bad way ;) We're losing the art of writing solid code and instead flail with the "hot reload" crutch. I miss the days of punching cards and submitting a deck to be compiled and run - at least in terms of it forcing me to verify my work ahead of time.

And yes - I'm (mostly) kidding. But I did write my first programs on punched cards at a university course while I was still in grade school. Probably the last generation of programmers to experience that discipline.

We are also writing far more complicated software. Punch cards didn’t have to support thousands of different devices, resolutions, screen densities, input methods, etc. It’s a totally different world.

That's totally fair but the tooling is still not where you'd like it.

In theory, there's no reason that you shouldn't be able to backtrace from the website to the filesystem. If you can do that, then your "it reloads every second" becomes even faster, it becomes WYSIWYG, you are writing in the live constantly-refreshing UI. Well, almost: your text editor has Undo and Git and your web browser doesn't. But we could build those into the browser. Heck, Redux is basically Git except without any standardized verbs, just give Redux some standardized verbs for tracking revisions in a living app and you've got everything you need.

If you follow that trend to its logical conclusion ("OK I want a special way to ctrl-click or right-click or something to edit the HTML of a component I see") you eventually get Smalltalk, and we're finally back as productive as we could be in the 70s :)

I think it does this by not even recompiling. It just links all the uncompiled, uncompressed files and dependencies using a few functions to make them work in the browser.

Credit to them for a nice "Why Vite" button backed by a very informative page.

But for any homepage describing any product / project: If you solve a similar problem as a better know competitor, that's a huge advantage! Mention them explicitly and then state what makes you different. That's one of the fastest avenues to understanding anything "it's like [well known thing] but different in that it [differences here]".

Perhaps just having this:

Vite is a javascript bundler for web development that uses native ES modules. Projects are adopting Vite in lieu of Webpack to gain near-instant HMR and much simpler setup and configuration.

One question .. Is the main goal to make development process easy or does it also have an impact on production performance as well ?

From https://main.vitejs.dev/guide/

"Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects."

Ultimately it makes the dev process more productive because builds are generally much faster than most other build tools.

https://main.vitejs.dev/guide/why.html might also be worth a read

I can attest that it is a great way to spin up (and compile for server-ready HTML/CSS/JS) a React or Vue project.

Just run ‘npm init vite@latest’ and you get a basic well-organized React/Vue project ready for components and other dependencies to be dropped in.

Uses esbuild+rollup behind the scenes I believe.

If you have the luxury of picking your tools for a completely fresh web project this is a great way to do it.

It’s mainly for dev rebuild performance. I also use vite and it’s a pretty nice build tool that’s relatively easy to configure and quite fast.

It might also affect your production build times, but prod builds are far less frequent and performance isn’t important here

Ideally, for production you're not constantly rebuilding a JS bundle but instead just building once with all the required package versions and then just serving that bundle all the time.

The bundle only really needs to change if the underlying code does, but in pretty much all cases your customers/users are not actually triggering any changes in your underlying code, that's a security risk.

So, this is not a framework like React, right?

It’s more like Webpack, the software that processes your React code into JavaScript bundles that are optimized for the browser. ie puts together what belongs together, removes the unused code, provides a test server to develop and get instant refresh.

How would one use it together with a backend that already serves the frontend code? As a compiler only?

I’ve had similar backend projects where I setup a reverse-proxy to a backend, along with the frontend dev server, to allow the full site and api to run in the browser from local host.

It’s not the most graceful setup, but it works if your backend build isn’t as flexible as you need.

If you're talking about something like Django where you would want to serve frontend JS from a static assets directory, you would have to output a build bundle into your static directory. You would not get hot reloading that way, though.

You could yes, however you’ll probably have to write your configuration from scratch. You’ll have to define the JavaScript entry files (those that call the others) and put that into your HTMLs. Depending on how many scripts etc you have this might be a lot of work, but this should optimize your JavaScript to ist what you need.

I don't think Webpack is designed for that use case, it is pretty apples and oranges

Got it, thanks

Thanks for the info, will switch from CRA as soon as I can :D

Would this replace parcel or be adjacent to it?

Replace it.