Introducing Vite.js — An Opinionated Frontend Build Tool
Unbundled development through a pre-configured bundler!
ByPayal Mittal
Till now, we have been introduced with too many bundlers and build tools, each with its own set of specialties. Vite.js is yet another name among them. Although it is less a bundler as it favors unbundled development like Snowpack.
It is just the right time to move ahead and explore other alternatives to conventional bundlers. There is nothing wrong with them but we must have other options open to us.
Today in this blog, I’m going to brief you all about the features and functionalities of Vite.js and how it is different from other bundlers-
What’s Vite.js?
Created by Evan You (also the creator of Vue.js), Vite.js is a next-generation, lightning-fast, a frontend build tool that provides an amazing user experience.
Vite is a french word that means ‘fast’ and is pronounced as ‘vit’.
The major two parts that make it a wonderful pick for frontend development are- Dev server and build command. While the dev server provides rich feature advancements over ES native support, the build command bundles your code and offers highly optimized static assets for production.
It is different from the other common bundlers. You can consider it as a pre-configured build environment that uses a Rollup bundler and a dev server. As it uses a no-bundler development environment, the speed it renders is incredibly fast.
Why Vite.js?
There are so many bundlers out there and the developers are content with those options. Then, why do we need this ViteJS? Why someone would opt for it instead of the usual and popular choices?
Before ES modules were invented, the bundling process eased the lives of developers by providing a mechanism that could process and concatenate the source modules into files. These files could easily run in the browser.
Bundlers like webpack, Parcel, snowpack, etc., improved the development efficiency to a great extent. However, as we moved to more ambitious applications, it increased the complexity of the project along with the code volume and number of modules. It isn’t surprising that many large-scale projects contain thousands of modules.
The problem with this huge code volume was that it started impacting the performance level. It takes an unreasonably long time to run a dev server and file edits reflect in the browser after waiting for a few seconds, that too with HMR. This greatly affects developer’s productivity.
Vite.js introduces some new developments in its ecosystem over native ES Modules. The most intriguing part is, however, that it leverages the pre-configured bundler, instead of the bundling during development, which solves many problems and enhances the cold server start speed to rocket levels.
It further facilitates on-demand code compilation and you do not have to wait the entire time until the app gets bundled to get started with development.
Let’s move ahead to learn about the wide range of features that Vite.js have in store-
Key Features-
The features of Vite.js are far too many and some are still in the experimental state. We can expect all of them to be functional in the next release. Let’s move onward then-
Lightning-fast speed
The pre-bundling Vite does with esbuild increases the page loading speed by 10 to 100 times than any JS bundler.
Hot Module Replacement
Vite provides an HMR API that third-party frameworks like Vue, React, Preact (having HMR capabilities) can leverage for providing instant page updates without reloading. You can add or remove modules even when the application is running without having to fully reload. It speeds up the development process.
Instant Server Start
Vite improves the dev server start time by dividing the application modules into dependencies and source code. While dependencies are mostly plain JavaScript component libraries that do not change often during development, source code is mostly non-plain JS code, such as JSX, CSS, Svelte/Vue components, that to be transformed during the development process.
Vite.js pre-bundles the dependencies with esbuild 10 to 100 times faster than JavaScript-based bundlers. It serves the source code over native ESM and lets the browser do the job of bundler. It only transforms the source code on demand whenever the browser requests it. Then, it bundles the code with Rollup for production.
Instant Updates
Vite performs HMR over native ESM. During file editing, Vite invalidates the connection between the edited module and its nearest HMR module which makes the HMR updates more consistent and faster, no matter what the size of your application is.
TypeScript Compatibility
The out-of-box support for TypeScript is another perk of Vite.js. It can import .ts files and transpile them into .js files using esbuild. The esbuild fastens up the process such that the HMR updates reflect in the browser within 50 milliseconds. However, it does not do type checking as the IDE takes care of that.
Bare Module Resolution
Unlike native ES imports, Vite can detect bare module imports like-
import { createApp } from ‘vue’
It, then, rewrites them with different paths like /@modules/vue. In these paths, Vite locates correct files among the installed dependencies via module resolution.
Other features of Vite.js are -
- Optimized Build
- Universal Plugin Interface
- On-demand compilation
- Monorepo Support
- Zero configuration for several preprocessors
- Plugin APIs with full typing support
- Built-in support for Server-side Rendering
Installation and Setup
Initially, Vite was designed to work with Vue.js but it also works with React, Preact, and Vanilla apps as well. The primary requirement for starting with Vite.js is to ensure having installed Node.js v12 or higher in your device. Also, you need to ensure that you are using the latest version of the browser.
Now, run these commands to install Vite.js -
#If using NPM
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
#If using Yarn
$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
Vite supports the following templates -
- vanilla
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
Check out the official documentation of Vite here.
How is it Different from Other Bundlers?
Vite.js is certainly not the first build tool to be added to the history of bundlers. The programming world is flooding with a variety of bundlers like Webpack, Snowpack, etc. Each of them offers plenty of wonderful features besides the common functionality.
While Vite can get your app running in no time, other bundlers like Webpack take a few painful seconds. But, to be fair, webpack is still the first choice of developers. It is often hard to leave the usual behind despite its downsides. Let’s say that the developers are comfortable with it.
However, when it comes to performance and speed, Vite undoubtedly dominates the field. Although Snowpack also gives a tough competition to Vite as both have insanely fast speeds. But the problem with Snowpack is that it gives a sort of fragmented experience as it allows to use of different end-bundlers like webpack, webpack, rollup, or even esbuildto meet certain specific needs, which is a benefit but the esbuild is still unstable and the rollup optimizer is not maintained.
Vite, on the other hand, provides a streamlined experience and a wide array of features that are not yet supported in Snowpack such as automatic CSS code-splitting, multi-page support, async chunk optimization, etc.
Furthermore, you can learn more about Snowpack and Webpack here.
Well, I hope you liked this article.
Thanks for reading!!