A drawing of my face as a cartoon character.
tech lead @ Getrak
software development, technology, gaming and LGBTQ stuff

Em português: O Vite é incrível.

Vite is Awesome

25/07/2022

Illustrative post image.

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.

Keep reading...

<< Fixing JetBrains' IDEs not listing available Github PRs

Fixing OpenGraph previews on LinkedIn >>