The tool that revolutionized my workflow. My experience with Vite

In my previous post, I shared my experience with TSED. Today, I want to talk about a tool that has greatly increased my workflow: ViteJS. For those unfamiliar, ViteJS is a web application development build tool created by Evan You and his team.

Before discussing ViteJS, I want to mention the previous build tool I used, Webpack. Webpack has a prominent place in web development and I used it on several projects over the years (and still use it on some legacy projects). However, it is slower than ViteJS due to its bundling process at each change. Even with a cache system, it still lags behind Vite in terms of speed.

I adopted ViteJS early on (even before its v1.0.0 release) and it has been one of the most incredible experiences in my developer life. Webpack used to take over 30 seconds to update even small changes, but with ViteJS, these updates take less than a second, just the time it takes to switch to the browser. Speed is one of ViteJS's biggest advantages. This is achieved by not bundling the app during development, but instead using the module script tag to improve module dependencies, which are all served as HTTP endpoints. For the build, Rollup is used to create the final bundle.

Another key advantage over Webpack is its simple configuration. No complicated setup is required. I can't count the number of hours I spent configuring Webpack, but it was a frustrating experience. Vite supports popular web frameworks with official plugins and has a large collection of plugins maintained by the community. It works seamlessly. I even created a plugin for Vite, a simple one for generating a custom-element.json manifest for web components.

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
}

For example, it's super easy to configure a vue app using vitejs.

As someone who has used both ViteJS and Webpack, I can attest to the superiority of ViteJS in many ways. Its lightning-fast update speeds and effortless configuration make it a joy to work with, compared to the headaches of configuring Webpack. The support for popular web frameworks and the wealth of community-maintained plugins only add to its appeal. I have even created a plugin myself, which further highlights the ease of customization. I highly recommend ViteJS to any web developer seeking a hassle-free and efficient build tool.