Vite DevTools

[antfu]

I will be working on building a DevTools for Vite with the Rolldown team. Here is the meta thread for tracking the progress and collecting ideas.

For now, the idea of Vite DevTools is:

• Plugin pipeline inspection (will be ported from https://github.com/antfu-collective/vite-plugin-inspect)
• Bundle analysis, will be powered by metadata from Rolldown
  • Tree-shaking visualization
  • Barrel-file detection
  • CJS/ESM visualization
• Vite environments visualization
• Actionable suggestions to improve the bundle and frontend performance
• Time-based bundle report
• It will be able to be used in both dev-time and build-time via a command or a flag

If you have any more ideas, feel free to comment below! Thanks

[sapphi-red]

Listing some ideas I came up with🙂

• dev server / build perf analysis
  • hook filter metrics
    • how many times the hook was called (to check if adding a filter is beneficial)
    • how many times it was filtered out by filter (to check if the filter is effective)
    • how much time the hook took totally (to check if the hook itself is slow)
    • suggest adding hook filter if there's many early-return like behaviors
• bundle analysis
  • visualize which module is included in which chunk
• transform option inspection: show which esbuild/oxc options + tsconfig compiler options are applied for each modules

[sapphi-red]

Adding one more idea:

• show which module matched the advancedChunks.groups.test filter

[sapphi-red]

Adding some more ideas (from the experience of investigating vitejs#182 (comment)):

• show the execution order graph
• show whether the module is marked as side effect free by sideEffects field

[alexzhang1030]

• dev server inspection, request/response can be observed, modified, etc.
• transformIndexHtml hook inspection

[developit]

I have a patently absurd amount of code for this that I might be able to provide access to. We have some AI bundle analysis stuff and its sitting on top of a bunch of raw bundle analysis logic.

[panstromek]

Some bundle analysis would be welcome. Curently, there's rollup-plugin-visualizer but it's not very helpful, because sizes are pre-minification. Also, Vite injects some code (e.g. __vite_mapDeps) in later stages, so I'm not even sure if that's properly counted.

I generate sourcemaps and use source-map-explorer instead, that's more useful. I plan to write some post-build checks using that - I want to ensure that certain chunks are never merged together and limit size of the most commonly used subset of the bundle. vite already outputs some stats, so it'd be nice if it could support some of this diagnostic natively.

It'd be especially nice to have some tools diagnosing why are certain pieces of code injected by the bundler - the module.toString thingy, __viteMapDeps .

And based on those, some actionable suggestions on how to reduce impact of those, e.g.:

• "this dynamic import preloading code is duplicated in multiple chunks, maybe move it to a common module?"
• "this dynamic import adds more overhead than static import, maybe remove it?"
• "this image got inlined, maybe reduce inline asset limit?"
• "changing your asset naming pattern could reduce your bundle by N bytes"
• "this string appears N times in your code base, maybe extract it to a common constant?"
• "if you split this module or avoid this import here, your initial chunk will get smaller"
• "this import has side effects, maybe remove those, so it can be better optimized"

Not sure how much of this is in scope, but I'd certainly love to have better tools for dagnosing these issues.

[filipsobol]

If you need a bundle visualisation based on sourcemaps (that takes minification into account), then have a look at https://sonda.dev/

[Kai-ros]

To add onto the point of more visualizations, performance flame graphs or relational graphs would also be a nice touch. Maybe you could even leverage existing work from the suite of pprof libraries to get early wins with it.

Google pprof
Datadog pprof
MSFT pprof

[panstromek]

Note that you can get a flamegraph if you run vite with node --inspect-brk, connect to the running instance from chrome://inspect and hit record in performance tab. Is there something missing in that scenario you'd want to have specifically?

[Jarvis-assemble]

• actionable recommendations to resolve or mitigate memory leaks.
• Visualisation of memory usage trends

[art70x]

It would be great if Vite DevTools included a few features focused on better SEO and accessibility. Even a minimal set of tools would help developers build more polished apps.

• ✅ Accessibility checks (like axe-core, Pa11y, or Lighthouse)
• 🌐 SEO Analysis (meta tags, titles, structured data validation and how it will look like in search results)
• 🖼️ Open Graph (OG) inspection and preview (how link previews will appear on social media like in Nuxt Devtools)
• 🔍 Link checking (broken links, external vs internal like Nuxtseo 's link-checker)
• ⚡ Performance & page speed insights (hydration timings, bundle size, layout shift, etc.)
• 🔨 Recommended fixes/upgrades for SEO, a11y, opengraph and performance
• 📤 Export reports as JSON or HTML

[mikaelkarlsson-se]

Not sure it's within the scope, but an improved debug of HMR would be great! With "improved" I mean compared to --debug hmr and I would appreciate more detailed information and preferably some kind of visual overview and perhaps most of all references to the code causing issues.
I today struggle with full page reloads when changing certain files like e.g Zustand stores. if I could get enough information to understand why and have a chance to fix it, it would make a huge difference for the better! 🙏