What is vite
Hello guys, sorry to disturb you all... I just came across the term "vite" on the internet.... I noticed that is it mainly used for web development but I don't understand what it is, for what is it used for and why is it helpful... can someone clarified it please
7 Replies
Vite integrates a variety of build-assisting tools, but it's primary purpose is to "bundle" your application so a web browser can display it.
When developing, you frequently
npm install a variety of libraries, and then import them into your code. Were you to send this code directly to the browser, it wouldn't know where to find the sources for those libraries, so Vite pulls in the code from the libraries and "bundles" them with your code, so that everything necessary for your program to run is present in what's sent to the browser.
The bundling process is intelligent, however, and Vite does "tree-shaking" to only pull in the parts of the imported libraries that you actually use to make for a smaller bundle size.hmmm what do we mean by bundling ? Like say I have created x number of javascript, like we bundle them together in a file, something like that ?
yes, but not just a single file
it may be multiple files, but usually it's everything into one, or as few as possible
yeah I see, thanks !
Its much more than Bundler though
Also you wont really use need it until you start getting into frameworks or pre*processors
Vite is what basically powers most all the modern JS meta frameworks
Like Astro wouldn't be a thing without it.
well it would cause they would have probably continued with Snowpack but beside the point >.>;;
Vite also has HMR for development which is nice when you do need it. (it will not refresh but update just the components)
Makes messing with env and build steps way easier with plugins.
The actual build tools it uses are esbuld/rollup but soon they will be using their own called Rolldown to replace both I think
What is Vite (and why is it so popular)?
At StackBlitz, we're not shy about how much we love Vite. Here's what you need to know about the next-generation Javascript build tool.
this looks like a decent article on it