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.
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.