Browsers do not run JSX, TypeScript, or npm-style imports natively. A build step transpiles (e.g. TS → JS, JSX → JS) and bundles (combines modules, resolves imports). In development you get a dev server with hot reload; for production you get minified, cacheable output.

Env variables (e.g. API URL) are often injected at build time. Source maps map bundled code back to source for debugging.

Vite: uses native ES modules in dev for fast startup and HMR; uses Rollup for production builds. Simple config, fast by default. Webpack: very configurable, many loaders and plugins; more setup but handles complex cases.

Both support code splitting, env replacement, and loaders (e.g. for CSS, images, TypeScript). Vite is the default in many new React/Vue templates; Webpack is common in older or highly customized setups.

Use dynamic import() to load code on demand (e.g. per route or on user action). The bundler emits separate chunks that load when needed. Output filenames with a content hash so unchanged files keep the same URL and cache well.

[MDN – Client-side tools](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started).