perf(rolldown): reduce memory and rendering cost

[webfansplz]

Summary

This PR improves Rolldown DevTools performance for large build sessions by reducing memory usage in log processing
and lowering rendering cost in large UI views.

The main change is moving from eager full-event retention to indexed, on-demand log hydration. Large source/transform
contents are no longer kept in memory by default, and heavy UI surfaces now use virtualized rendering.

Changes

• Reworked Rolldown event reading to parse logs line by line and keep file offsets for events that may need hydration
  later.
• Stopped storing the full raw events array in memory; the events manager now keeps only the indexes and summaries
  needed by the UI.
• Added lazy hydration for module build metrics, transform contents, load contents, string refs, and asset data.
• Added bounded module metrics caching to prevent large sessions from growing memory without limit.
• Split session loading paths for normal sessions, asset-heavy views, and package summary views.
• Optimized package manifest and importer calculation with local caching and Map/Set indexes.
• Removed the raw events page and raw-events RPC endpoints, since raw events are no longer retained in memory.
• Added DataVirtualList support for dynamic, fixed, and window-based virtual scrolling.
• Added a reusable virtual tree component and migrated module/assets tree views to virtualized rendering.
• Virtualized large list/table views across modules, chunks, plugins, packages, and assets.
• Optimized module/chunk graph rendering by:
  • rendering only nodes near the current viewport,
  • default-collapsing deep or very wide graph branches,
  • avoiding layout reads from scrollWidth/scrollHeight where possible.
• Improved session selector handling for sessions without inputs.
• Ensured Rolldown RPC connects only after the client is trusted.
• Adjusted tests to validate the new event-count based reader behavior.
• Log cache
  • Added a persistent Rolldown log cache next to each logs.json, storing session
    summaries, compact module/plugin metrics, reader indexes, and package summaries under
    .cache/.
  • Restores cached summaries and reader indexes when the log file version, size, and
    mtime still match, so reopening or switching back to large sessions avoids reparsing
    the full log.
  • Keeps the cache best-effort and safe to ignore: stale, missing, or invalid cache
    files automatically fall back to rebuilding from logs.json.
  • Preserves lazy hydration for detailed module/plugin data by caching line offsets
    and string-ref indexes, so details can still be loaded on demand without keeping full
    event payloads in memory.
  • Adds a summary-only loading path for session overview RPCs and a package-summary
    cache path for package views, reducing repeated work on large sessions.

Impact

Large Rolldown sessions should use significantly less memory, avoid retaining huge transform/source payloads by
default, and render large lists, trees, and graphs more smoothly.

The new log cache also improves repeat visits to large build sessions: once a session has been indexed, DevTools can restore summaries and hydration indexes from disk instead of scanning the full log again.

Real-world validation

As a real-world validation, I tested this with LobeHub. Before this optimization, opening DevTools for the LobeHub preview would hit an out-of-memory issue while loading. With this PR, the same preview now loads successfully and usable. See:

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@vitejs/devtools@343

npm i https://pkg.pr.new/@vitejs/devtools-kit@343

npm i https://pkg.pr.new/@vitejs/devtools-rolldown@343

npm i https://pkg.pr.new/@vitejs/devtools-self-inspect@343

commit: 2d53611

[Copilot]

Pull request overview

This PR refactors the Rolldown DevTools to reduce memory usage and improve rendering performance for large build sessions. The core change moves from holding all parsed events in memory to indexing log line offsets and lazily hydrating large content (transforms, loads, string refs, assets) on demand. The UI is migrated to virtualized lists/trees and viewport-culled graph rendering for better large-data responsiveness.

Changes:

• Replace eager event retention with offset-indexed lazy hydration in events-reader.ts/events-manager.ts, including bounded module-metrics caching, an LRU-style readers cache, and dedicated loadAssetSession/loadPackageSession paths; remove raw-events RPCs and page.
• Extend DataVirtualList with fixed/window scrollers and add a reusable DisplayVirtualTree; migrate modules/assets trees and chunks/plugins/packages/assets lists to virtualized rendering.
• Optimize chunk/module graph rendering with viewport-based node culling, default collapsing of deep/wide branches, and avoidance of scrollWidth/scrollHeight reads; tighten package manifest computation with caching/indexes; misc fixes (session selector empty inputs, RPC trust gating, Teleport-based side nav).

Reviewed changes

Copilot reviewed 44 out of 44 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
packages/ui/src/components/PanelSideNav.vue	Wraps side nav in Teleport to body and reserves layout slot
packages/ui/src/components/DataVirtualList.vue	Adds fixed/window scroller modes alongside dynamic
packages/rolldown/src/node/utils/json-parse-stream.ts	Streaming parser no longer accumulates results; processor is awaited
packages/rolldown/src/node/utils/format.ts	Use Buffer.byteLength for content size
packages/rolldown/src/node/rpc/index.ts	Drops raw-events RPC registrations
packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-summary.ts	Use loadAssetSession
packages/rolldown/src/node/rpc/functions/rolldown-get-raw-events.ts	Removed
packages/rolldown/src/node/rpc/functions/rolldown-get-packages.ts	Cached manifest reader, indexed importer lookup, simpler aggregation
packages/rolldown/src/node/rpc/functions/rolldown-get-package-details.ts	Use loadPackageSession
packages/rolldown/src/node/rpc/functions/rolldown-get-module-transforms.ts	Read transforms via lazy readModuleBuildMetrics
packages/rolldown/src/node/rpc/functions/rolldown-get-module-raw-events.ts	Removed
packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts	Hydrate loads/resolve_ids lazily; use loadAssetSession
packages/rolldown/src/node/rpc/functions/rolldown-get-chunks-graph.ts	Use loadAssetSession
packages/rolldown/src/node/rpc/functions/rolldown-get-chunk-info.ts	Use loadAssetSession
packages/rolldown/src/node/rpc/functions/rolldown-get-assets-list.ts	Use loadAssetSession
packages/rolldown/src/node/rpc/functions/rolldown-get-asset-details.ts	Use loadAssetSession
packages/rolldown/src/node/rolldown/logs-manager.ts	Adds asset/package session loaders; uses reader.meta
packages/rolldown/src/node/rolldown/events-reader.ts	New line-by-line reader with offset indexing and lazy hydration
packages/rolldown/src/node/rolldown/events-manager.ts	Drops raw event array; tracks counts/last event, content hashes/refs
packages/rolldown/src/node/rolldown/tests/events-reader.test.ts	Updated to new event-count API
packages/rolldown/src/app/pages/session/[session]/raw.vue	Removed
packages/rolldown/src/app/pages/session/[session]/plugins.vue	Use window scroller
packages/rolldown/src/app/pages/session/[session]/packages.vue	Layout adjustments for virtualized table
packages/rolldown/src/app/pages/session/[session]/graph/index.vue	Pass window scroller to module lists
packages/rolldown/src/app/pages/session/[session]/chunks.vue	Virtualize detailed chunk list
packages/rolldown/src/app/composables/rpc.ts	Gate connect on ensureTrusted; defer connected flag
packages/rolldown/src/app/composables/module-graph.ts	Adds getModuleGraphSize, depth on graph nodes
packages/rolldown/src/app/components/plugins/FlatList.vue	Forward virtual list options
packages/rolldown/src/app/components/panel/SessionSelector.vue	Handle sessions with no inputs; precompute item refs
packages/rolldown/src/app/components/packages/Table.vue	Convert to single virtualized table with sticky header
packages/rolldown/src/app/components/modules/Graph.vue	Default-collapse deep/wide branches; compute size from nodes
packages/rolldown/src/app/components/modules/Folder.vue	Use new DisplayVirtualTree
packages/rolldown/src/app/components/modules/FlatList.vue	Forward virtual list options
packages/rolldown/src/app/components/modules/DetailedList.vue	WeakMap-cached transform filtering; virtual list options
packages/rolldown/src/app/components/display/VirtualTree.vue	New virtualized tree component
packages/rolldown/src/app/components/display/ModuleGraph.vue	Viewport culling for graph nodes
packages/rolldown/src/app/components/data/RawEventsTable.vue	Removed
packages/rolldown/src/app/components/data/PluginDetailsTable.vue	Single-pass filtering; fixed-size virtualized rows
packages/rolldown/src/app/components/data/ChunkDetails.vue	Cached modules/chunks indexes for importer lookup
packages/rolldown/src/app/components/chunks/Graph.vue	Default-collapse; size from nodes; deduped link building
packages/rolldown/src/app/components/chunks/FlatList.vue	Forward virtual list options
packages/rolldown/src/app/components/assets/ListItem.vue	Single-line fixed-height layout
packages/rolldown/src/app/components/assets/List.vue	Window-scroller defaults
packages/rolldown/src/app/components/assets/Folder.vue	Use new DisplayVirtualTree

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.