It's no secret that I'm really interested in web performance - both on the front and back end of applications. I'm slowly revisiting a few old side projects and tweaking them to make it more up-to-date to the optimization techniques that I've learned over time.
One of them was EGPM's landing page, developed in collaboration with my friend and co-worker Lucas in 2019. Created at the time with Vue 2 and recently updated to Vue 3, I thought it was the perfect time to make the move from Vue CLI to Vite - the new default and recommended Vue frontend tooling.
For this project, moving to Vite was a no-brainer: it has everything I needed and in theory, should be blazing fast. You can read about Vite's awesome features such as hot module replacement and building optimizations in their official website.
With a few teaks here and there, in less than an hour I had successfully moved the project to Vite. The benefits were instantaneous for development and for production building.
For development, the local web server started way faster and the updates on the UI components were seamless. No more page reloading and a few seconds delay after making a change in the codebase. Talking building for production, it was significantly faster as well and the dist folder was way smaller.
Benchmark
Start development server
Vue CLI: 3639ms
Vite: 504ms
Reflect component changes
Vue CLI: a few seconds
Vite: instantaneous
Build for production
Vue CLI: 19.19s
Vite: 5.83s
Production bundle size
Vue CLI: 3.7mb
Vite: 982kb
Vite is framework-agnostic, so you can take their advantages in basically any modern project - including ones using React. It is not a silver bullet, but I really recommend reading Vite's documentation to see if it fits your project needs.
