Frontend
Vite
A fast dev server and bundler for frontend, built on native ES modules.
What it is
Evan You (the author of Vue) created Vite in 2020. The name is French for quick. It solves slow startup and updates in bundle-based build tools.
In development Vite serves code to the browser as native ES modules and pre-bundles dependencies with esbuild, so startup is nearly instant and HMR (hot module replacement) is fast. For production it uses Rollup (and Rolldown in newer versions).
It works with React, Vue, Svelte, Solid and plain TypeScript through plugins. Vite powers Nuxt, SvelteKit, Astro and the Vitest test runner under the hood.
Use it when
- A new SPA or library on React, Vue or Svelte.
- An old webpack project starts and updates too slowly.
- You need a fast dev loop with minimal config.
Avoid it when
- A very specific build with complex loaders where webpack is already tuned and migration is not justified.
- If you need ready SSR and routing: use a meta-framework (Next.js, Nuxt) on top of it.
Key concepts
- Native ESM in dev
- The browser loads modules itself, and Vite only transforms files on request.
- HMR
- Instant replacement of changed modules without a page reload.
- Dependency pre-bundling
- esbuild bundles dependencies from node_modules into one module for fast loading.
- Plugins
- A Rollup-based plugin interface, compatible with most of them.
- Environment variables
- Only variables prefixed with
VITE_reach client code.
Example
Interview questions
1. Why does Vite start faster than webpack?
In dev mode it does not bundle the whole app. The browser requests modules through native ESM, and Vite transforms them on the fly. Webpack builds the full graph first.
2. What does Vite use for production builds?
Rollup produces an optimized bundle with tree shaking and code splitting. In newer versions Rolldown is gradually replacing it.
3. How do you pass env variables to the client?
Through
.envfiles with variables starting withVITE_. They are available asimport.meta.env.VITE_*. Other variables never reach the browser.4. How does Vite differ from Vitest?
Vite builds and serves the app. Vitest is a test runner that reuses the same Vite config and plugins.
Interview questions from the bank
- How does
React.lazywork, and when is component-level code splitting justified?MiddleReact - What is the critical rendering path, and how do you optimize it?MiddleFrontend performance
- What is code splitting, and along which boundaries should you split code?MiddleFrontend performance
- How do you analyze bundle size, and what do you do about large dependencies?MiddleFrontend performance
- How do you optimize CSS delivery?MiddleFrontend performance
- When is it appropriate to use Web Workers, and what are their limitations?SeniorFrontend performance
- What is a performance budget, and how do you build it into the development process?SeniorFrontend performance
- How does a Service Worker help with performance, and what caching strategies exist?SeniorFrontend performance
Related technologies
- webpackA module bundler for JavaScript: builds a dependency graph and packs code and assets into bundles.
- VitestA fast Vite-based test runner with a Jest-compatible API and native TypeScript and ESM support.
- VueA progressive UI framework with templates and reactivity and a low barrier to entry.
- ReactA library for building interfaces from components: UI as a function of state.
- SvelteAn interface compiler: turns components into minimal JavaScript without a heavy runtime.
Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).