Vite (French for "fast," pronounced /vit/) is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:


  1. A dev server that provides rich feature enhancements over native ES modules, for example, extremely fast Hot Module Replacement (HMR).

  3. A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

Why is Vite so Fast? The Dev Server

Traditional bundlers like Webpack have to crawl and build your entire application before they can serve a single page. If your app is large, this can take minutes.

Vite takes a different approach. It leverages modern browsers' native support for ES Modules (ESM).

  1. On-Demand Serving: When you request a page, Vite serves the files directly to the browser. It doesn't bundle anything upfront.
  2. Native ESM: The browser requests modules via <script type="module">. The browser itself is responsible for handling the import statements.
  3. Transforming as Needed: If Vite encounters a file that needs transforming (like a .jsx or .vue file), it transforms just that single file and serves it.

This "no-bundling" approach during development means the server startup is almost instantaneous, regardless of your application's size.

Starting a Vite Project

Getting started is incredibly simple. You can scaffold a new project for Vanilla JS, Vue, React, Svelte, and more with one command.

Bash


# Using NPM
npm create vite@latest my-react-app -- --template react

# Using Yarn
yarn create vite my-react-app --template react

# Then navigate into the project and install dependencies
cd my-react-app
npm install

# And start the dev server!
npm run dev

You'll immediately get a local server running, usually on http://localhost:5173.

The Build Flow for Production

While using native ESM in development is great, it's not ideal for production due to the extra network round-trips caused by nested imports.

For the production build, Vite uses Rollup, a powerful and mature module bundler. When you run npm run build, Vite:

  1. Crawls and bundles your application code.
  2. Optimizes your assets (minification, code-splitting, etc.).
  3. Outputs a highly optimized set of static files in the /dist directory, ready for deployment.

This gives you the best of both worlds: a lightning-fast, no-bundle dev server and a traditional, highly optimized bundle for production.