Modules, Runtime & Tooling

Vite & Modern Build Tooling

Vite uses native ES modules during development for fast startup and bundles optimized assets for production. It treats index.html as part of the module graph rather than just a static shell.

Dev server and production build are different modes
index.html is an entrypoint in Vite
Vite relies on ESM-friendly workflows
Plugins define framework behavior
Build-time env values are public in client code

Vite dev vs build

Fast dev and optimized production are separate execution paths.

Vite HTML entry

<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

`index.html` participates in the module graph in Vite projects.

Vite concepts
Concept	Meaning
Dev server	Fast local ESM serving
Production build	Bundled optimized assets
Dependency pre-bundling	Optimizes dependencies for dev
import.meta.env	Build-time env replacement
Plugin	Toolchain extension
Preview	Serve built output locally