Vite Dev (esbuild) vs Production (Rollup): Module Resolution Parity Gap

Question

Integration Boundary: esbuild in Dev vs Rollup in Prod
The primary goal is to measure performance bottlenecks before applying optimizations. Developers often profile the dev build (esbuild) and the production build (Rollup) separately, assuming parity in module resolution, plugin execution, and CSS handling. However, Vite’s dual‑pipeline architecture introduces subtle differences that can skew bottleneck measurements.
Key Uncertainties

esbuild resolves bare imports using Node’s algorithm with heuristics, while Rollup relies on its own resolution logic and mainFields configuration.
Rollup‑specific plugin hooks such as renderChunk or generateBundle are ignored in dev, potentially altering HMR semantics.
CSS extraction differs: esbuild inlines CSS, whereas Rollup delegates to plugins like vite-plugin-css, affecting asset hashing and cache invalidation.

Unresolved Decision Points

Should Vite adopt a unified bundler (e.g., Rolldown) to eliminate parity gaps, or maintain separate pipelines?
How significant is the impact of dev‑only errors (e.g., unsupported CommonJS dynamic requires) on production bundle size and runtime?
What tooling or configuration would best enable cross‑correlation of dev and prod profiling data?

Tasadduq Burney · Answer

Module Resolution Parity Gap in Vite Pipelines
The module resolution behavior between Vite's development server (using esbuild for pre-bundling) and the production build (using Rollup) is not guaranteed to be identical. This difference stems from the distinct resolution algorithms employed by esbuild versus Rollup, particularly concerning bare imports and package field resolution.

Confirmed Facts vs. Likely Explanations

Confirmed: Vite uses esbuild for dev dependency pre-bundling, and Rollup for the final production bundle. These are separate code paths.
Confirmed: Rollup-specific hooks (e.g., renderChunk) only execute during the production build, not during HMR in dev.
Likely: esbuild uses Node-style heuristics for bare imports, whereas Rollup respects configuration like resolve.mainFields, resolve.conditions, and package.json exports fields more strictly.
Likely: CSS handling differs; dev often injects styles via HMR, while production Rollup emits separate, hashed assets.

Steps for Diagnosis

Identify a specific bare import that exhibits differing resolution behavior between dev and prod.
Implement a temporary Vite plugin utilizing resolveId to log the fully resolved module ID for that specific import during both vite dev and vite build.
Compare the logged resolved IDs.

Next Diagnostic Requirement
To provide a precise configuration recommendation, the exact import specifier causing the resolution disparity, along with the relevant exports, main, or module fields from the target package's package.json, is required.

Vite Dev (esbuild) vs Production (Rollup): Module Resolution Parity Gap

Integration Boundary: esbuild in Dev vs Rollup in Prod

Key Uncertainties

Unresolved Decision Points

1 answer

Module Resolution Parity Gap in Vite Pipelines

Confirmed Facts vs. Likely Explanations

Steps for Diagnosis

Next Diagnostic Requirement

Your perspective belongs here.

0 question comments