Vite — witnessing the next-gen frontend tooling (Part-1)

There is a huge bliss & talk around web app’s performance and user experience. But, do we really care about developer experience & productivity. Doesn’t it have a significant impact on the deliverables? Of course, it has but we miss witnessing getting comfortable & used to legacy toolings.

I’ve started my frontend journey with exploration on react end. Had no knowledge on build tools like webpack and one doesn’t really need to get started with react as well if I’m not wrong. As everyone, kick-started with a popular youtube series templating with the create-react-app package.

I didn’t really enjoy the initial steps for two reasons,

• It was too long (didn’t own a performant lap at that stage, and back then the package itself used to be slow)
• Installed too many dependencies and most didn’t make any sense as to why I would need those in a simple boilerplate app

But, then I didn’t have much knowledge on how to scaffold without using the create-react-app package from scratch. And, I happened to create multiple boilerplates for learning purposes which every time took minutes to shape up. Doesn’t it sound kind of demotivating for a beginner trying to explore something new on his own. I got tired and started reusing the same boilerplate deleting and adding files back-forth.

Later, I got to step into a new adventure where I happened to explore vue.js and nuxt.js in a couple of projects. So I was closely following the Vue community and felt it promising. Back then, it was April end — Evan You made this tweet which raised expectations around the community.

The fun fact is that Evan wasn’t that serious and it was merely an experiment reflected from his one other tweet.

But, now if you try vite you’ll never regret using it and it’s not an experiment anymore. How do I miss sharing this one tweet that went viral overnight 🥳

Okay, how did I go? Not too boring, right 🙄. Let’s get into tooling now 🧐

Vite — Next-generation frontend tooling

It’s actually /vit/ pronounced like “veet” — which is a french word for “quick”. It’s simply a build tool for modern applications. Like any other tool, it comes with a dev server and bundles your code for production. You can also consider it as a loose equivalent for Vue-CLI (much more lenient & faster) if you’re coming from a vue background.

Vite 2 was announced recently with many interesting developments. Feel free to check out here for more details.

Why vite?

Why do we need bundlers like parcel/webpack for our projects? Modular code makes developer life easier and abstractions are beautiful in their own way.

JS modules — https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

In older days, there is no way to support ES modules natively in browsers. Thus we adopted frontend tools like webpack, parcel, or Rollup. But, now most modern browsers provide those supports natively out of the box. As we start building more and more ambitious applications, it’s evident the amount of JS involved is bulging beyond expectation (thus a performance bottleneck on a serious note).

Slow server start

When cold-starting the dev-server, the traditional bundler-based setup has to eagerly crawl & build the entire application in demand before serving. On the other hand, vite handles this differently. It improves start time greatly by dividing the application into two categories: dependencies and source code.

Slow updates

In a normal bundler-based setup, even on minor edits, it rebuilds the entire bundle and thus degrades the update speed. This is why exactly HMR was introduced (it allows a module to “hot replace” itself without affecting the rest of the page). Yet, over practice, we found even HMR has performance bottlenecks as application keeps growing.

That is why vite handles it differently, HMR is performed over native ESM. Sounds confusing? No worries, let’s decode it further.

When a file is edited, all vite demands is to precisely invalidate that chain between the edited module and its closest HMR boundary, making HMR updates faster regardless of the size of the application. Since it cares just about a particular boundary state, not much stress to bundle the whole application again. Woohoo!

Do we really need such heavy lifting if browsers could handle most of those natively?

Here is where vite fits in.

What’s the catch then?

• Vite promises we’re gonna author most of our code as a native ES module
• If you’ve large dependencies vite pre-bundles them with ESbuild (An extremely fast JavaScript bundler)

Let’s talk a bit about ESbuild!

• Esbuild is an extremely fast JS bundler. Unlike any other traditional bundlers build with JS (JIT is not that friendlier when it comes to command-line interfaces), esbuild is written in Go, which compiles to native code and hence extremely fast.
• It was created by Evan Wallace, CTO & co-founder of Figma.

Here’s an interesting graph from the official website to get an idea of how it compares with the rest of the build tools.

How to use vite?

Let’s write some code now and experience vite magic. Worth mentioning vite is framework agnostic and not something specific to vue. You can even use it with vanilla JS seamlessly & craft whatever you want.

Now, let’s try to use vite and get familiar with a few awesome features vite offers out of the box.

Instead of just scaffolding a project with vite, let’s analyze how it compares with create-react-app and Vue-CLI on a simple boilerplate project. That makes sense, right?

First, let’s create a simple vue.js boilerplate using Vue-CLI

vue create vue-cli-demo

Note: Assuming you’ve Vue-CLI installed already.

Let’s take a look at the package.json (we’re mainly concerned about the dependencies part)

And, below is the screenshot of the time taken to scaffold the Vue-CLI boilerplate on a high performant mac. It’s rough ~82.22s + ~16.28s in total (not bad 😕)

And, it took around ~2670ms to start the dev server.

On minor edit, it took around ~196ms, and production build took around ~3943ms

Now let’s take a look at vite project scaffolding stats,

First, let’s take a look at the package file. You’ll be surprised how minimal vite bakes it.

It just adds vue as only dependency and two supporting dev dependencies. You’ll also need a basic minimal config named vite.config.js as below that comes as part of your template itself (if vue is chosen on setup)

Note: I’ll cover project setup and work in detail in the next part of this article.

Note: Vite requires Node.js version >=12.0.0.

$ npm init vite@latest (or) $ yarn create vite

Well, it’s blazing fast — scaffolding in ~1.016s 🚀

$ npm install (or) yarn install

Vite demands you to install dependencies post this step separately and it’s the beauty not that heavy as Vue-CLI and CRA. For me, on the first run, it just took ~14.948ms.

Start the dev server with the command npm run dev, it got ready for me in ~505ms.

Wait, but there is a lot more besides these stats to know about vite. Let me cover those aspects in the next part of this article. Don’t miss reading it here.

If you have any suggestions, need some help/doubts, or wish to discuss more on this topic please write to me at mariappangameo@gmail.com. I’d also love to connect with you all on Linkedin.