avatar Kisaragi Hiu

What is Vite?

A light introduction to Vite

When I first learned Vite, I found its official slogan, "frontend tooling" and "development environment", to be extremely vague.

Granted, I also find it hard to describe satisfactorily — “Super-fast dev server + sensible defaults for Rollup” might be a little more descriptive, but might not reflect the project's vision.

So, what is Vite? The Getting Started page says it best:

Vite […] is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

Vite is opinionated and comes with sensible defaults out of the box, but is also highly extensible via its Plugin API and JavaScript API with full typing support.

The dev server is an alternative to using in-browser import (“native ES modules”) during development.

Traditionally you set up a bundler, then you set up a development server that provides hot reload and such. The development mode might be part of the bundler, or it might be a standalone.

With Vite, you don't set up the bundler yourself. It plays the role of a bundler in a project. Using Vite is like using webpack-dev-server + Webpack, except the dev server is Vite itself, the bundler is Rollup, and a default bundler config is provided by Vite.