adnenre
#tools

Vite

The Fast‑Evolving Build Tool Powering Modern Web Development

Vite has become one of the most important tools in the frontend ecosystem — transforming how developers build, iterate, and ship modern web applications. In this post, we’ll explore where Vite came from, why it emerged, how it evolved (including the shift to Rust‑powered tooling), and how it’s used with frameworks like React and Angular.

#What Is Vite?

Vite (pronounced veet, French for “quick”) is a modern build tool that provides blazing fast development experience and optimized production builds. It combines a high‑performance dev server with a powerful bundler, all while focusing on minimal configuration and excellent defaults.

#1 - Origins and History

Vite was created by Evan You, the creator of Vue.js, in 2020. It was designed to address growing pain points in traditional build systems — especially around slow dev server startup, laggy hot module replacement (HMR), and lengthy production builds.

#Why It Was Needed

In earlier years, tools like Webpack dominated the landscape, but as projects grew, developers faced:

  • Cold dev server starts of tens of seconds
  • Slow HMR (1–3 seconds)
  • Complex configuration files
  • Fragmented tooling across environments

Vite approached these problems with a new architecture using native ES modules in the browser and only serving modules on demand.

This difference — no upfront bundling during development — revolutionized the dev experience:

  • Dev server starts almost instantly
  • HMR is almost instantaneous
  • Less configuration overhead

#2 - How Vite Works

Vite’s architecture splits development and production workflows:

#Development Mode

  • Uses native ES modules (ESM) in the browser
  • Serves modules only when requested
  • Transforms them as needed
  • Pre‑bundles dependencies once

This yields cold starts of under a second and HMR updates in milliseconds.

#Production Mode

For production builds, Vite traditionally used Rollup (a powerful JavaScript bundler) to produce optimized final bundles. This ensures tree‑shaking, code splitting, and minimum file size — all critical for performance.

#3 - Dual Toolchain and Its Evolution

Originally, Vite’s internal toolchain included:

  • esbuild (written in Go) for super‑fast dev transformations
  • Rollup (JavaScript) for production bundling

However, maintaining two separate engines introduced subtle inconsistencies and complexity.

#Enter Rolldown and Rust

Vite is now evolving toward a unified Rust‑powered toolchain:

  • Rolldown — a Rust‑written bundler replacing Rollup and esbuild
  • Oxc — a Rust compiler toolkit handling parsing, transforms, and minification
  • LightningCSS — efficient CSS handling in Rust

This shift — already happening in Vite 8 and beyond — offers native performance improvements and a consistent pipeline from dev to production.

#4 - Why Vite “Won” the Build Tool Wars

By 2025–2026, Vite became the default choice for new frontend projects, spanning Vue, React, Angular, Svelte, and more — effectively surpassing older tools like Webpack.

Some reasons include:

  • Speed: Dev servers start in under a second
  • Zero‑config: Works out of the box for many frameworks
  • HMR: Immediate updates without full page reloads
  • Plugin ecosystem: Built on Rollup‑compatible APIs
  • Framework adoption: Vue, SvelteKit, Astro, SolidStart
  • Templates: Easy starters for vanilla, React, Vue, etc.

With Vite’s adoption in Angular 17+ and similar systems, even traditionally heavy build environments embraced Vite’s speed advantage.

#5 - Vite with React

React developers quickly turned to Vite as an alternative to Create React App (CRA):

  • Easy npm create vite@latest my-app setup
  • Supports JSX and TypeScript out of the box
  • Fast refresh and minimal boilerplate

React + Vite removes the need to eject or maintain CRA boilerplate while providing an extremely fast feedback loop.

#6 - Vite in Angular Projects

Angular traditionally relied on its CLI, but recent versions (17+) integrated tools like esbuild and moved toward Vite’s dev server. While full template compilation still depends on Angular’s tools, Vite enhances build speed and iteration.

Some developers report that Angular doesn’t benefit as dramatically compared to Vue or React because of its existing heavy compile steps, but adoption continues to grow.

#7 - Vite CLI and Project Bootstrapping

Getting started with Vite is simple via the CLI:

npm create vite@latest my‑vite‑app
cd my‑vite‑app
npm install
npm run dev

Share this post