Getting started with Vite

JavaScript build tools have changed and shaped the way we build things that run on the web. Build tools are an integral part of any development workflow, they include (but are not limited to) task runners, transpilers, module bundlers, linters, package managers, and development servers.

These tools help developers build efficiently and make development processes much easier(although, configuring them can get complicated).

In this article, we will take a look at a build tool called Vite, what it is, why we need it, how it might improve our development workflow, and how to get started with it.

Prerequisites

This tutorial assumes the reader has the following:

• Node.js 10x or higher
• Yarn / npm 5.2 or higher installed on their PC
• Basic knowledge of JavaScript and how frameworks work

What exactly is Vite?

Vite was originally intended as a development server for just Vue single file components(SFC) but it has evolved and is now a no-bundle JavaScript development server.

As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with support for Vue SFCs **with hot reload**. Now it’s almost 6AM and I have PoC working. The hot reload is so fast it’s near instant.

— Evan You (@youyuxi) April 20, 2020

Vite doesn’t bundle our projects in development environments, rather it uses native ES module imports.

According to its official documentation:

Vite is an opinionated web dev build tool that serves your code via native ES Module imports during development and bundles it with Rollup for production.

The main difference between Vite and the other development servers currently available is the fact that it does not bundle your files during development.

It is important to note that Vite is still very much experimental and is undergoing work to make it suitable for production. It is best to not use it on critical projects until it becomes stable.

How does it work?

One of the reasons module bundlers are popular today is the poor support for ES6 modules by the browser when ES modules were first introduced in ES2016. Many modern browsers now support native ES modules and you can use the import and export statements natively, we can include our imports in our HTML using the type="module" attribute in our script tag to specify we’re importing a module:

<script type="module" src="filename.js"></script>

According to the documentation, the ES import syntax in our source code is served directly to the browser and any browser that supports the native <script module> automatically parses them, then makes HTTP requests for each import. The dev server intercepts the HTTP requests from the browser and performs code transformations where necessary.

This makes the Vite server insanely fast, Vite Cold start clocks at around 140ms compared to Vue-CLI 1900ms.

vue-next-webpack-preview cold server start: 1909ms / compiled for first view: 2732ms

vite cold server start: 129ms

— Evan You (@youyuxi) May 4, 2020

What does Vite offer?

Some of the perks of using Vite include:

Bare module resolving —  Browsers do not yet support bare module imports where you import from a package name like import { createApp } from 'vue' because it’s not a relative path to our node_modules. Vite checks your JavaScript files for such bare import specifiers, it rewrites them and performs module resolution to locate the correct files from your project dependencies and resolves them as valid module specifiers.

Hot module replacement(HMR) — Hot module replacement is a feature available in JavaScript bundlers where your JavaScript file changes are updated in the browser without needing a browser refresh, with Vite all your file changes are reflected in the browser almost immediately and you do not need to reload the browser. According to the documentation, “the hot module replacement (HMR) performance is decoupled from the total number of modules. This makes HMR in your project consistently fast no matter how big your app is”.

HMR speed is a huge pain point for developers who use Webpack.

On-demand compilation— Vite compiles source files as they are requested by the browser so the only code that is imported and required on the current screen is compiled, and unchanged files return a 304 (Not Modified) error code. This is different from what current bundlers do because they compile all the files in your project and bundle them before you can begin making changes to them. This makes Vite suitable for larger projects.

Configuration option — If you like to have more controls over your project, You can extend the default configuration of your project with the vite.config.js or vite.config.ts file in the base root directory of your project or the current working directory. You can also explicitly specify a config file via vite --config my-config.js.

You can add support for custom file transforms by adding a Koa middleware in your configuration file in development mode and a Rollup plugin for build.

Other features of Vite include:

• Support for .tsx and .jsx files using esbuild for transpilation
• Out of the box support for TypeScript also using esbuild for transpilation
• Asset URL handling
• Support for CSS Preprocessors, PostCSS, and CSS modules
• Support for mode options and environment variables

Basic usage

To get started using Vite, we will be making use of create-vite-app, a boilerplate to bootstrap new Vite projects, we will not have to worry about configurations to get started with using our app as it comes with Vue as the default starter and we can configure what template we want to use with the --template flag as it also supports React and Preact.

Run this command to create a new Vite app with the boilerplate:

#Using NPX
npx create-vite-app testing-vite

#or, Using Yarn
yarn create vite-app testing-vite

We’re using the name “testing-vite” as the project name for this tutorial, it can be replaced with whatever name you deem fit.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Now, change to the created project directory using the command:

cd testing-vite

Then proceed to install the necessary packages required for our project to work:

#Using NPM
npm install

#or, Using Yarn
yarn

We can then spin up our development server in the browser by running the command:

#Using NPM
npm run dev

#or, Using Yarn
yarn dev

You should get something similar to this running on http://localhost:3000 after running the dev command:

You can run the following command to bundle your app for production:

vite build

Vite uses Rollup for production builds, the production build output is in the dist directory located in the root of your project. It contains static assets that can be deployed anywhere (and can be polyfilled to support older browsers).

The documentation says, “the build step is configurable by passing on most options to Rollup”.

Conclusion

With Vite, you have a very fast development server that would improve your development workflow and increase productivity.

The result of your file changes are instantaneous in the browser and you can bundle your app for production using Rollup. The code repository to this article can be accessed on GitHub.

Are you adding new JS libraries to build new features or improve performance? What if they’re doing the opposite?

There’s no doubt that frontends are getting more complex. As you add new JavaScript libraries and other dependencies to your app, you’ll need more visibility to ensure your users don’t run into unknown issues.

LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively.

LogRocket works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app’s performance, reporting metrics like client CPU load, client memory usage, and more.

Build confidently — start monitoring for free.