search

web-infra-dev / rsdoctor

A one-stop build analyzer for Rspack and Webpack.
https://rsdoctor.dev/
MIT License
330 stars 20 forks source link

[Feature]: Perf optimization for huge list/tree using virtualization in Rsdoctor App #400

Open denniscual opened 1 week ago

denniscual commented 1 week ago

What problem does this feature solve?

Currently, whenever the Rsdoctor Analyzer App renders a huge list or tree like the "Imported Reasons Tree", it takes longer to render the tree. I also experienced this when expanding all of the modules of a huge js asset. The asset is 7mb+ and created by a huge number of node modules. Worst case, the app is lagging which makes it unusable. This makes it hard to use the analyzer. Below is a Chrome Profiler Metrics I gathered when clicking the "expand all" button in Module Tree pane.

Screenshot 2024-06-28 at 11 18 32 PM

The "Long tasks" took almost 6 seconds and then another 2 seconds before it painted the changes on the screen. It caused by trying to render a huge number of List Items in a single render pass and then paint it once. Time slices like transition can't help here. So my suggestion is to use "Virtualization" to reduce the number of list items and only render the items that are visible in the viewport.

What does the proposed API look like?

The issue is for enhancing the UX in the Rsdoctor Analyzer App not an additional API.

easy1090 commented 3 days ago

I'm sorry for the bad experience. We will optimize and reconstruct this part later.