DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Vite.js or How i became the fastest programmer alive.
Ayoub Abidi
Ayoub Abidi

Posted on • Updated on

Vite.js or How i became the fastest programmer alive.

Created by Evan You (also the creator of Vue.js), Vite is a build tool that significantly improves the front-end development experience. You can use Vite to set up a development environment for frameworks like Vue and React, and even for a vanilla JavaScript app with a dev server and hot reloading in just three commands.
FYI: Vite is a french word that means "fast".

Why vite ?

image
Before ES modules were invented, the bundling process eased the lives of developers by providing a mechanism that could process and concatenate the source modules into files. These files could easily run in the browser.

Bundlers (like webpack, Parcel, snowpack, etc.) improved the development efficiency to a great extent. However, as we moved to more ambitious applications, it increased the complexity of the project along with the code volume and number of modules.

The problem is with this huge code volume it will start impacting the performance level. In another words, it will take an unreasonably long time to run and as Benjamin Franklin said once: "Remember that time is money."

How vite works ?

image
Vite follows a recent trend of tools like Svelte (where the framework is basically compiled away) and Snowpack that leverage modern JavaScript features (such as ES modules) to provide a smooth, fast dev experience with little or no configuration at all.
In other words, you install Vite with a plugin or two, do very little configuration et voilΓ ! you just need to start working on your app.

Vite is really fast, because it leverages native ES modules and doesn’t need to rebuild the whole bundle when something changes. This makes it fast, regardless of the size of your application.

Now, let’s take Vite for a spin and see how we go. It will be interesting to see how much of our normal workflow would be better handled with Vite.

Performance

image
The Why Vite page is primarily about performance and developer experience.
The pre-bundling Vite does with esbuild increases the page loading speed by 10 to 100 times than any JS bundler.
Vite dev server starts in an instant and with the Hot Module Replacement, every code change is reflected in the browser quickly, sometimes instantly.

Conclusion

Vite is pretty cool! It’s a fine addition to the recent trend of tools that simplifies tooling like Parcel and Snowpack. That's why you should give it a try.

Top comments (5)

Collapse
srikanth597 profile image
srikanth597

What, it doesn't make sense, how does it improve performance by 10x , it's just bundling tool isn't it? If u run it prod it's same bundle u r shipping when u does with other tools i.e webpack.

Collapse
redbar0n profile image
Magne

The speed boost comes from Vite doing development in unbundled mode, using ESM only. So no need to use a bundler to produce a bundle when developing. You only need to bundle for production, where it currently uses Rollup, and will switch to esbuild when it becomes mature.

Collapse
ayoub3bidi profile image
Ayoub Abidi Author

I really know what you mean but you should read this: vitejs.dev/guide/why.html

Collapse
jamiebarrow profile image
James Barrow

Vite pre-bundles dependencies using esbuild. Esbuild is written in Go and pre-bundles dependencies 10-100x faster than JavaScript-based bundlers

That is the important part it seems, but there's also other useful and interesting info there to read :)

Collapse
larsejaas profile image
Lars Ejaas

Keep hearing Vite mentioned but never got around to actually try it. I think I have to "kick the tyres" on this baby soon!

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.