DEV Community

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

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

Ayoub Abidi
An independent and self-motivated Software engineering student, interested in web/mobile app development and entrepreneurship.
Updated on ・2 min read

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.

Discussion (3)

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!

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
ayoub3bidi profile image
Ayoub Abidi Author

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