intermediate

Vite

Use native ESM dev server speed with production Rollup bundling and explicit dependency optimization.

Vite serves source as native ESM in development with fast HMR and pre-bundles dependencies with esbuild. Production builds use Rollup for tree-shaken chunks, code splitting, and asset handling.

| Phase | Engine | Interview focus | |-------|--------|-----------------| | Dev server | Native ESM + esbuild dep scan | Cold start, HMR boundaries | | Production | Rollup | Chunk graph, externals, SSR builds |

					// vite.config.ts (minimal)
export default {
  build: { sourcemap: true, target: 'es2020' },
};

Environment variables expose only `import.meta.env.VITE_*` prefixes to client bundles by default. Plugins extend resolution, SSR, and framework integrations (React, Vue, Svelte).

On interviews: dev versus prod pipeline differences, dependency optimization failures, SSR dual bundles, and why Vite is a general frontend tool—not React-only.

Common pitfalls: assuming dev behavior matches prod chunks; shipping Node-only APIs to client; misconfigured `base` for deployed assets.

The trade-off is exceptional dev speed versus verifying Rollup production output separately.

Checklist:

Test production build and preview.
Inspect chunk sizes and dynamic imports.
Keep client env prefixes explicit.
Add plugins only with clear boundaries.