Vitejs

Hello everybody,

After a while, I write about a new frontend build tool which is really fast.

Vite.js, which aims to the happiness of developers by the availability of native ES modules in the browser, and the rise of JavaScript tools written in compile-to-native languages.

Vitejs logo

It was created by Evan You (who also created Vue.js) and it supports vanilla.js, vue, react, preact, lit and svelte.

Let’s Create an App with Vite

You can boot the project with one of the following commands:

-> With Npm:
$ npm init vite@latest
-> With Yarn:
$ yarn create vite
-> With Pnpm:
$ pnpm create vite

After that you need to select a name for the project:

And select a framework for the project:

I chose the svelte because I was curious about it

In the last part you are asked if you want typescript integration:

I proceeded without choosing typescript

You need to run these codes in order after scaffolding is completed:

cd vite-example
npm install
npm run dev

Now we have created and raised a svelte project.

The default ready page comes like this within milliseconds.

If you want to change the code:

You can change the code inside the main selector in App.svelte

It reflects on the screen very quickly with the HMR feature:

You can easily build with that command:

npm run build

Vite.js exports 2 javascript bundles (1 for the sources, 1 for the vendors/dependencies) and a CSS bundle that exports the style that has been imported into your application.

Up to this point, we have set up the project in a simple way with Vite. But we didn’t talk about what was going on in the back.

Vite combines two bundlers for different needs in order to optimize the build. These two tools are esbuild and Rollup. Rollup is used by Vite for the main bundling needs. And esbuild is used for module compatibility and optimization. These steps are known as the “Dependency Pre-bundling” process.

Our dependencies don’t change often, so re-evaluating their module tree at each build is not necessary. We can generate the bundle of our vendor once and for all with an optimized tool like esbuild. This bundler is very fast and allows a quick start of the server.

The modules in our source code are subject to a lot of changes, unlike the dependencies. So Vite uses another treatment based on ESM that works natively on recent browsers.

Optimization is for bundling all the various files from a single depended package into a single “thing”, which then only needs to be fetched once.

Rollup would be too slow to handle these heavy-duty things in comparison to esbuild. Esbuild is actually the fastest build tool out there. It’s fast because it’s developed in Go (the programming language).

Here’s a comparison is shown on the official documentation website.

the time to do a production bundle of 10 copies of the three.js library from scratch using default settings, including minification and source maps.

Conclusion

Vite has many ready-made plugins features and advantages. Don’t hesitate to use it on your side or main projects. It provides a fast infrastructure and an environment that can be developed.

I hope you enjoy while reading.

Until next time, farewell 👋