Glossary · Web Development

Vite

Vite is a front-end build tool that serves source files as native ES modules in development and bundles them with Rollup for production.

Updated October 6, 2026

Vite (French for "quick") is a front-end build tool and development server created by Evan You. In development it serves your source files to the browser as native ES modules without bundling them first, and for production it produces optimized bundles.

Why it matters

Traditional bundlers rebuild large dependency graphs before the dev server starts, which slows big projects. Vite pre-bundles dependencies once and transforms source files on demand, so startup and hot updates stay fast as an app grows. It supports TypeScript, JSX, CSS preprocessors and many frameworks through plugins, and it is the default starter for Vue, Svelte and many React setups.

Example

npm create vite@latest my-app
cd my-app
npm install
npm run dev     # dev server with hot module replacement
npm run build   # production bundle in dist/

The dist/ folder contains static files you can upload to any web host or CDN.

Common mistakes

  • Expecting development and production to behave identically; they use different pipelines, so always test the production build.
  • Exposing secrets: only variables prefixed VITE_ are sent to client code, and anything exposed is public.
  • Forgetting the base option when deploying under a sub-path, which breaks asset URLs.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · Web DevelopmentBootstrapBootstrap is a widely used front-end framework of prebuilt CSS components, a grid system and optional JavaScript for building responsive sites quickly.Glossary · Web DevelopmentBundler (Module Bundler)A bundler is a build tool that combines many JavaScript modules and assets into a small number of optimized files for the browser.Glossary · Web DevelopmentCritical CSSCritical CSS is the minimal set of styles needed to render the visible part of a page, inlined in the HTML so content appears without waiting for stylesheets.Guide · Hosting & CDNCDN Explained: What It Does, When You Need One, and How Caching WorksUnderstand how a content delivery network works, which headers control caching, what origin shield does, when a CDN helps or hurts, and how to verify it is working.7 min readGuide · Hosting & CDNCloudflare Cache Rules and Purge: What Gets Cached and How to Clear ItHow Cloudflare decides what to cache, how to read cf-cache-status, build cache rules, set TTLs, and purge by URL, tag, prefix or everything without hurting performance.7 min readGuide · PerformanceCore Web Vitals Guide: Improve LCP, INP and CLS Step by StepLearn what LCP, INP and CLS measure, how lab and field data differ, and the practical fixes for images, fonts, JavaScript and layout shifts.9 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.