Show source files for vite bundled dependencies correctly

[hybridherbst]

Hey, I stumbled upon this tool on your Twitter, and it is indeed very fast and nice to navigate Chrome profiles with it.
One issue I ran into is that when using vite (which pre-bundles JS dependencies), the output looks like this – instead of showing which source file the code comes from, it's just displayed as coming from the prebundled chunks:

While the function names are readable, where the methods are coming from is all just from the chunks that vite has generated.
I'm not entirely sure but I believe all that data (which files these methods actually come from) should be part of the source maps vite already generates.

Would it be possible to show better file information in the trace based on that? Or is that an issue with how chrome creates the trace file?

[lahmatiy]

@hybridherbst Thank you for your feedback and for bringing up this issue.

Currently, Chrome generates traces without applying source maps. Specifically, Chrome does not modify the locations returned by the V8 profiler. Source maps are only utilized by developer tools on demand and are not included in Chrome traces (Chromium Performance Profile) by default.

To achieve better file information for bundled code, source maps need to be applied to a .cpuprofile or Chromium performance profile on your side. I'm planning to add functionality that will allow users to upload source maps into cpupro and apply them to a profile. However, there is no ETA for the feature at the moment. More likely, this capability might be implemented via CLI first. Nevertheless, you will need to obtain and manage the source maps on your side anyway.

[hybridherbst]

Thanks for the response!

source maps need to be applied to a .cpuprofile or Chromium performance profile on your side

Is that a process where tooling exists already? I'm not aware of it.

[sadan4]

this would be really nice to have