[Bug]: Rspack Dev Tools Slow when source-maps are generated using "eval" option

[pushkargupta9807]

System Info

System:
OS: Linux 6.5 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (32) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
Memory: 110.57 GB / 125.78 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 20.11.0 - /usr/local/share/nvm/versions/node/v20.11.0/bin/node
Yarn: 1.23.19 - /usr/bin/yarn
npm: 10.2.4 - /usr/local/share/nvm/versions/node/v20.11.0/bin/npm
Watchman: 20240317.093234.0 - /usr/local/bin/watchman
Browsers: Edge

Details

Hi some of my team members have reported the below issue when serving an app and debugging , so wanted to check if others are experiencing the same issue:

1. I noticed that the devtools within Edge's sources tab seem really slow to load with Rspack building. I think it was working fine without rspack, so I think the critical difference is using it.
2. It seemed like everything was using these giant relative paths last time I tried to use it, so everything loads in some sources folder in Edge. Initially I thought it might just be me but a few other members of my team also seem to be running into the slowness.
3. I frequently have my whole tab freeze / crash while I try to do anything (ex: nav through the stack trace) in the sources tab when a breakpoint is hit.
4. my devtool window responses slowly, hitting a break point will just cause the devtool window crashes.
5. Debugging is becoming extremely difficult with rspack. Most of the times, the dev tools just freezes and there is nothing I can do except restarting the browser again. Even after restart, the very next time, it hits a breakpoint and immediately freezes up again.

After testing with various devTool options it seems like with the "eval-cheap-module-source-map" option does 2 things:

1. loads the file as giant relative paths as shown below
   
2. This consequently caused the memory usage for the main application VM in the browser by 3x. (This could be the cause of the hanging/ unresponsiveness of the devtools window in Edge browser)

When I remove the "eval" option and just use "cheap-module-source-map" , I see:

1. the folder structure of the source files is maintained and NOT loaded as relative paths.
   
2. the memory usage for the main application VM in the browser goes down AND the slowness/ hanging is not observed.

So is it a bug with with rspack when source maps are generated using "eval" option?

Reproduce link

No response

Reproduce Steps

Debug an application with source -maps generated using the devTools: "eval-cheap-module-source-map" option and observe:

1. source files loaded as relative paths in browser's DevTools
2. after a while the devTools in the browser freeezes/ hangs / unresponsive
3. Edge browser is being used.

[github-actions]

Hello @pushkargupta9807, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

[pushkargupta9807]

@LingyuCoder @h-a-n-a
here is the repro repo for this issue: https://github.com/pushkargupta9807/rspack-repro-latest

yarn
yarn dev:rspack // for rspack serve

Intructions:

1. yarn dev:rspack with devTools: "eval-cheap-source-map"
   
2. yarn dev:webpack with with devTools: "eval-cheap-source-map"
   

you can clearly repro the above and see the difference in the way source files are loaded with this devTools option with eval.
This is the reason for I frequently have my whole tab freeze / crash while I try to do anything (ex: nav through the stack trace) in the sources tab when a breakpoint is hit. This is very bad in large repo and makes impossible to debug .

[pushkargupta9807]

with the "eval" optimization removed from the devtools, it works fine with rspack :
yarn dev:rspack with devTools: "cheap-source-map"

[pushkargupta9807]

a gentle follow up, @SyMind hopefully you are able to repro the issue. Thanks

[pushkargupta9807]

hello, @SyMind @h-a-n-a just wanted to check if any updates on this issue. Please let me know if you are not able to repro or any other clarification. This is a pain point for all the developers and it would be great to have it resolved. Thanks

[SyMind]

@pushkargupta9807 I am following up on this issue.

[SyMind]

@pushkargupta9807 I fixed it. Please try again.

[pushkargupta9807]

Thank you @SyMind . Let me try and get back.

[pushkargupta9807]

@SyMind I tried with the Rspack 0.7.6-canary-f272bd8-20240625122346 and Rspack 0.7.5 versions - however the issue still remains. Is the fixed merged in these versions?

Still do not see the file tree structure with "eval-cheap-module-source-map":
"eval-cheap-module-source-map"

vs without "eval"

[pushkargupta9807]

@SyMind just a follow up, I do not think the issue is fixed. Can you please check. Thanks