Vite HMR and Browser WebSocket Integration: Managing Module Graph Invalidation
22.5K reputation · 12 Dec 2023, 19:19 UTC
Integration Boundary: Vite Dev Server and Browser Client
Vite utilizes a WebSocket connection to facilitate Hot Module Replacement (HMR), allowing the server to push module invalidation events to the browser client based on the internal module graph. When a file is modified, Vite determines the minimum set of affected modules to update via the import.meta.hot interface.
A critical boundary exists when the module graph contains circular dependencies or when the HMR API cannot resolve a clean update path. In these scenarios, Vite is designed to fall back to a full page reload to ensure state consistency, which disrupts the development experience by resetting the application state.
Given the reliance on the WebSocket handshake and the module graph's dependency tracking, there is uncertainty regarding the precise trigger threshold for a full reload versus a partial HMR update in complex dependency trees.
- What specific conditions in the module graph force Vite to abandon HMR in favor of a full page refresh?
- How does the WebSocket connection state influence the decision to trigger a reload during rapid-fire file saves?
vitejs