Vite and webpack: principles and diagnosis

A risky interview answer is to repeat “Vite uses esbuild in development and Rollup in production” without checking the project version. Toolchains evolve. A robust explanation starts with the version in use and then focuses on stable design goals.

Why Vite starts quickly in development

Vite serves source through native ESM and transforms modules as the browser requests them instead of bundling the entire application before startup. Dependency pre-bundling converts incompatible module formats and combines dependencies with many internal modules to reduce request waterfalls.

The cache depends on the lockfile, patches, relevant configuration, and environment. When dependency behavior is stale, inspect which cache input changed before treating cache deletion as a standard ritual.

Development and production serve different goals

Development optimizes on-demand transformation, HMR, and debugging. Production needs the full module graph, tree shaking, chunks, minification, content hashes, and deployable artifacts. A page that works in dev may still fail during SSR or production bundling, so the production build and preview are required checks.

webpack loader versus plugin

• A loader transforms individual module content into something webpack can include in the graph.
• A plugin participates in the compiler and compilation lifecycle to generate, optimize, inject, or analyze assets.

The useful distinction is input, scope, lifecycle, and concrete examples—not the names alone.

Tree-shaking failure modes

Tree shaking requires statically analyzable ESM and trustworthy side-effect information. Converting modules to CommonJS, dynamic export access, or an incorrect sideEffects: false can weaken analysis or remove required CSS, polyfills, and registration code.

Validate it with a minimal consumer build, artifact analysis, and functional regression rather than assuming the configuration works.

Chunking and caching are one design problem

• Split entry points by route or business domain.
• Give stable, frequently shared dependencies a cacheable chunk without creating one oversized vendor bundle.
• Use content-hashed static assets with long caching and keep HTML short-lived or no-cache.
• Make releases atomic and retain previous chunks to reduce ChunkLoadError during rollout.

References: Vite Performance, webpack Tree Shaking, and webpack Code Splitting.