PART 12

Performance

Cold start, @vitejs/devtools, HMR diagnostics, tree-shaking.

12.1Cold Start OptimizationWhy does the Vite dev server sometimes start slowly? Tuning optimizeDeps, pre-bundling strategies, and how Rolldown speeds things up — make your project fast from the very first `pnpm dev`.
12.2Vite DevTools in PracticeThe official Vite 8 debugging framework `@vitejs/devtools` — enabling modes, visualization capabilities, how it relates to vite-plugin-inspect, and how to extend it with your own Dock panel.
12.3HMR Performance DiagnosisHMR feeling sluggish? Use `--debug hmr` to find the bottleneck — is it a slow transform, a large module graph traversal, or WebSocket latency? Diagnose and fix the right problem.
12.4Bundle AnalysisUse rollup-plugin-visualizer to find the heavyweights in your bundle — which packages take up the most space, where you can optimize, and how to continuously track output size.
12.5Full Bundle Mode (Experimental)The next step on the Vite 8 roadmap — Full Bundle Mode lets the dev server produce a complete bundle, trading startup speed for behavior closer to production and fewer HTTP requests.
12.6Tree-shaking in PracticeTree-shaking is not magic — it has prerequisites. How the sideEffects field affects optimization, what code patterns prevent tree-shaking, and how to verify that tree-shaking is actually working.
12.7Troubleshooting CookbookA systematic guide for Vite failures: stalled dev servers, broken HMR, blank production pages, dynamic chunk 404s, stale optimized deps, and Node module externalization.