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:
- A dev server that provides rich feature enhancements over native ES modules, for example extremely fast Hot Module Replacement (HMR).
- A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.
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.