It sets up JS transpiling and bundling for you in an easy way, then provide a server with pretty fast hot reload.
This solves 2 problems:
- the complicated js project stack is now simple to setup, unlike with webpack
- saving and seeing the result of your coding is now almost instant, unlike with CRA
It's a joy to use, given that it's from VueJS author, and I highly recommend it to anyone that has a lof of frontend to do.
I didn't really know how much time I could have been saving, and I never even thought of Webpack as slow.
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.
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.
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).
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.
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'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.
I’ve found vite to be an awesome dev experience.
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.
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.
It might also affect your production build times, but prod builds are far less frequent and performance isn’t important here
"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
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.
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.
It’s not the most graceful setup, but it works if your backend build isn’t as flexible as you need.