Why do we need Vite?

What is Vite? Why do we need Vite? …
These are some questions I hope you will find the answers to at the end of this story. I heard about Vite and try to understand what’s going on by reading the Vite document and some JS documentaries. In this story, I will explain some simple topics to help understand Vite better.

---

One of the best ways to improve your performance is prevent to wasting time. You could solve problems faster as you be more skilled, Wich could be difficult to get there soon. Also, there are other ways to get faster in development and have a better performance related to the tools you using. Decreasing the time duration of serving could improve performance.
You should have experienced that sometimes checking updated code in the dev server could take a while. Maybe it doesn’t seem how wastefully is this break and you don’t calculate the wasted time, But decreasing this duration finally, gives you a better performance.
Vite is a tool for bundling your code but the fastest one. So you could have the best performance by relying on choosing faster tools by using Vite.

---

JS Modules

One of the ECMAScript 2015 features was javascript modules. Do we have any module concepts before in Javascript? Well, it’s not easy to answer by just yes or no.
At first js scripts were small and simple so it was not required. After a while scripts get more complex so the community started using tools to organize code into modules. They have used outer functions with inner variables and functions and a returned “public API”. They also use closure and IIFE for providing this solution (For more details you can search about the module pattern and public API). Here is an example using this pattern.

// an example of traditional module in js:
funtion Hello (name) {
  function greeting () {
    console.log( "Hello" + name + "!")
  }
// public API
  return {
    greeting: greeting
  }
}

Some tools have been provided for using modules based on the above principles like AMD, CommonJS, and UMD.
In ES6 the language-level module has been introduced. ESM ( EcmaScript Module ) is declared with some specifications, for example:

• It is in strict mode automatically.
• There is a module-level scope (so if you declare a variable with var in a module, it couldn’t be assigned to window).
• The new static import and export the syntax is available.
• No “bare” modules are allowed (modules without any path are called “bare” modules).

---

Built tools

As you know there are some tools to bundle your code such as webpack, Rollup, or Parcel. By using ESM it is possible to stop using bundlers but there are some reasons to keep using them, for example, performance benefits.
Bundlers merge multiple JavaScript files into one file to reduce the number of page requests. They have done this flow by choosing the main file. Analyze its dependencies (what have been imported recursively). then start to build a single file with all modules (this process also contains some details such as removing debugger and console.log).
So we have bundlers and modules. What should we use Vite?
Imagine updating your project code local, sometimes it takes a couple of seconds to be reflected in the browser. So for having a better development experience we would like to prevent performance problems based on tools.

Solution: Vite

Vite allows us to have more efficient development performance. it uses the availability of native ES modules in the browser and the rise of JavaScript tools written in compile-to-native languages. Here I’m going to briefly show you what’s going on backstage at Vite.

Vite improves the dev server start time by first dividing the modules in an application into two categories: dependencies and source code.

Dependencies are mostly plain JS. Vite using “esbuild” to pre-bundle dependencies. esbuild is written in the Go language and is 10–100x faster than JS-bundlers. pre-bundle dependencies have two steps:
CommonJS and UMD compatibility: During development, Vite serves all code as ESM. So it should convert CommonJS and UMD into ESM. Also, it converts bare imports.
Performance: Vite converts all ESM to one module.
Source code often contains non-plain JS such as JSX, CSS, etc. Vite serves source code over native ESM. At this level, Vite checks to only process what the current screen needs in the browser.
Vite also uses Hot Module Replacement (HMR) to prevent inefficiency when code is edited. So we checked how it would be in the dev server. But how about deployment?
In deployment, Vite uses a bundler. It’s still better to use a bundler to have more efficiency. The esbuild is not stable yet so Vite couldn’t use it as a bundler in production mode instead, it uses Rollup. Rollup is more mature and flexible. Vite will go back to esbuild as a bundle in deployment as soon as it stabilized some features such as CSS handling.
You are now prepared to get started by using Vite documentaries from the Vite.

Also please be aware Vite support built-in server-side rendering plus supporting vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts.
It’s easy to get started and use Vite to implement a project. There is a simple command to start a built-in project by Vite. For example to create a React app based on your package manager you could use the below commands.

 # npm 6.x
npm init vite@latest my-vue-app --template react

# npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template react

# yarn
yarn create vite my-vue-app --template react

# pnpm
pnpm create vite my-vue-app -- --template react

The structure of your new boilerplate project is like this:

You could update vite.confige.js for every config you want and run related commands package.json for building or serving your app to use in production or development mode.
Conclusion
Now you know what is Vite about and how it behaves to serve your project in local and production. You could now decide to start your projects by using Vite to have a better developer experience or not. You know by Vite you have two different ways for serving in local (pre-bundling with esbuild to ESM) and production (using Rollup for bundle and deployment). It’s easy, It’s fast, enjoy! :)