Vite
- Pronunciation
- VEET
In short
Vite is a fast build tool for web projects: it serves code to the browser almost instantly in development and bundles it into optimized files for production.
What is Vite?
Vite, French for "quick", was created by Evan You, the author of Vue, and released in 2020. Older tools such as webpack bundle the whole application before the development server can start, which gets slow as projects grow. Vite starts in a fraction of a second and only processes the files the browser asks for.
It can do this because modern browsers understand JavaScript modules natively. During development Vite serves your source files as ES modules, transforming TypeScript, JSX or Vue files on the fly, and pre-bundles dependencies with the very fast esbuild. When you save a file, hot module replacement swaps just that module in the page without a full reload, keeping the app's state.
For production Vite still bundles, because many small files load slowly over the network: it uses Rollup, and its newer Rust-based successor Rolldown, to produce minified, tree-shaken and code-split output. Official templates set up React, Vue, Svelte, Solid and others in one command, and many frameworks, such as Nuxt, SvelteKit and Astro, are built on it.
A common misconception is that Vite is a framework. It is a build tool and development server; the framework you use, if any, sits on top. Vitest, a test runner made by the same community, reuses Vite's configuration so tests understand the same files as the app.
Key takeaways
- Vite is a fast development server and build tool for web projects.
- In development it serves native ES modules and transforms files on demand.
- Hot module replacement updates changed modules without a full reload.
- Production builds are bundled, minified and code-split.
- Many frameworks, such as Nuxt, SvelteKit and Astro, are built on Vite.
Example
# Create a React + TypeScript project from the official template
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev # dev server, ready in well under a second
npm run build # optimized files in dist/Readers ask
What is the difference between Vite and webpack?
Webpack bundles the whole app before serving it in development. Vite serves source files to the browser as native ES modules and only transforms what is requested, so it starts and updates much faster; both bundle the code for production.
Is Vite only for Vue?
No. Vite was created by Vue's author, but it works with React, Svelte, Solid, Preact, Lit and plain JavaScript, and many frameworks use it underneath.
What is Vitest?
A test runner built on Vite that shares its configuration and transforms, with an API similar to Jest's. It is popular in projects that already use Vite.
Often compared
See also
- BundlerWeb Development, p. 3A bundler is a build tool that combines JavaScript modules and their dependencies into a few optimized files that browsers can download and run quickly.
- JavaScriptWeb Development, p. 24JavaScript is the programming language that runs in web browsers to make pages interactive, and it also runs on servers through runtimes like Node.js.
- MinificationWeb Development, p. 30Minification is the process of shrinking code files by removing whitespace, comments and long names without changing behavior, so web pages download faster.
- Tree ShakingWeb Development, p. 49Tree shaking is a build optimization that removes code a program never uses from the final bundle, based on which ES module exports are actually imported.
- Code SplittingWeb Development, p. 5Code splitting is a technique that breaks a web app's JavaScript into smaller chunks loaded on demand, so the first page load downloads only the code it needs.
- TranspilerWeb Development, p. 48A transpiler is a tool that translates source code from one language or language version into another at a similar level, such as TypeScript into JavaScript.
Spotted a mistake or something missing on this page?Suggest an edit