From 91073d2727a9cc35ec38fa338fa45e3ccd96be14 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Fri, 8 May 2026 23:13:01 +0800
Subject: [PATCH 1/3] perf(rolldown): reduce memory use for large sessions

---
 .../app/components/data/RawEventsTable.vue    |  87 -------
 .../app/components/panel/SessionSelector.vue  |  24 +-
 .../src/app/pages/session/[session]/raw.vue   |  41 ---
 .../rolldown/__tests__/events-reader.test.ts  |   2 +-
 .../src/node/rolldown/events-manager.ts       | 184 ++++++++++---
 .../src/node/rolldown/events-reader.ts        | 244 +++++++++++++++++-
 .../src/node/rolldown/logs-manager.ts         |   4 +-
 .../rpc/functions/rolldown-get-module-info.ts |   8 +-
 .../rolldown-get-module-raw-events.ts         |  20 --
 .../rolldown-get-module-transforms.ts         |   6 +-
 .../rpc/functions/rolldown-get-raw-events.ts  |  17 --
 packages/rolldown/src/node/rpc/index.ts       |   4 -
 packages/rolldown/src/node/utils/format.ts    |   4 +-
 .../src/node/utils/json-parse-stream.ts       |  13 +-
 14 files changed, 424 insertions(+), 234 deletions(-)
 delete mode 100644 packages/rolldown/src/app/components/data/RawEventsTable.vue
 delete mode 100644 packages/rolldown/src/app/pages/session/[session]/raw.vue
 delete mode 100644 packages/rolldown/src/node/rpc/functions/rolldown-get-module-raw-events.ts
 delete mode 100644 packages/rolldown/src/node/rpc/functions/rolldown-get-raw-events.ts

diff --git a/packages/rolldown/src/app/components/data/RawEventsTable.vue b/packages/rolldown/src/app/components/data/RawEventsTable.vue
deleted file mode 100644
index 4f59380d..00000000
--- a/packages/rolldown/src/app/components/data/RawEventsTable.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import type { RolldownEvent } from '~~/node/rolldown/events-manager'
-import type { SessionContext } from '~~/shared/types'
-import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
-import DisplayTimestamp from '@vitejs/devtools-ui/components/DisplayTimestamp.vue'
-import { Dropdown as VDropdown } from 'floating-vue'
-
-type FIELDS = 'module_id' | 'action' | 'content' | 'timestamp' | 'event_id' | 'plugin_name' | '*'
-
-const props = withDefaults(
-  defineProps<{
-    events: RolldownEvent[]
-    fields?: FIELDS[]
-    session: SessionContext
-  }>(),
-  {
-    fields: () => [
-      'event_id',
-      'action',
-      'module_id',
-      'plugin_name',
-      'timestamp',
-      'content',
-      '*',
-    ],
-  },
-)
-
-function omit(obj: RolldownEvent, inputs: string[]) {
-  const fields = new Set(inputs)
-  if (fields.has('content')) {
-    fields.add('content')
-  }
-  if (fields.has('plugin_name')) {
-    fields.add('plugin_index')
-  }
-  return Object.fromEntries(
-    Object.entries(obj).filter(([key]) => !fields.has(key)),
-  )
-}
-
-function getContent(event: RolldownEvent) {
-  if (event.action === 'HookLoadCallEnd' || event.action === 'HookTransformCallStart' || event.action === 'HookTransformCallEnd') {
-    return event.content
-  }
-  return null
-}
-</script>
-
-<template>
-  <div v-if="!events.length">
-    <div p5 italic>
-      No events found
-    </div>
-  </div>
-  <table>
-    <tbody>
-      <tr v-for="event of props.events" :key="event.event_id">
-        <template v-for="field of props.fields" :key="field">
-          <td px2>
-            <DisplayModuleId
-              v-if="field === 'module_id'"
-              :id="'module_id' in event ? event.module_id : ''"
-              :session="session"
-            />
-            <DisplayBadge v-else-if="field === 'action'" :text="event.action" />
-            <div v-else-if="field === 'plugin_name' && 'plugin_name' in event">
-              <DisplayPluginName font-mono :name="event.plugin_name" />
-              <code op50>#{{ event.plugin_id }}</code>
-            </div>
-            <div v-else-if="field === 'event_id'">
-              {{ event.event_id }}
-            </div>
-            <VDropdown v-else-if="field === 'content' && getContent(event)">
-              <div i-ph-code />
-              <template #popper>
-                <pre p1 text-sm v-text="getContent(event)" />
-              </template>
-            </VDropdown>
-            <DisplayTimestamp v-else-if="field === 'timestamp' && 'timestamp' in event" text-sm :timestamp="event.timestamp" />
-            <pre v-else-if="field === '*'" text-sm v-text="omit(event, fields)" />
-          </td>
-        </template>
-      </tr>
-    </tbody>
-  </table>
-</template>
diff --git a/packages/rolldown/src/app/components/panel/SessionSelector.vue b/packages/rolldown/src/app/components/panel/SessionSelector.vue
index 2bd21568..e210ffa8 100644
--- a/packages/rolldown/src/app/components/panel/SessionSelector.vue
+++ b/packages/rolldown/src/app/components/panel/SessionSelector.vue
@@ -17,7 +17,8 @@ const emit = defineEmits<{
 }>()
 
 function parseEntryPath(session: BuildInfo) {
-  return parseReadablePath(session.meta.inputs[0]?.filename ?? '', session.meta.cwd).path
+  const input = session.meta.inputs?.[0]
+  return input ? parseReadablePath(input.filename, session.meta.cwd).path : ''
 }
 
 const selectedSessionEntry = computed(() => {
@@ -25,6 +26,15 @@ const selectedSessionEntry = computed(() => {
   return session ? parseEntryPath(session) : ''
 })
 
+const sessionItems = computed(() => props.sessions.map((session) => {
+  const inputs = session.meta.inputs ?? []
+  return {
+    session,
+    primaryInput: inputs[0],
+    additionalInputCount: Math.max(inputs.length - 1, 0),
+  }
+}))
+
 function checkIsDifferentEntry(session: BuildInfo) {
   return selectedSessionEntry.value && selectedSessionEntry.value !== parseEntryPath(session)
 }
@@ -38,7 +48,7 @@ function select(session: BuildInfo) {
 
 <template>
   <div flex="~ col gap-2">
-    <div v-for="session of sessions" :key="session.id" flex="~ row gap-2" relative>
+    <div v-for="{ session, primaryInput, additionalInputCount } of sessionItems" :key="session.id" flex="~ row gap-2" relative>
       <component
         :is="sessionMode === 'list' ? NuxtLink : 'button'"
         :to="`/session/${session.id}`"
@@ -58,11 +68,11 @@ function select(session: BuildInfo) {
         <div font-mono font-sm>
           {{ session.meta.cwd }}
         </div>
-        <div v-if="session.meta.inputs[0]" flex="~ gap-1 items-center">
-          <DisplayModuleId :id="session.meta.inputs[0].filename" :cwd="session.meta.cwd" />
-          <DisplayBadge :text="session.meta.inputs[0].name || 'entry'" />
-          <span v-if="session.meta.inputs.length > 1" op50 text-xs border="~ base rounded-md" px1 font-mono>
-            +{{ session.meta.inputs.length - 1 }}
+        <div v-if="primaryInput" flex="~ gap-1 items-center">
+          <DisplayModuleId :id="primaryInput.filename" :cwd="session.meta.cwd" />
+          <DisplayBadge :text="primaryInput.name || 'entry'" />
+          <span v-if="additionalInputCount > 0" op50 text-xs border="~ base rounded-md" px1 font-mono>
+            +{{ additionalInputCount }}
           </span>
         </div>
         <DisplayTimestamp :timestamp="session.timestamp" pt2 text-sm op50 />
diff --git a/packages/rolldown/src/app/pages/session/[session]/raw.vue b/packages/rolldown/src/app/pages/session/[session]/raw.vue
deleted file mode 100644
index 58b428b4..00000000
--- a/packages/rolldown/src/app/pages/session/[session]/raw.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { SessionContext } from '~~/shared/types'
-import { useRoute } from '#app/composables/router'
-import { useRpc } from '#imports'
-import { useAsyncState } from '@vueuse/core'
-
-const props = defineProps<{
-  session: SessionContext
-}>()
-const rpc = useRpc()
-const query = useRoute().query
-
-const events = useAsyncState(
-  async () => {
-    return await rpc.value.call(
-      'vite:rolldown:get-module-raw-events',
-      {
-        session: props.session.id,
-        module: query.module as string,
-      },
-    )
-  },
-  {
-    events: [],
-  },
-)
-</script>
-
-<template>
-  <VisualLoading v-if="events.isLoading" />
-  <div>
-    <DataRawEventsTable
-      v-if="events.isReady"
-      :events="events.state.value.events"
-      :session="session"
-    />
-    <div v-else>
-      <VisualLoading />
-    </div>
-  </div>
-</template>
diff --git a/packages/rolldown/src/node/rolldown/__tests__/events-reader.test.ts b/packages/rolldown/src/node/rolldown/__tests__/events-reader.test.ts
index d1d70b0b..c46ff185 100644
--- a/packages/rolldown/src/node/rolldown/__tests__/events-reader.test.ts
+++ b/packages/rolldown/src/node/rolldown/__tests__/events-reader.test.ts
@@ -28,7 +28,7 @@ describe('rolldown events reader', () => {
       resolveRead()
       await Promise.all(reads)
 
-      expect(reader.manager.events).toHaveLength(1)
+      expect(reader.manager.eventCount).toBe(1)
 
       await reader.read()
       expect(readChanges).toHaveBeenCalledTimes(2)
diff --git a/packages/rolldown/src/node/rolldown/events-manager.ts b/packages/rolldown/src/node/rolldown/events-manager.ts
index 0359d590..e11cc225 100644
--- a/packages/rolldown/src/node/rolldown/events-manager.ts
+++ b/packages/rolldown/src/node/rolldown/events-manager.ts
@@ -1,5 +1,6 @@
 import type { Event, HookLoadCallEnd, HookLoadCallStart, HookResolveIdCallEnd, HookResolveIdCallStart, HookTransformCallEnd, HookTransformCallStart, Module as ModuleInfo } from '@rolldown/debug'
 import type { ModuleBuildMetrics, PluginBuildMetrics, RolldownAssetInfo, RolldownChunkInfo } from '../../shared/types'
+import { createHash } from 'node:crypto'
 import { guessChunkName } from '../../shared/utils/guess-chunk-name'
 import { getInitialChunkIds } from '../utils/chunk'
 import { getContentByteSize } from '../utils/format'
@@ -13,36 +14,133 @@ type ModuleBuildHookEvents = (Exclude<Event, 'StringRef'> & (HookResolveIdCallSt
 const MODULE_BUILD_START_HOOKS = ['HookResolveIdCallStart', 'HookLoadCallStart', 'HookTransformCallStart']
 const MODULE_BUILD_END_HOOKS = ['HookResolveIdCallEnd', 'HookLoadCallEnd', 'HookTransformCallEnd']
 
+interface ContentInfo {
+  byteSize: number
+  hash: string
+}
+
+type PendingModuleBuildHookEvent
+  = | {
+    action: 'HookResolveIdCallStart'
+    timestamp: string
+    importer: HookResolveIdCallStart['importer']
+    module_request: HookResolveIdCallStart['module_request']
+    import_kind: HookResolveIdCallStart['import_kind']
+  }
+  | {
+    action: 'HookLoadCallStart'
+    timestamp: string
+  }
+  | {
+    action: 'HookTransformCallStart'
+    timestamp: string
+    contentInfo: ContentInfo
+  }
+
+function getContentHash(content: string) {
+  return createHash('sha1').update(content).digest('hex')
+}
+
+function getContentInfo(content: string | null | undefined): ContentInfo {
+  if (!content) {
+    return {
+      byteSize: 0,
+      hash: '',
+    }
+  }
+  return {
+    byteSize: getContentByteSize(content),
+    hash: getContentHash(content),
+  }
+}
+
+export function getContentRef(content: unknown) {
+  return typeof content === 'string' && content.startsWith('$ref:')
+    ? content.slice(5)
+    : undefined
+}
+
+export function getEventId(event: Event, index: number) {
+  return `${'timestamp' in event ? event.timestamp : 'x'}#${index}`
+}
+
+function getLastEventSnapshot(event: RolldownEvent): RolldownEvent {
+  if (!('action' in event)) {
+    return event
+  }
+
+  const snapshot: Record<string, unknown> = {
+    action: event.action,
+    event_id: event.event_id,
+  }
+
+  if ('timestamp' in event) {
+    snapshot.timestamp = event.timestamp
+  }
+  if ('session_id' in event) {
+    snapshot.session_id = event.session_id
+  }
+
+  return snapshot as RolldownEvent
+}
+
 export class RolldownEventsManager {
-  events: RolldownEvent[] = []
+  eventCount = 0
+  lastEvent: RolldownEvent | undefined
   chunks: Map<number, RolldownChunkInfo> = new Map()
   assets: Map<string, RolldownAssetInfo> = new Map()
   chunkAssetMap = new Map<number, RolldownAssetInfo>()
   modules: Map<string, ModuleInfo & { build_metrics?: ModuleBuildMetrics }> = new Map()
-  source_refs: Map<string, string> = new Map()
-  module_build_hook_events: Map<string, ModuleBuildHookEvents> = new Map()
+  source_refs: Map<string, ContentInfo> = new Map()
+  module_build_hook_events: Map<string, PendingModuleBuildHookEvent> = new Map()
   module_build_metrics: Map<string, ModuleBuildMetrics> = new Map()
   plugin_build_metrics: Map<number, PluginBuildMetrics> = new Map()
   build_start_time: number = 0
   build_end_time: number = 0
 
-  interpretSourceRefs(event: Event, key: 'content') {
-    if (key in event && typeof event[key as keyof Event] === 'string') {
-      if (event[key as keyof Event].startsWith('$ref:')) {
-        const refKey = event[key as keyof Event].slice(5)
-        if (this.source_refs.has(refKey)) {
-          event[key] = this.source_refs.get(refKey)!
-        }
-      }
+  getEventContentInfo(event: any, key: 'content') {
+    if (!(key in event)) {
+      return getContentInfo(undefined)
     }
+
+    const content = event[key]
+    const refKey = getContentRef(content)
+    if (refKey) {
+      return this.source_refs.get(refKey) ?? getContentInfo(undefined)
+    }
+    return typeof content === 'string'
+      ? getContentInfo(content)
+      : getContentInfo(undefined)
   }
 
   recordBuildMetrics(event: ModuleBuildHookEvents) {
     if (MODULE_BUILD_START_HOOKS.includes(event.action)) {
-      this.module_build_hook_events.set(event.call_id, event)
+      if (event.action === 'HookResolveIdCallStart') {
+        this.module_build_hook_events.set(event.call_id, {
+          action: event.action,
+          timestamp: event.timestamp,
+          importer: event.importer,
+          module_request: event.module_request,
+          import_kind: event.import_kind,
+        })
+      }
+      else if (event.action === 'HookLoadCallStart') {
+        this.module_build_hook_events.set(event.call_id, {
+          action: event.action,
+          timestamp: event.timestamp,
+        })
+      }
+      else if (event.action === 'HookTransformCallStart') {
+        this.module_build_hook_events.set(event.call_id, {
+          action: event.action,
+          timestamp: event.timestamp,
+          contentInfo: this.getEventContentInfo(event, 'content'),
+        })
+      }
     }
     else if (MODULE_BUILD_END_HOOKS.includes(event.action)) {
       const start = this.module_build_hook_events.get(event.call_id)
+      this.module_build_hook_events.delete(event.call_id)
       const module_id = event.action === 'HookResolveIdCallEnd' ? event.resolved_id! : (event as HookLoadCallEnd | HookTransformCallEnd).module_id
       if (start) {
         const pluginId = event.plugin_id
@@ -61,25 +159,31 @@ export class RolldownEventsManager {
           calls: [],
         }
         if (event.action === 'HookResolveIdCallEnd') {
+          if (start.action !== 'HookResolveIdCallStart')
+            return
+
           module_build_metrics.resolve_ids.push({
             ...info,
             type: 'resolve',
-            importer: (start as HookResolveIdCallStart).importer,
-            module_request: (start as HookResolveIdCallStart).module_request,
-            import_kind: (start as HookResolveIdCallStart).import_kind,
+            importer: start.importer,
+            module_request: start.module_request,
+            import_kind: start.import_kind,
             resolved_id: event.resolved_id,
           })
           plugin_build_metrics.calls.push({
             ...info,
             type: 'resolve',
-            module: (start as HookResolveIdCallStart).module_request,
+            module: start.module_request,
           })
         }
         else if (event.action === 'HookLoadCallEnd') {
+          if (start.action !== 'HookLoadCallStart')
+            return
+
           module_build_metrics.loads.push({
             ...info,
             type: 'load',
-            content: event.content,
+            content: null,
           })
           plugin_build_metrics.calls.push({
             ...info,
@@ -89,22 +193,25 @@ export class RolldownEventsManager {
           })
         }
         else if (event.action === 'HookTransformCallEnd') {
-          const _start = start as HookTransformCallStart
-          const _end = event as HookTransformCallEnd
+          if (start.action !== 'HookTransformCallStart')
+            return
+
+          const sourceContentInfo = start.contentInfo
+          const transformedContentInfo = this.getEventContentInfo(event, 'content')
 
           module_build_metrics.transforms.push({
             ...info,
             type: 'transform',
-            content_from: _start.content,
-            content_to: _end.content,
-            source_code_size: getContentByteSize(_start.content!),
-            transformed_code_size: getContentByteSize(_end.content!),
+            content_from: null,
+            content_to: null,
+            source_code_size: sourceContentInfo.byteSize,
+            transformed_code_size: transformedContentInfo.byteSize,
           })
           plugin_build_metrics.calls.push({
             ...info,
             type: 'transform',
             module: event.module_id,
-            unchanged: _start.content === _end.content,
+            unchanged: sourceContentInfo.hash === transformedContentInfo.hash,
           })
         }
         this.plugin_build_metrics.set(pluginId, plugin_build_metrics)
@@ -114,11 +221,10 @@ export class RolldownEventsManager {
   }
 
   handleEvent(raw: Event) {
-    const event = {
-      ...raw,
-      event_id: `${'timestamp' in raw ? raw.timestamp : 'x'}#${this.events.length}`,
-    }
-    this.events.push(event)
+    const event = raw as RolldownEvent
+    event.event_id = getEventId(raw, this.eventCount)
+    this.eventCount += 1
+    this.lastEvent = getLastEventSnapshot(event)
 
     if (event.action === 'BuildStart') {
       this.build_start_time = +event.timestamp
@@ -126,10 +232,13 @@ export class RolldownEventsManager {
 
     if (event.action === 'BuildEnd') {
       this.build_end_time = +event.timestamp
+      if (!this.module_build_hook_events.size) {
+        this.source_refs.clear()
+      }
     }
 
     if (event.action === 'StringRef') {
-      this.source_refs.set(event.id, event.content)
+      this.source_refs.set(event.id, getContentInfo(event.content))
       return
     }
 
@@ -141,7 +250,6 @@ export class RolldownEventsManager {
       return
     }
 
-    this.interpretSourceRefs(event, 'content')
     this.recordBuildMetrics(event as ModuleBuildHookEvents)
 
     if ('module_id' in event) {
@@ -162,6 +270,7 @@ export class RolldownEventsManager {
 
     if (event.action === 'ModuleGraphReady') {
       this.module_build_hook_events.clear()
+      this.source_refs.clear()
       for (const module of event.modules) {
         this.modules.set(module.id, {
           ...module,
@@ -183,7 +292,18 @@ export class RolldownEventsManager {
   }
 
   dispose() {
-    this.events = []
+    this.eventCount = 0
+    this.lastEvent = undefined
+    this.chunks.clear()
+    this.assets.clear()
+    this.chunkAssetMap.clear()
+    this.modules.clear()
+    this.source_refs.clear()
+    this.module_build_hook_events.clear()
+    this.module_build_metrics.clear()
+    this.plugin_build_metrics.clear()
+    this.build_start_time = 0
+    this.build_end_time = 0
   }
 
   [Symbol.dispose]() {
diff --git a/packages/rolldown/src/node/rolldown/events-reader.ts b/packages/rolldown/src/node/rolldown/events-reader.ts
index 5de50f67..4434f787 100644
--- a/packages/rolldown/src/node/rolldown/events-reader.ts
+++ b/packages/rolldown/src/node/rolldown/events-reader.ts
@@ -1,9 +1,76 @@
 import type { Event, SessionMeta } from '@rolldown/debug'
+import type { ModuleBuildMetrics, RolldownModuleLoadInfo, RolldownModuleTransformInfo, RolldownResolveInfo } from '../../shared/types'
 import fs from 'node:fs'
-import { parseJsonStreamWithConcatArrays } from '../utils/json-parse-stream'
-import { RolldownEventsManager } from './events-manager'
+import { getContentByteSize } from '../utils/format'
+import { parseJsonStream } from '../utils/json-parse-stream'
+import { getContentRef, getEventId, RolldownEventsManager } from './events-manager'
 
 const readers: Map<string, RolldownEventsReader> = new Map()
+const MAX_READERS = 32
+
+interface DeferredContent {
+  value: string | null
+  ref: string | null
+}
+
+interface PendingResolveStart {
+  timestamp: string
+  importer: string | null
+  module_request: string
+  import_kind: RolldownResolveInfo['import_kind']
+}
+
+interface PendingLoadStart {
+  timestamp: string
+}
+
+interface PendingTransformStart {
+  timestamp: string
+  content: DeferredContent
+}
+
+function getDeferredContent(event: any, refs: Set<string>): DeferredContent {
+  if (!('content' in event) || typeof event.content !== 'string') {
+    return {
+      value: null,
+      ref: null,
+    }
+  }
+
+  const ref = getContentRef(event.content)
+  if (ref) {
+    refs.add(ref)
+    return {
+      value: null,
+      ref,
+    }
+  }
+
+  return {
+    value: event.content,
+    ref: null,
+  }
+}
+
+function resolveDeferredContent(content: DeferredContent, refs: Map<string, string>) {
+  if (content.ref) {
+    return refs.get(content.ref) ?? `$ref:${content.ref}`
+  }
+  return content.value
+}
+
+function pruneReaders() {
+  if (readers.size <= MAX_READERS)
+    return
+
+  for (const reader of Array.from(readers.values())) {
+    if (readers.size <= MAX_READERS)
+      return
+    if (!reader.hasPendingRead()) {
+      reader.dispose()
+    }
+  }
+}
 
 export class RolldownEventsReader {
   lastBytes: number = 0
@@ -19,10 +86,14 @@ export class RolldownEventsReader {
 
   static get(filepath: string) {
     if (readers.has(filepath)) {
-      return readers.get(filepath)!
+      const reader = readers.get(filepath)!
+      readers.delete(filepath)
+      readers.set(filepath, reader)
+      return reader
     }
     const reader = new RolldownEventsReader(filepath)
     readers.set(filepath, reader)
+    pruneReaders()
     return reader
   }
 
@@ -45,17 +116,180 @@ export class RolldownEventsReader {
     const stream = fs.createReadStream(this.filepath, {
       start: this.lastBytes,
     })
-    await parseJsonStreamWithConcatArrays<Event>(
+    await parseJsonStream<Event>(
       stream,
       (event) => {
+        if (event.action === 'SessionMeta') {
+          this.meta = event as SessionMeta
+        }
         this.manager.handleEvent(event)
-        return event
       },
     )
     this.lastTimestamp = mtime.getTime()
     this.lastBytes = size
   }
 
+  private async scanEvents(processor: (event: Event, eventIndex: number) => void | Promise<void>) {
+    let eventIndex = 0
+    await parseJsonStream<Event>(
+      fs.createReadStream(this.filepath),
+      async (event) => {
+        await processor(event, eventIndex)
+        eventIndex += 1
+      },
+    )
+  }
+
+  private async readStringRefs(refs: Set<string>) {
+    const values = new Map<string, string>()
+    if (!refs.size)
+      return values
+
+    await this.scanEvents((event) => {
+      if (event.action !== 'StringRef' || !refs.has(event.id))
+        return
+
+      values.set(event.id, event.content)
+    })
+
+    return values
+  }
+
+  async readModuleBuildMetrics(module: string): Promise<ModuleBuildMetrics> {
+    const resolveStarts = new Map<string, PendingResolveStart>()
+    const loadStarts = new Map<string, PendingLoadStart>()
+    const transformStarts = new Map<string, PendingTransformStart>()
+    const refs = new Set<string>()
+    const resolve_ids: RolldownResolveInfo[] = []
+    const loads: Array<Omit<RolldownModuleLoadInfo, 'content'> & { content: DeferredContent }> = []
+    const transforms: Array<Omit<RolldownModuleTransformInfo, 'content_from' | 'content_to' | 'diff_added' | 'diff_removed'> & {
+      content_from: DeferredContent
+      content_to: DeferredContent
+      source_code_size: number
+      transformed_code_size: number
+    }> = []
+
+    await this.scanEvents((raw, eventIndex) => {
+      const event = raw as any
+      const eventId = getEventId(raw, eventIndex)
+
+      if (event.action === 'HookResolveIdCallStart') {
+        resolveStarts.set(event.call_id, {
+          timestamp: event.timestamp,
+          importer: event.importer,
+          module_request: event.module_request,
+          import_kind: event.import_kind,
+        })
+        return
+      }
+      if (event.action === 'HookLoadCallStart') {
+        if (event.module_id === module) {
+          loadStarts.set(event.call_id, {
+            timestamp: event.timestamp,
+          })
+        }
+        return
+      }
+      if (event.action === 'HookTransformCallStart') {
+        if (event.module_id === module) {
+          transformStarts.set(event.call_id, {
+            timestamp: event.timestamp,
+            content: getDeferredContent(event, refs),
+          })
+        }
+        return
+      }
+
+      if (event.action === 'HookResolveIdCallEnd') {
+        const start = resolveStarts.get(event.call_id)
+        resolveStarts.delete(event.call_id)
+        if (!start || event.resolved_id !== module)
+          return
+
+        resolve_ids.push({
+          id: eventId,
+          type: 'resolve',
+          timestamp_start: +start.timestamp,
+          timestamp_end: +event.timestamp,
+          duration: +event.timestamp - +start.timestamp,
+          plugin_id: event.plugin_id,
+          plugin_name: event.plugin_name,
+          importer: start.importer,
+          module_request: start.module_request,
+          import_kind: start.import_kind,
+          resolved_id: event.resolved_id,
+        })
+      }
+
+      if (event.action === 'HookLoadCallEnd') {
+        const start = loadStarts.get(event.call_id)
+        loadStarts.delete(event.call_id)
+        if (!start || event.module_id !== module)
+          return
+
+        loads.push({
+          id: eventId,
+          type: 'load',
+          timestamp_start: +start.timestamp,
+          timestamp_end: +event.timestamp,
+          duration: +event.timestamp - +start.timestamp,
+          plugin_id: event.plugin_id,
+          plugin_name: event.plugin_name,
+          content: getDeferredContent(event, refs),
+        })
+      }
+
+      if (event.action === 'HookTransformCallEnd') {
+        const start = transformStarts.get(event.call_id)
+        transformStarts.delete(event.call_id)
+        if (!start || event.module_id !== module)
+          return
+
+        const content_from = start.content
+        const content_to = getDeferredContent(event, refs)
+
+        transforms.push({
+          id: eventId,
+          type: 'transform',
+          timestamp_start: +start.timestamp,
+          timestamp_end: +event.timestamp,
+          duration: +event.timestamp - +start.timestamp,
+          plugin_id: event.plugin_id,
+          plugin_name: event.plugin_name,
+          content_from,
+          content_to,
+          source_code_size: 0,
+          transformed_code_size: 0,
+        })
+      }
+    })
+
+    const refValues = await this.readStringRefs(refs)
+
+    return {
+      resolve_ids,
+      loads: loads.map(load => ({
+        ...load,
+        content: resolveDeferredContent(load.content, refValues),
+      })),
+      transforms: transforms.map((transform) => {
+        const content_from = resolveDeferredContent(transform.content_from, refValues)
+        const content_to = resolveDeferredContent(transform.content_to, refValues)
+        return {
+          ...transform,
+          content_from,
+          content_to,
+          source_code_size: getContentByteSize(content_from ?? ''),
+          transformed_code_size: getContentByteSize(content_to ?? ''),
+        }
+      }),
+    }
+  }
+
+  hasPendingRead() {
+    return !!this.pendingRead
+  }
+
   dispose() {
     readers.delete(this.filepath)
     this.manager.dispose()
diff --git a/packages/rolldown/src/node/rolldown/logs-manager.ts b/packages/rolldown/src/node/rolldown/logs-manager.ts
index eb98dbe4..74ff80c0 100644
--- a/packages/rolldown/src/node/rolldown/logs-manager.ts
+++ b/packages/rolldown/src/node/rolldown/logs-manager.ts
@@ -29,7 +29,7 @@ export class RolldownLogsManager {
       .map(async (d): Promise<BuildInfo> => {
         const reader = RolldownEventsReader.get(join(this.dir, d.name, 'meta.json'))
         await reader.read()
-        const meta = reader.manager.events.at(-1) as SessionMeta
+        const meta = reader.meta!
         return {
           id: d.name,
           // @ts-expect-error missing type
@@ -46,7 +46,7 @@ export class RolldownLogsManager {
     if (!reader.meta) {
       const metaReader = RolldownEventsReader.get(join(this.dir, session, 'meta.json'))
       await metaReader.read()
-      reader.meta = metaReader.manager.events.at(-1) as SessionMeta
+      reader.meta = metaReader.meta!
     }
     return reader
   }
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts
index c0acd48b..f04cd175 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts
@@ -12,12 +12,12 @@ export const rolldownGetModuleInfo = defineRpcFunction({
     return {
       handler: async ({ session, module }: { session: string, module: string }) => {
         const reader = await manager.loadSession(session)
-        const events = reader.manager.events
 
-        if (!events.length)
+        if (!reader.manager.eventCount)
           return null
 
         const moduleInfo = reader.manager.modules.get(module)
+        const moduleMetrics = await reader.readModuleBuildMetrics(module)
 
         const info: Omit<ModuleInfo, 'transforms'> = {
           id: module,
@@ -31,8 +31,8 @@ export const rolldownGetModuleInfo = defineRpcFunction({
             transforms: [],
           },
           ...moduleInfo || {},
-          loads: moduleInfo?.build_metrics?.loads ?? [],
-          resolve_ids: moduleInfo?.build_metrics?.resolve_ids ?? [],
+          loads: moduleMetrics.loads,
+          resolve_ids: moduleMetrics.resolve_ids,
         }
 
         info.chunks = Array.from(reader.manager.chunks.values())
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-module-raw-events.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-module-raw-events.ts
deleted file mode 100644
index 85ab5984..00000000
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-module-raw-events.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { defineRpcFunction } from '@vitejs/devtools-kit'
-import { getLogsManager } from '../utils'
-
-export const rolldownGetModuleRawEvents = defineRpcFunction({
-  name: 'vite:rolldown:get-module-raw-events',
-  type: 'query',
-  jsonSerializable: true,
-  setup: (context) => {
-    const manager = getLogsManager(context)
-    return {
-      handler: async ({ session, module }: { session: string, module: string }) => {
-        const reader = await manager.loadSession(session)
-        const events = reader.manager.events.filter(event => 'module_id' in event && event.module_id !== module)
-        return {
-          events,
-        }
-      },
-    }
-  },
-})
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-module-transforms.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-module-transforms.ts
index 5679b60f..0ba0c105 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-module-transforms.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-module-transforms.ts
@@ -12,11 +12,9 @@ export const rolldownGetModuleTransforms = defineRpcFunction({
     return {
       handler: async ({ session, module }: { session: string, module: string }) => {
         const reader = await manager.loadSession(session)
-        const events = reader.manager.events
-        const moduleInfo = reader.manager.modules.get(module)
-        const transforms = moduleInfo?.build_metrics?.transforms ?? []
+        const { transforms } = await reader.readModuleBuildMetrics(module)
 
-        if (!events.length) {
+        if (!reader.manager.eventCount) {
           return transforms.map<RolldownModuleTransformInfo>(transform => ({
             ...transform,
             diff_added: 0,
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-raw-events.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-raw-events.ts
deleted file mode 100644
index da58e724..00000000
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-raw-events.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { defineRpcFunction } from '@vitejs/devtools-kit'
-import { getLogsManager } from '../utils'
-
-export const rolldownGetRawEvents = defineRpcFunction({
-  name: 'vite:rolldown:get-raw-events',
-  type: 'query',
-  jsonSerializable: true,
-  setup: (context) => {
-    const manager = getLogsManager(context)
-    return {
-      handler: async ({ session }: { session: string }) => {
-        const reader = await manager.loadSession(session)
-        return reader.manager.events
-      },
-    }
-  },
-})
diff --git a/packages/rolldown/src/node/rpc/index.ts b/packages/rolldown/src/node/rpc/index.ts
index 583fa4dd..d4ed8a4e 100644
--- a/packages/rolldown/src/node/rpc/index.ts
+++ b/packages/rolldown/src/node/rpc/index.ts
@@ -4,12 +4,10 @@ import { rolldownGetAssetsList } from './functions/rolldown-get-assets-list'
 import { rolldownGetChunkInfo } from './functions/rolldown-get-chunk-info'
 import { rolldownGetChunksGraph } from './functions/rolldown-get-chunks-graph'
 import { rolldownGetModuleInfo } from './functions/rolldown-get-module-info'
-import { rolldownGetModuleRawEvents } from './functions/rolldown-get-module-raw-events'
 import { rolldownGetModuleTransforms } from './functions/rolldown-get-module-transforms'
 import { rolldownGetPackageDetails } from './functions/rolldown-get-package-details'
 import { rolldownGetPackages } from './functions/rolldown-get-packages'
 import { rolldownGetPluginDetails } from './functions/rolldown-get-plugin-details'
-import { rolldownGetRawEvents } from './functions/rolldown-get-raw-events'
 import { rolldownGetSessionCompareSummary } from './functions/rolldown-get-session-compare-summary'
 import { rolldownGetSessionSummary } from './functions/rolldown-get-session-summary'
 import { rolldownListSessions } from './functions/rolldown-list-sessions'
@@ -17,10 +15,8 @@ import '@vitejs/devtools-kit'
 
 export const rpcFunctions = [
   rolldownListSessions,
-  rolldownGetRawEvents,
   rolldownGetSessionSummary,
   rolldownGetModuleInfo,
-  rolldownGetModuleRawEvents,
   rolldownGetModuleTransforms,
   rolldownGetChunksGraph,
   rolldownGetAssetsList,
diff --git a/packages/rolldown/src/node/utils/format.ts b/packages/rolldown/src/node/utils/format.ts
index 16808ddb..da96e837 100644
--- a/packages/rolldown/src/node/utils/format.ts
+++ b/packages/rolldown/src/node/utils/format.ts
@@ -1,5 +1,7 @@
+import { Buffer } from 'node:buffer'
+
 export function getContentByteSize(content: string) {
   if (!content)
     return 0
-  return new TextEncoder().encode(content).length
+  return Buffer.byteLength(content)
 }
diff --git a/packages/rolldown/src/node/utils/json-parse-stream.ts b/packages/rolldown/src/node/utils/json-parse-stream.ts
index 5ef5fb48..66389e69 100644
--- a/packages/rolldown/src/node/utils/json-parse-stream.ts
+++ b/packages/rolldown/src/node/utils/json-parse-stream.ts
@@ -11,12 +11,10 @@ export class JsonParseStreamError extends Error {
   }
 }
 
-export async function parseJsonStreamWithConcatArrays<T, K = T>(
+export async function parseJsonStream<T>(
   stream: NodeJS.ReadableStream,
-  processor?: (value: T) => K,
-): Promise<K[]> {
-  const values: K[] = []
-
+  processor?: (value: T) => void | Promise<void>,
+): Promise<void> {
   let lineNumber = 0
 
   await pipeline(
@@ -32,8 +30,7 @@ export async function parseJsonStreamWithConcatArrays<T, K = T>(
 
         try {
           const parsed = JSON.parse(line) as T
-          const result = processor ? processor(parsed) : (parsed as unknown as K)
-          values.push(result)
+          await processor?.(parsed)
         }
         catch (e) {
           const preview = line.length > 256 ? `${line.slice(0, 256)}...` : line
@@ -42,6 +39,4 @@ export async function parseJsonStreamWithConcatArrays<T, K = T>(
       }
     },
   )
-
-  return values
 }

From dcda1510ba5d40fd2f9cab1071e60aa9994450bc Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sat, 9 May 2026 15:42:34 +0800
Subject: [PATCH 2/3] chore: update

---
 .../src/app/components/assets/List.vue        |  16 +-
 .../src/app/components/assets/ListItem.vue    |   8 +-
 .../src/app/components/chunks/FlatList.vue    |   8 +
 .../src/app/components/chunks/Graph.vue       | 123 ++-
 .../src/app/components/data/ChunkDetails.vue  |  72 +-
 .../components/data/PluginDetailsTable.vue    |  67 +-
 .../app/components/display/ModuleGraph.vue    |  70 +-
 .../app/components/modules/DetailedList.vue   |  48 +-
 .../src/app/components/modules/FlatList.vue   |   8 +
 .../src/app/components/modules/Graph.vue      |  97 ++-
 .../src/app/components/packages/Table.vue     | 186 ++--
 .../src/app/components/plugins/FlatList.vue   |  13 +-
 .../src/app/composables/module-graph.ts       |  12 +
 packages/rolldown/src/app/composables/rpc.ts  |   6 +-
 .../app/pages/session/[session]/chunks.vue    |  31 +-
 .../pages/session/[session]/graph/index.vue   |   2 +
 .../app/pages/session/[session]/packages.vue  |   4 +-
 .../app/pages/session/[session]/plugins.vue   |   2 +-
 .../src/node/rolldown/events-reader.ts        | 821 ++++++++++++++----
 .../src/node/rolldown/logs-manager.ts         |  18 +
 .../functions/rolldown-get-asset-details.ts   |   2 +-
 .../rpc/functions/rolldown-get-assets-list.ts |   2 +-
 .../rpc/functions/rolldown-get-chunk-info.ts  |   2 +-
 .../functions/rolldown-get-chunks-graph.ts    |   2 +-
 .../rpc/functions/rolldown-get-module-info.ts |   2 +-
 .../functions/rolldown-get-package-details.ts |   2 +-
 .../rpc/functions/rolldown-get-packages.ts    | 221 ++---
 .../rolldown-get-session-compare-summary.ts   |   2 +-
 .../ui/src/components/DataVirtualList.vue     |  71 +-
 packages/ui/src/components/PanelSideNav.vue   |  46 +-
 30 files changed, 1438 insertions(+), 526 deletions(-)

diff --git a/packages/rolldown/src/app/components/assets/List.vue b/packages/rolldown/src/app/components/assets/List.vue
index 17c32a08..3333e6eb 100644
--- a/packages/rolldown/src/app/components/assets/List.vue
+++ b/packages/rolldown/src/app/components/assets/List.vue
@@ -2,9 +2,16 @@
 import type { RolldownAssetInfo } from '~~/shared/types'
 import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
-defineProps<{
+withDefaults(defineProps<{
   assets: RolldownAssetInfo[]
-}>()
+  itemSize?: number
+  pageMode?: boolean
+  scroller?: 'dynamic' | 'window'
+}>(), {
+  itemSize: 40,
+  pageMode: true,
+  scroller: 'window',
+})
 </script>
 
 <template>
@@ -12,9 +19,12 @@ defineProps<{
     <DataVirtualList
       :items="assets"
       key-prop="filename"
+      :item-size="itemSize"
+      :page-mode="pageMode"
+      :scroller="scroller"
     >
       <template #default="{ item }">
-        <div flex pb2>
+        <div h-10 flex>
           <AssetsListItem :asset="item" />
         </div>
       </template>
diff --git a/packages/rolldown/src/app/components/assets/ListItem.vue b/packages/rolldown/src/app/components/assets/ListItem.vue
index 9497062a..9b32a63c 100644
--- a/packages/rolldown/src/app/components/assets/ListItem.vue
+++ b/packages/rolldown/src/app/components/assets/ListItem.vue
@@ -9,11 +9,11 @@ defineProps<{
 <template>
   <NuxtLink
     :to="{ query: { asset: asset.filename } }"
-    w-full font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
+    block h-8 w-full min-w-0 overflow-hidden font-mono border="~ rounded base" px2 py1 text-sm hover="bg-active"
   >
-    <div flex="~ gap-1">
-      <DisplayFileIcon :filename="asset.filename" />
-      <span overflow-hidden text-ellipsis break-all line-clamp-2>
+    <div h-full min-w-0 flex="~ gap-1 items-center">
+      <DisplayFileIcon :filename="asset.filename" flex-none />
+      <span min-w-0 overflow-hidden text-ellipsis whitespace-nowrap>
         {{ asset.filename }}
         <span op50>
           ({{ asset.chunk?.name?.replace(/[\[\]]/g, '') }})
diff --git a/packages/rolldown/src/app/components/chunks/FlatList.vue b/packages/rolldown/src/app/components/chunks/FlatList.vue
index e234050c..d9d97a77 100644
--- a/packages/rolldown/src/app/components/chunks/FlatList.vue
+++ b/packages/rolldown/src/app/components/chunks/FlatList.vue
@@ -8,9 +8,14 @@ withDefaults(defineProps<{
   session: SessionContext
   link?: boolean
   basic?: boolean
+  itemSize?: number
+  pageMode?: boolean
+  scroller?: 'dynamic' | 'window'
 }>(), {
   link: true,
   basic: false,
+  pageMode: true,
+  scroller: 'dynamic',
 })
 
 const emit = defineEmits<{
@@ -22,6 +27,9 @@ const emit = defineEmits<{
   <DataVirtualList
     :items="chunks"
     key-prop="chunk_id"
+    :item-size="itemSize"
+    :page-mode="pageMode"
+    :scroller="scroller"
   >
     <template #default="{ item }">
       <div flex pb2 @click="emit('select', item)">
diff --git a/packages/rolldown/src/app/components/chunks/Graph.vue b/packages/rolldown/src/app/components/chunks/Graph.vue
index d86ccda0..34c19775 100644
--- a/packages/rolldown/src/app/components/chunks/Graph.vue
+++ b/packages/rolldown/src/app/components/chunks/Graph.vue
@@ -4,8 +4,8 @@ import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/module-graph'
 import { useRoute } from '#app/composables/router'
 import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
-import { computed, nextTick, unref } from 'vue'
-import { createModuleGraph } from '~/composables/module-graph'
+import { computed, unref } from 'vue'
+import { createModuleGraph, getModuleGraphSize } from '~/composables/module-graph'
 
 type ChunkInfo = RolldownChunkInfo & {
   id: string
@@ -20,6 +20,8 @@ const props = withDefaults(defineProps<{
 
 const chunks = computed(() => props.chunks)
 const route = useRoute()
+const DEFAULT_EXPANDED_DEPTH = 3
+const DEFAULT_EXPANDED_SIBLINGS = 10
 
 createModuleGraph<ChunkInfo, ChunkImport>({
   modules: chunks,
@@ -31,7 +33,34 @@ createModuleGraph<ChunkInfo, ChunkImport>({
     gap: 150,
   },
   generateGraph: (options) => {
-    const { isFirstCalculateGraph, scale, spacing, tree, hierarchy, collapsedNodes, container, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap } = options
+    const { isFirstCalculateGraph, spacing, tree, hierarchy, collapsedNodes, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap } = options
+
+    function registerChildParent(moduleId: string, parentId: string) {
+      const existingParentId = childToParentMap.get(moduleId)
+      if (existingParentId && existingParentId !== parentId) {
+        return false
+      }
+      if (!existingParentId) {
+        childToParentMap.set(moduleId, parentId)
+      }
+      return true
+    }
+
+    function createNode(module: ChunkInfo, depth: number, chunkImport?: ChunkImport, siblingIndex = 0): ModuleGraphNode<ChunkInfo, ChunkImport> {
+      const defaultCollapsed = depth >= DEFAULT_EXPANDED_DEPTH || siblingIndex >= DEFAULT_EXPANDED_SIBLINGS
+      if (isFirstCalculateGraph.value && defaultCollapsed && module.imports.length > 0) {
+        collapsedNodes.add(module.id)
+      }
+
+      return {
+        module,
+        import: chunkImport,
+        depth,
+        expanded: !collapsedNodes.has(module.id),
+        hasChildren: false,
+      }
+    }
+
     return () => {
       width.value = window.innerWidth
       height.value = window.innerHeight
@@ -45,43 +74,30 @@ createModuleGraph<ChunkInfo, ChunkImport>({
           if (`${parent.module?.id}` === '~root') {
             entryChunks.forEach((x) => {
               seen.add(x)
-
-              if (isFirstCalculateGraph.value) {
-                childToParentMap.set(x.id, '~root')
-              }
+              registerChildParent(x.id, '~root')
             })
-            return entryChunks.map(x => ({
-              module: x,
-              expanded: !collapsedNodes.has(x.id),
-              hasChildren: false,
-            }))
+            return entryChunks.map((x, index) => createNode(x, 1, undefined, index))
           }
 
           if (collapsedNodes.has(`${parent.module?.id}`)) {
             return []
           }
 
-          const nodes = parent.module.imports
-            ?.map((x): ModuleGraphNode<ChunkInfo, ChunkImport> | undefined => {
-              const module = modulesMap.value.get(`${x.chunk_id}`)
-              if (!module || seen.has(module))
-                return undefined
-
-              if (isFirstCalculateGraph.value) {
-                childToParentMap.set(module.id, parent.module.id)
-              }
+          const depth = (parent.depth ?? 0) + 1
+          const childNodes: ModuleGraphNode<ChunkInfo, ChunkImport>[] = []
+          for (const chunkImport of parent.module.imports) {
+            const module = modulesMap.value.get(`${chunkImport.chunk_id}`)
+            if (!module || seen.has(module))
+              continue
 
-              seen.add(module)
+            if (!registerChildParent(module.id, parent.module.id))
+              continue
 
-              return {
-                module,
-                expanded: !collapsedNodes.has(module.id),
-                hasChildren: false,
-              }
-            })
-            .filter(x => x !== undefined)
+            seen.add(module)
+            childNodes.push(createNode(module, depth, chunkImport, childNodes.length))
+          }
 
-          return nodes
+          return childNodes
         },
       )
 
@@ -99,6 +115,15 @@ createModuleGraph<ChunkInfo, ChunkImport>({
       for (const node of _nodes) {
         // Rotate the graph from top-down to left-right
         [node.x, node.y] = [node.y! - unref(spacing.width), node.x!]
+
+        if (node.data.module.imports) {
+          node.data.hasChildren = node.data.module.imports
+            ?.some((chunkImport) => {
+              const chunkId = `${chunkImport.chunk_id}`
+              const parentId = childToParentMap.get(chunkId)
+              return modulesMap.value.has(chunkId) && (!parentId || parentId === node.data.module.id)
+            })
+        }
       }
 
       // Offset the graph and adding margin
@@ -130,15 +155,28 @@ createModuleGraph<ChunkInfo, ChunkImport>({
           }
         })
 
-      const _additionalLinks = chunks.value.flatMap(chunk =>
-        chunk.imports
-          .filter(_import => !_links.some(x => x.id === `${chunk.chunk_id}|${_import.chunk_id}`))
-          .map(_import => ({
-            source: nodesMap.get(`${chunk.chunk_id}`)!,
-            target: nodesMap.get(`${_import.chunk_id}`)!,
-            id: `${chunk.chunk_id}|${_import.chunk_id}`,
-          })),
-      )
+      const linkIds = new Set(_links.map(link => link.id))
+      const _additionalLinks: ModuleGraphLink<ChunkInfo, ChunkImport>[] = []
+      for (const chunk of chunks.value) {
+        const source = nodesMap.get(`${chunk.chunk_id}`)
+        if (!source)
+          continue
+
+        for (const chunkImport of chunk.imports) {
+          const id = `${chunk.chunk_id}|${chunkImport.chunk_id}`
+          const target = nodesMap.get(`${chunkImport.chunk_id}`)
+          if (!target || linkIds.has(id))
+            continue
+
+          _additionalLinks.push({
+            source,
+            target,
+            import: chunkImport,
+            id,
+          })
+          linkIds.add(id)
+        }
+      }
 
       const normalizedLinks = [..._links, ..._additionalLinks]
 
@@ -148,10 +186,9 @@ createModuleGraph<ChunkInfo, ChunkImport>({
       }
       links.value = normalizedLinks
 
-      nextTick(() => {
-        width.value = (container.value!.scrollWidth / scale.value + unref(spacing.margin))
-        height.value = (container.value!.scrollHeight / scale.value + unref(spacing.margin))
-      })
+      const graphSize = getModuleGraphSize(_nodes, spacing)
+      width.value = graphSize.width
+      height.value = graphSize.height
     }
   },
 })
diff --git a/packages/rolldown/src/app/components/data/ChunkDetails.vue b/packages/rolldown/src/app/components/data/ChunkDetails.vue
index c9a595c9..81bc983d 100644
--- a/packages/rolldown/src/app/components/data/ChunkDetails.vue
+++ b/packages/rolldown/src/app/components/data/ChunkDetails.vue
@@ -1,11 +1,28 @@
 <script setup lang="ts">
-import type { RolldownChunkImport, RolldownChunkInfo, SessionContext } from '~~/shared/types'
+import type { ModuleListItem, RolldownChunkImport, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import { useRpc } from '#imports'
 import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 
+type ChunkImportInfo = RolldownChunkInfo['imports'][number]
+
+interface SessionModulesIndex {
+  modulesList: ModuleListItem[]
+  map: Map<string, ModuleListItem>
+}
+
+interface ChunkImporterRef {
+  chunk: RolldownChunkInfo
+  importChunk: ChunkImportInfo
+}
+
+interface ChunksIndex {
+  byId: Map<RolldownChunkInfo['chunk_id'], RolldownChunkInfo>
+  importersById: Map<RolldownChunkInfo['chunk_id'], ChunkImporterRef[]>
+}
+
 const props = withDefaults(defineProps<{
   chunk: RolldownChunkInfo
   session: SessionContext
@@ -15,13 +32,51 @@ const props = withDefaults(defineProps<{
   showDetails: true,
 })
 
-const modulesMap = computed(() => {
-  const map = new Map()
-  for (const module of props.session.modulesList) {
+const sessionModulesIndexCache = new Map<string, SessionModulesIndex>()
+const chunksIndexCache = new WeakMap<RolldownChunkInfo[], ChunksIndex>()
+
+function getSessionModulesMap(session: SessionContext) {
+  const cached = sessionModulesIndexCache.get(session.id)
+  if (cached?.modulesList === session.modulesList)
+    return cached.map
+
+  const map = new Map<string, ModuleListItem>()
+  for (const module of session.modulesList) {
     map.set(module.id, module)
   }
+  sessionModulesIndexCache.set(session.id, {
+    modulesList: session.modulesList,
+    map,
+  })
   return map
-})
+}
+
+function getChunksIndex(chunks: RolldownChunkInfo[]) {
+  const cached = chunksIndexCache.get(chunks)
+  if (cached)
+    return cached
+
+  const byId = new Map<RolldownChunkInfo['chunk_id'], RolldownChunkInfo>()
+  const importersById = new Map<RolldownChunkInfo['chunk_id'], ChunkImporterRef[]>()
+
+  for (const chunk of chunks) {
+    byId.set(chunk.chunk_id, chunk)
+    for (const importChunk of chunk.imports) {
+      const importers = importersById.get(importChunk.chunk_id) ?? []
+      importers.push({ chunk, importChunk })
+      importersById.set(importChunk.chunk_id, importers)
+    }
+  }
+
+  const index = {
+    byId,
+    importersById,
+  }
+  chunksIndexCache.set(chunks, index)
+  return index
+}
+
+const modulesMap = computed(() => getSessionModulesMap(props.session))
 
 function getModuleSize(modules: string[]) {
   return modules.reduce((total, id) => {
@@ -52,10 +107,11 @@ const { state, isLoading } = useAsyncState(
 )
 
 const normalizedChunks = computed(() => props.chunks || state.value)
+const chunksIndex = computed(() => normalizedChunks.value ? getChunksIndex(normalizedChunks.value) : undefined)
 
 const imports = computed((): Array<RolldownChunkImport & { size: number }> => {
   return props.chunk.imports.map((importChunk) => {
-    const chunk = normalizedChunks.value?.find(c => c.chunk_id === importChunk.chunk_id)
+    const chunk = chunksIndex.value?.byId.get(importChunk.chunk_id)
     return {
       ...importChunk,
       name: chunk?.name || '[unnamed]',
@@ -68,9 +124,7 @@ const imports = computed((): Array<RolldownChunkImport & { size: number }> => {
 })
 
 const importers = computed((): RolldownChunkImport[] => {
-  return normalizedChunks.value?.filter(c => c.imports.some(i => i.chunk_id === props.chunk.chunk_id)).map((chunk) => {
-    const importChunk = chunk.imports.find(i => i.chunk_id === props.chunk.chunk_id)!
-
+  return chunksIndex.value?.importersById.get(props.chunk.chunk_id)?.map(({ chunk, importChunk }) => {
     return {
       ...importChunk,
       chunk_id: chunk.chunk_id,
diff --git a/packages/rolldown/src/app/components/data/PluginDetailsTable.vue b/packages/rolldown/src/app/components/data/PluginDetailsTable.vue
index 895890b6..1b737415 100644
--- a/packages/rolldown/src/app/components/data/PluginDetailsTable.vue
+++ b/packages/rolldown/src/app/components/data/PluginDetailsTable.vue
@@ -8,7 +8,6 @@ import { useCycleList } from '@vueuse/core'
 import { Menu as VMenu } from 'floating-vue'
 import { computed, ref } from 'vue'
 import { settings } from '~~/app/state/settings'
-import { parseReadablePath } from '~/utils/filepath'
 import { normalizeTimestamp } from '~/utils/format'
 import { getFileTypeFromModuleId, ModuleTypeRules } from '~/utils/icon'
 
@@ -25,44 +24,63 @@ const HOOK_NAME_MAP = {
 }
 
 const parsedPaths = computed(() => props.session.modulesList.map((mod) => {
-  const path = parseReadablePath(mod.id, props.session.meta.cwd)
   const type = getFileTypeFromModuleId(mod.id)
   return {
     mod,
-    path,
     type,
   }
 }))
 
 const searchFilterTypes = computed(() => ModuleTypeRules.filter(rule => parsedPaths.value.some(mod => rule.match.test(mod.mod.id))))
+const moduleTypeNameMap = computed(() => {
+  const map = new Map<string, string>()
+  for (const { mod, type } of parsedPaths.value) {
+    map.set(mod.id, type.name)
+  }
+  return map
+})
 
 const filterModuleTypes = ref<string[]>(settings.value.pluginDetailsModuleTypes ?? searchFilterTypes.value.map(i => i.name))
+const selectedModuleTypes = computed(() => new Set(filterModuleTypes.value))
 const { state: durationSortType, next } = useCycleList(['', 'desc', 'asc'], {
   initialValue: settings.value.pluginDetailsDurationSortType,
 })
 const filtered = computed(() => {
-  const sorted = durationSortType.value
-    ? props.buildMetrics.calls.toSorted((a, b) => {
-        if (durationSortType.value === 'asc') {
-          return a.duration - b.duration
-        }
-        return b.duration - a.duration
-      })
-    : props.buildMetrics.calls
-  return sorted
-    .filter((i) => {
-      if (!i.module)
-        return false
-      const matched = getFileTypeFromModuleId(i.module)
-      return filterModuleTypes.value.includes(matched.name)
-    })
-    .filter(settings.value.pluginDetailSelectedHook ? i => i.type === settings.value.pluginDetailSelectedHook : Boolean)
-    .filter((i) => {
-      if (settings.value.pluginDetailsShowType === 'all' || !['load', 'transform'].includes(settings.value.pluginDetailSelectedHook))
-        return true
+  const selectedHook = settings.value.pluginDetailSelectedHook
+  const showType = settings.value.pluginDetailsShowType
+  const shouldFilterChangedState = showType !== 'all' && ['load', 'transform'].includes(selectedHook)
+  const typeNameCache = new Map(moduleTypeNameMap.value)
+  const result: RolldownPluginBuildMetrics['calls'] = []
+
+  for (const item of props.buildMetrics.calls) {
+    if (!item.module)
+      continue
+    if (selectedHook && item.type !== selectedHook)
+      continue
+    if (shouldFilterChangedState && (showType === 'changed' ? item.unchanged : !item.unchanged))
+      continue
+
+    let moduleType = typeNameCache.get(item.module)
+    if (!moduleType) {
+      moduleType = getFileTypeFromModuleId(item.module).name
+      typeNameCache.set(item.module, moduleType)
+    }
+    if (!selectedModuleTypes.value.has(moduleType))
+      continue
 
-      return settings.value.pluginDetailsShowType === 'changed' ? !i.unchanged : i.unchanged
+    result.push(item)
+  }
+
+  if (durationSortType.value) {
+    result.sort((a, b) => {
+      if (durationSortType.value === 'asc') {
+        return a.duration - b.duration
+      }
+      return b.duration - a.duration
     })
+  }
+
+  return result
 })
 
 function toggleModuleType(rule: FilterMatchRule) {
@@ -90,6 +108,8 @@ function toggleDurationSortType() {
     :items="filtered"
     key-prop="id"
     :page-mode="false"
+    scroller="fixed"
+    :item-size="36"
   >
     <template #before>
       <div role="row" class="border-b border-base bg-base" flex="~ row">
@@ -149,6 +169,7 @@ function toggleDurationSortType() {
       <div
         role="row"
         flex="~ row"
+        h-9
         class="border-base border-b border-dashed"
         :class="[index === filtered.length - 1 ? 'border-b-0' : '']"
       >
diff --git a/packages/rolldown/src/app/components/display/ModuleGraph.vue b/packages/rolldown/src/app/components/display/ModuleGraph.vue
index f70fd7c3..00475d99 100644
--- a/packages/rolldown/src/app/components/display/ModuleGraph.vue
+++ b/packages/rolldown/src/app/components/display/ModuleGraph.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="T extends { id: string, imports: unknown[] }, I">
 import type { SessionContext } from '~~/shared/types'
-import { onMounted, unref, watch } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
+import { computed, onBeforeUnmount, onMounted, ref, unref, watch } from 'vue'
 import { generateModuleGraphLink, getModuleGraphLinkColor, useGraphDraggingScroll, useGraphZoom, useModuleGraph, useToggleGraphNodeExpanded } from '~/composables/module-graph'
 
 const props = withDefaults(defineProps<{
@@ -17,9 +18,71 @@ const { zoomIn, zoomOut, ZOOM_MIN, ZOOM_MAX } = useGraphZoom()
 const { isGraphNodeToggling, toggleNode, expandAll, collapseAll } = useToggleGraphNodeExpanded({
   modules: props.modules,
 })
+const GRAPH_VIEWPORT_OVERSCAN = 800
+
+const viewport = ref({
+  left: -GRAPH_VIEWPORT_OVERSCAN,
+  top: -GRAPH_VIEWPORT_OVERSCAN,
+  right: window.innerWidth + GRAPH_VIEWPORT_OVERSCAN,
+  bottom: window.innerHeight + GRAPH_VIEWPORT_OVERSCAN,
+})
+
+let viewportFrame: number | undefined
+
+function readViewport() {
+  const el = container.value
+  if (!el)
+    return
+
+  const currentScale = scale.value || 1
+  const overscan = GRAPH_VIEWPORT_OVERSCAN / currentScale
+
+  viewport.value = {
+    left: el.scrollLeft / currentScale - overscan,
+    top: el.scrollTop / currentScale - overscan,
+    right: (el.scrollLeft + el.clientWidth) / currentScale + overscan,
+    bottom: (el.scrollTop + el.clientHeight) / currentScale + overscan,
+  }
+}
+
+function scheduleReadViewport() {
+  if (viewportFrame !== undefined)
+    return
+
+  viewportFrame = requestAnimationFrame(() => {
+    viewportFrame = undefined
+    readViewport()
+  })
+}
+
+const visibleNodes = computed(() => {
+  const { left, top, right, bottom } = viewport.value
+  const halfWidth = unref(spacing.width) / 2
+  const halfHeight = unref(spacing.height) / 2
+
+  return nodes.value.filter((node) => {
+    const x = node.x ?? 0
+    const y = node.y ?? 0
+    return x + halfWidth >= left
+      && x - halfWidth <= right
+      && y + halfHeight >= top
+      && y - halfHeight <= bottom
+  })
+})
+
+useEventListener(container, 'scroll', scheduleReadViewport, { passive: true })
+useEventListener(window, 'resize', scheduleReadViewport, { passive: true })
+useResizeObserver(container, scheduleReadViewport)
+
+onBeforeUnmount(() => {
+  if (viewportFrame !== undefined) {
+    cancelAnimationFrame(viewportFrame)
+  }
+})
 
 onMounted(() => {
   initGraphDraggingScroll()
+  readViewport()
 
   watch(
     () => props.modules,
@@ -28,9 +91,12 @@ onMounted(() => {
       collapsedNodes.clear()
       childToParentMap.clear()
       calculateGraph()
+      scheduleReadViewport()
     },
     { immediate: true },
   )
+
+  watch([nodes, width, height, scale], scheduleReadViewport, { flush: 'post' })
 })
 </script>
 
@@ -73,7 +139,7 @@ onMounted(() => {
           </g>
         </svg>
         <template
-          v-for="node of nodes"
+          v-for="node of visibleNodes"
           :key="node.data.module.id"
         >
           <template v-if="node.data.module.id !== '~root'">
diff --git a/packages/rolldown/src/app/components/modules/DetailedList.vue b/packages/rolldown/src/app/components/modules/DetailedList.vue
index a494b1ec..2006d192 100644
--- a/packages/rolldown/src/app/components/modules/DetailedList.vue
+++ b/packages/rolldown/src/app/components/modules/DetailedList.vue
@@ -1,21 +1,37 @@
 <script setup lang="ts">
 import type { ModuleListItem, SessionContext } from '~~/shared/types'
 import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
-import { computed } from 'vue'
 
-const props = defineProps<{
+withDefaults(defineProps<{
   session: SessionContext
   modules: ModuleListItem[]
-}>()
-
-const filteredTransformsMap = computed(() => {
-  const map = new Map<string, Exclude<ModuleListItem['buildMetrics'], undefined>['transforms']>()
-  for (const mod of props.modules) {
-    const t = mod.buildMetrics?.transforms.filter(i => i.source_code_size !== i.transformed_code_size).filter(i => i.transformed_code_size)
-    map.set(mod.id, t!)
-  }
-  return map
+  itemSize?: number
+  minItemSize?: number
+  pageMode?: boolean
+  scroller?: 'dynamic' | 'window'
+}>(), {
+  minItemSize: 64,
+  pageMode: true,
+  scroller: 'dynamic',
 })
+
+type ModuleTransforms = Exclude<ModuleListItem['buildMetrics'], undefined>['transforms']
+
+const filteredTransformsCache = new WeakMap<ModuleListItem, ModuleTransforms>()
+
+function getFilteredTransforms(mod: ModuleListItem): ModuleTransforms {
+  const cached = filteredTransformsCache.get(mod)
+  if (cached)
+    return cached
+
+  const transforms = mod.buildMetrics?.transforms.filter(i => i.source_code_size !== i.transformed_code_size && i.transformed_code_size) ?? []
+  filteredTransformsCache.set(mod, transforms)
+  return transforms
+}
+
+function isLastFilteredTransform(mod: ModuleListItem, index: number) {
+  return index === getFilteredTransforms(mod).length - 1
+}
 </script>
 
 <template>
@@ -23,6 +39,10 @@ const filteredTransformsMap = computed(() => {
     <DataVirtualList
       :items="modules"
       key-prop="id"
+      :item-size="itemSize"
+      :min-item-size="minItemSize"
+      :page-mode="pageMode"
+      :scroller="scroller"
     >
       <template #default="{ item }">
         <div flex pb2>
@@ -36,13 +56,13 @@ const filteredTransformsMap = computed(() => {
             <template #detail>
               <div flex="~ gap-1 wrap" text-xs>
                 <ul flex="~ auto text-xs wrap">
-                  <template v-for="(p, i) of filteredTransformsMap.get(item.id)" :key="i">
-                    <li v-if="p.source_code_size !== p.transformed_code_size && p.transformed_code_size" flex="~ items-center">
+                  <template v-for="(p, i) of getFilteredTransforms(item)" :key="i">
+                    <li flex="~ items-center">
                       <DisplayPluginName
                         :name="p.plugin_name"
                         class="font-mono ws-nowrap op-50"
                       />
-                      <span v-if="i !== filteredTransformsMap.get(item.id)!.length - 1" op20>|</span>
+                      <span v-if="!isLastFilteredTransform(item, i)" op20>|</span>
                     </li>
                   </template>
                 </ul>
diff --git a/packages/rolldown/src/app/components/modules/FlatList.vue b/packages/rolldown/src/app/components/modules/FlatList.vue
index ca744093..f10c9e1b 100644
--- a/packages/rolldown/src/app/components/modules/FlatList.vue
+++ b/packages/rolldown/src/app/components/modules/FlatList.vue
@@ -7,9 +7,14 @@ withDefaults(defineProps<{
   modules: ModuleListItem[]
   disableTooltip?: boolean
   link?: boolean
+  itemSize?: number
+  pageMode?: boolean
+  scroller?: 'dynamic' | 'window'
 }>(), {
   disableTooltip: false,
   link: true,
+  pageMode: true,
+  scroller: 'dynamic',
 })
 
 const emit = defineEmits<{
@@ -22,6 +27,9 @@ const emit = defineEmits<{
     <DataVirtualList
       :items="modules"
       key-prop="id"
+      :item-size="itemSize"
+      :page-mode="pageMode"
+      :scroller="scroller"
     >
       <template #default="{ item }">
         <div flex pb2 @click="emit('select', item)">
diff --git a/packages/rolldown/src/app/components/modules/Graph.vue b/packages/rolldown/src/app/components/modules/Graph.vue
index 29a5535b..1d5c36f8 100644
--- a/packages/rolldown/src/app/components/modules/Graph.vue
+++ b/packages/rolldown/src/app/components/modules/Graph.vue
@@ -2,7 +2,7 @@
 import type { ModuleImport, ModuleListItem, SessionContext } from '~~/shared/types'
 import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/module-graph'
 import { computed, nextTick, unref } from 'vue'
-import { createModuleGraph } from '~/composables/module-graph'
+import { createModuleGraph, getModuleGraphSize } from '~/composables/module-graph'
 
 const props = defineProps<{
   modules: ModuleListItem[]
@@ -10,6 +10,8 @@ const props = defineProps<{
 }>()
 
 const modules = computed(() => props.modules)
+const DEFAULT_EXPANDED_DEPTH = 3
+const DEFAULT_EXPANDED_SIBLINGS = 10
 
 createModuleGraph<ModuleListItem, ModuleImport>({
   modules,
@@ -21,11 +23,37 @@ createModuleGraph<ModuleListItem, ModuleImport>({
     gap: 150,
   },
   generateGraph: (options) => {
-    const { isFirstCalculateGraph, scale, spacing, tree, hierarchy, collapsedNodes, container, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap, focusOn } = options
+    const { isFirstCalculateGraph, spacing, tree, hierarchy, collapsedNodes, modulesMap, nodes, links, nodesMap, linksMap, width, height, childToParentMap, focusOn } = options
     const rootModules = computed(() => {
       return modules.value.filter(x => x.importers.length === 0)
     })
 
+    function registerChildParent(moduleId: string, parentId: string) {
+      const existingParentId = childToParentMap.get(moduleId)
+      if (existingParentId && existingParentId !== parentId) {
+        return false
+      }
+      if (!existingParentId) {
+        childToParentMap.set(moduleId, parentId)
+      }
+      return true
+    }
+
+    function createNode(module: ModuleListItem, depth: number, moduleImport?: ModuleImport, siblingIndex = 0): ModuleGraphNode<ModuleListItem, ModuleImport> {
+      const defaultCollapsed = depth >= DEFAULT_EXPANDED_DEPTH || siblingIndex >= DEFAULT_EXPANDED_SIBLINGS
+      if (isFirstCalculateGraph.value && defaultCollapsed && module.imports.length > 0) {
+        collapsedNodes.add(module.id)
+      }
+
+      return {
+        module,
+        import: moduleImport,
+        depth,
+        expanded: !collapsedNodes.has(module.id),
+        hasChildren: false,
+      }
+    }
+
     return (focusOnFirstRootNode = true) => {
       width.value = window.innerWidth
       height.value = window.innerHeight
@@ -37,50 +65,31 @@ createModuleGraph<ModuleListItem, ModuleImport>({
           if (parent.module.id === '~root') {
             rootModules.value.forEach((x) => {
               seen.add(x)
-
-              if (isFirstCalculateGraph.value) {
-                childToParentMap.set(x.id, '~root')
-              }
+              registerChildParent(x.id, '~root')
             })
-            return rootModules.value.map(x => ({
-              module: x,
-              expanded: !collapsedNodes.has(x.id),
-              hasChildren: false,
-            }))
+            return rootModules.value.map((x, index) => createNode(x, 1, undefined, index))
           }
 
           if (collapsedNodes.has(parent.module.id)) {
             return []
           }
 
-          const modules = parent.module.imports
-            .map((x): ModuleGraphNode<ModuleListItem, ModuleImport> | undefined => {
-              const module = modulesMap.value.get(x.module_id)
-              if (!module)
-                return undefined
-              if (seen.has(module))
-                return undefined
-
-              // Check if the module is a child of the current parent
-              if (childToParentMap.has(module.id) && childToParentMap.get(module.id) !== parent.module.id)
-                return undefined
-
-              seen.add(module)
-
-              if (isFirstCalculateGraph.value) {
-                childToParentMap.set(module.id, parent.module.id)
-              }
-
-              return {
-                module,
-                import: x,
-                expanded: !collapsedNodes.has(module.id),
-                hasChildren: false,
-              }
-            })
-            .filter(x => x !== undefined)
+          const depth = (parent.depth ?? 0) + 1
+          const childNodes: ModuleGraphNode<ModuleListItem, ModuleImport>[] = []
+          for (const moduleImport of parent.module.imports) {
+            const module = modulesMap.value.get(moduleImport.module_id)
+            if (!module || seen.has(module))
+              continue
+
+            // Check if the module is a child of the current parent
+            if (!registerChildParent(module.id, parent.module.id))
+              continue
 
-          return modules
+            seen.add(module)
+            childNodes.push(createNode(module, depth, moduleImport, childNodes.length))
+          }
+
+          return childNodes
         },
       )
 
@@ -101,8 +110,10 @@ createModuleGraph<ModuleListItem, ModuleImport>({
 
         if (node.data.module.imports) {
           node.data.hasChildren = node.data.module.imports
-            ?.filter(subNode => childToParentMap.get(subNode.module_id) === node.data.module.id)
-            .length > 0
+            ?.some((subNode) => {
+              const parentId = childToParentMap.get(subNode.module_id)
+              return modulesMap.value.has(subNode.module_id) && (!parentId || parentId === node.data.module.id)
+            })
         }
       }
 
@@ -141,9 +152,11 @@ createModuleGraph<ModuleListItem, ModuleImport>({
       }
       links.value = _links
 
+      const graphSize = getModuleGraphSize(_nodes, spacing)
+      width.value = graphSize.width
+      height.value = graphSize.height
+
       nextTick(() => {
-        width.value = (container.value!.scrollWidth / scale.value + unref(spacing.margin))
-        height.value = (container.value!.scrollHeight / scale.value + unref(spacing.margin))
         const moduleId = rootModules.value?.[0]?.id
         if (focusOnFirstRootNode && moduleId) {
           nextTick(() => {
diff --git a/packages/rolldown/src/app/components/packages/Table.vue b/packages/rolldown/src/app/components/packages/Table.vue
index c80cec1e..da92a513 100644
--- a/packages/rolldown/src/app/components/packages/Table.vue
+++ b/packages/rolldown/src/app/components/packages/Table.vue
@@ -11,9 +11,15 @@ withDefaults(defineProps<{
   session: SessionContext
   disableSizeSort?: boolean
   groupView?: boolean
+  itemSize?: number
+  pageMode?: boolean
+  scroller?: 'dynamic' | 'fixed' | 'window'
 }>(), {
   disableSizeSort: false,
   groupView: false,
+  itemSize: 36,
+  pageMode: false,
+  scroller: 'fixed',
 })
 
 const route = useRoute()
@@ -28,97 +34,111 @@ function toggleSizeSortType() {
 </script>
 
 <template>
-  <div role="table" min-w-max border="~ base rounded-xl">
-    <div role="row" class="border-b border-base" flex="~ row">
-      <div :title="groupView ? 'Package' : 'Bundled packages'" role="columnheader" rounded-tl-2 flex-none ws-nowrap py1.5 px2 font-600 :class="[groupView ? 'min-w40' : 'min-w80']">
-        <template v-if="groupView">
-          <div font-mono>
-            <DisplayHighlightedPackageName :name="packages?.[0]?.name!" />
-          </div>
-        </template>
-        <template v-else>
-          Package
-        </template>
-      </div>
-      <div v-if="!groupView" title="Package version" role="columnheader" rounded-tr-2 flex-none min-w40 ws-nowrap text-left py1.5 px2 font-600>
-        Version
-      </div>
-      <div title="Transformed code size" role="columnheader" rounded-tr-2 flex-none ws-nowrap py1.5 font-600 min-w40 :class="[groupView ? 'px2' : 'pl2']">
-        <button flex="~ row gap1 items-center justify-end" w-full relative pr2>
-          Size
-          <span v-if="!disableSizeSort" w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center" @click="toggleSizeSortType">
-            <i text-xs :class="[sizeSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', sizeSortType ? 'op100 text-primary' : 'op50']" />
-          </span>
-        </button>
-      </div>
-      <div title="Importers" role="columnheader" rounded-tr-2 flex-none ws-nowrap py1.5 pl20 pr2 font-600 min-w50>
-        Importers
+  <DataVirtualList
+    v-if="packages.length"
+    class="packages-table"
+    role="table"
+    min-w-max h-full min-h-0 border="~ base rounded-xl"
+    :items="packages"
+    key-prop="dir"
+    :item-size="itemSize"
+    :page-mode="pageMode"
+    :scroller="scroller"
+  >
+    <template #before>
+      <div role="row" class="border-b border-base bg-base" flex="~ row">
+        <div :title="groupView ? 'Package' : 'Bundled packages'" role="columnheader" rounded-tl-2 flex-none ws-nowrap py1.5 px2 font-600 :class="[groupView ? 'min-w40' : 'min-w80']">
+          <template v-if="groupView">
+            <div font-mono>
+              <DisplayHighlightedPackageName :name="packages?.[0]?.name!" />
+            </div>
+          </template>
+          <template v-else>
+            Package
+          </template>
+        </div>
+        <div v-if="!groupView" title="Package version" role="columnheader" rounded-tr-2 flex-none min-w40 ws-nowrap text-left py1.5 px2 font-600>
+          Version
+        </div>
+        <div title="Transformed code size" role="columnheader" rounded-tr-2 flex-none ws-nowrap py1.5 font-600 min-w40 :class="[groupView ? 'px2' : 'pl2']">
+          <button flex="~ row gap1 items-center justify-end" w-full relative pr2>
+            Size
+            <span v-if="!disableSizeSort" w-6 h-6 rounded-full cursor-pointer hover="bg-active" flex="~ items-center justify-center" @click="toggleSizeSortType">
+              <i text-xs :class="[sizeSortType !== 'asc' ? 'i-ph-arrow-down-duotone' : 'i-ph-arrow-up-duotone', sizeSortType ? 'op100 text-primary' : 'op50']" />
+            </span>
+          </button>
+        </div>
+        <div title="Importers" role="columnheader" rounded-tr-2 flex-none ws-nowrap py1.5 pl20 pr2 font-600 min-w50>
+          Importers
+        </div>
       </div>
-    </div>
+    </template>
 
-    <DataVirtualList
-      v-if="packages.length"
-      role="rowgroup"
-      :items="packages"
-      key-prop="dir"
-    >
-      <template #default="{ item, index }">
-        <NuxtLink
-          role="row"
-          flex="~ row"
-          class="border-base border-b-1 border-dashed"
-          :class="[index === packages.length - 1 ? 'border-b-0' : '']"
-          :to="{ path: route.path, query: { package: `${item.name}@${item.version}` } }"
+    <template #default="{ item, index }">
+      <NuxtLink
+        role="row"
+        flex="~ row items-center"
+        h-9
+        class="border-base border-b-1 border-dashed"
+        :class="[index === packages.length - 1 ? 'border-b-0' : '']"
+        :to="{ path: route.path, query: { package: `${item.name}@${item.version}` } }"
+      >
+        <Tooltip
+          :triggers="['hover']"
+          :delay="1200"
+          :disabled="item.name.length < 30"
         >
-          <Tooltip
-            :triggers="['hover']"
-            :delay="1200"
-            :disabled="item.name.length < 30"
+          <div
+            v-if="!groupView" role="cell" font-mono flex-none w80 py1.5 px2 ws-nowrap text-sm overflow-hidden
+            truncate
           >
-            <div
-              v-if="!groupView" role="cell" font-mono flex-none w80 py1.5 px2 ws-nowrap text-sm overflow-hidden
-              truncate
-            >
-              <DisplayHighlightedPackageName :name="item.name" />
-            </div>
-            <template #popper>
-              <span font-mono text-sm>
-                {{ item.name }}
-              </span>
-            </template>
-          </Tooltip>
-          <div role="cell" flex="~ items-center" text-left flex-none font-mono py1.5 px2 text-sm min-w40 op80 :class="{ 'text-primary': item.duplicated }">
-            {{ item.version }}
+            <DisplayHighlightedPackageName :name="item.name" />
           </div>
-          <div role="cell" flex="~ items-center justify-end" flex-none font-mono py1.5 px2 text-sm min-w40 op80>
-            <VMenu :delay="{ show: 200, hide: 0 }">
-              <DisplayFileSizeBadge :bytes="item.transformedCodeSize" />
-              <template #popper>
-                <div p2 flex="~ col gap-1">
-                  <div v-for="file of item.files.filter(f => !!f.transformedCodeSize)" :key="file.path" flex="~ row gap-1 items-center nowrap" w-max>
-                    <span w24 inline-flex>
-                      <DisplayFileSizeBadge :bytes="file.transformedCodeSize" />
-                    </span>
-                    <DisplayModuleId :id="file.path" :session="session" ws-nowrap flex-1 disable-tooltip link :cwd="item.dir" />
-                  </div>
+          <template #popper>
+            <span font-mono text-sm>
+              {{ item.name }}
+            </span>
+          </template>
+        </Tooltip>
+        <div role="cell" flex="~ items-center" text-left flex-none font-mono py1.5 px2 text-sm min-w40 op80 :class="{ 'text-primary': item.duplicated }">
+          {{ item.version }}
+        </div>
+        <div role="cell" flex="~ items-center justify-end" flex-none font-mono py1.5 px2 text-sm min-w40 op80>
+          <VMenu :delay="{ show: 200, hide: 0 }">
+            <DisplayFileSizeBadge :bytes="item.transformedCodeSize" />
+            <template #popper>
+              <div p2 flex="~ col gap-1">
+                <div v-for="file of item.files.filter(f => !!f.transformedCodeSize)" :key="file.path" flex="~ row gap-1 items-center nowrap" w-max>
+                  <span w24 inline-flex>
+                    <DisplayFileSizeBadge :bytes="file.transformedCodeSize" />
+                  </span>
+                  <DisplayModuleId :id="file.path" :session="session" ws-nowrap flex-1 disable-tooltip link :cwd="item.dir" />
                 </div>
-              </template>
-            </VMenu>
-          </div>
-          <div role="cell" flex="~ items-center" flex-1 font-mono py1.5 pl20 pr2 text-sm op80>
-            <PackagesImporters :package="item" :session="session" :show-version="groupView" />
-          </div>
-        </NuxtLink>
-      </template>
-    </DataVirtualList>
-    <div v-else>
-      <div p4>
-        <div w-full h-48 flex="~ items-center justify-center" op50 italic>
-          <p>
-            No data
-          </p>
+              </div>
+            </template>
+          </VMenu>
+        </div>
+        <div role="cell" flex="~ items-center" flex-1 font-mono py1.5 pl20 pr2 text-sm op80>
+          <PackagesImporters :package="item" :session="session" :show-version="groupView" />
         </div>
+      </NuxtLink>
+    </template>
+  </DataVirtualList>
+  <div v-else role="table" min-w-max border="~ base rounded-xl">
+    <div p4>
+      <div w-full h-48 flex="~ items-center justify-center" op50 italic>
+        <p>
+          No data
+        </p>
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.packages-table:deep(.vue-recycle-scroller__slot) {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+</style>
diff --git a/packages/rolldown/src/app/components/plugins/FlatList.vue b/packages/rolldown/src/app/components/plugins/FlatList.vue
index be0facc2..7fbb4f5e 100644
--- a/packages/rolldown/src/app/components/plugins/FlatList.vue
+++ b/packages/rolldown/src/app/components/plugins/FlatList.vue
@@ -3,9 +3,15 @@ import type { PluginItem } from '~~/shared/types'
 import { useRoute } from '#app/composables/router'
 import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 
-defineProps<{
+withDefaults(defineProps<{
   plugins: PluginItem[]
-}>()
+  itemSize?: number
+  pageMode?: boolean
+  scroller?: 'dynamic' | 'window'
+}>(), {
+  pageMode: true,
+  scroller: 'dynamic',
+})
 
 const route = useRoute()
 </script>
@@ -15,6 +21,9 @@ const route = useRoute()
     <DataVirtualList
       :items="plugins"
       key-prop="plugin_id"
+      :item-size="itemSize"
+      :page-mode="pageMode"
+      :scroller="scroller"
     >
       <template #default="{ item }">
         <div flex pb2>
diff --git a/packages/rolldown/src/app/composables/module-graph.ts b/packages/rolldown/src/app/composables/module-graph.ts
index 562ed817..a9c20faa 100644
--- a/packages/rolldown/src/app/composables/module-graph.ts
+++ b/packages/rolldown/src/app/composables/module-graph.ts
@@ -12,6 +12,7 @@ import { useZoomElement } from './zoom-element'
 export interface ModuleGraphNode<M, I> {
   module: M
   import?: I
+  depth?: number
   expanded?: boolean
   hasChildren?: boolean
 }
@@ -109,6 +110,17 @@ export function getModuleGraphLinkColor<M, I>(_link: ModuleGraphLink<M, I>) {
   return 'stroke-#8885'
 }
 
+export function getModuleGraphSize<M, I>(nodes: HierarchyNode<ModuleGraphNode<M, I>>[], spacing: ModuleGraphSpacing) {
+  const nodeWidth = unref(spacing.width)
+  const nodeHeight = unref(spacing.height)
+  const margin = unref(spacing.margin)
+
+  return {
+    width: Math.max(...nodes.map(node => (node.x ?? 0) + nodeWidth / 2), 0) + margin,
+    height: Math.max(...nodes.map(node => (node.y ?? 0) + nodeHeight / 2), 0) + margin,
+  }
+}
+
 export function createModuleGraph<M extends { id: string }, I>(options: ModuleGraphOptions<M, I>) {
   const ZOOM_MIN = 0.4
   const ZOOM_MAX = 2
diff --git a/packages/rolldown/src/app/composables/rpc.ts b/packages/rolldown/src/app/composables/rpc.ts
index 579aec7b..c9d7e226 100644
--- a/packages/rolldown/src/app/composables/rpc.ts
+++ b/packages/rolldown/src/app/composables/rpc.ts
@@ -28,7 +28,7 @@ export async function connect() {
       connectionMeta: runtimeConfig.app.connection,
       wsOptions: {
         onConnected: () => {
-          connectionState.connected = true
+          connectionState.error = null
         },
         onError: (e) => {
           connectionState.error = e
@@ -49,6 +49,10 @@ export async function connect() {
       },
     })
 
+    const isTrusted = await rpc.value.ensureTrusted()
+    if (!isTrusted)
+      throw new Error('Vite DevTools client is not trusted.')
+
     const functions = await rpc.value.call('devtoolskit:internal:rpc:server:list')
     const cacheableFunctions = Object.keys(functions).filter(name => functions[name]?.cacheable)
 
diff --git a/packages/rolldown/src/app/pages/session/[session]/chunks.vue b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
index 951c3305..8f26cadd 100644
--- a/packages/rolldown/src/app/pages/session/[session]/chunks.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/chunks.vue
@@ -3,6 +3,7 @@ import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ClientSettings } from '~/state/settings'
 import type { ChunkChartInfo, ChunkChartNode } from '~/types/chart'
 import { useRpc } from '#imports'
+import DataVirtualList from '@vitejs/devtools-ui/components/DataVirtualList.vue'
 import DisplayBadge from '@vitejs/devtools-ui/components/DisplayBadge.vue'
 import { computedWithControl, useAsyncState, useMouse } from '@vueuse/core'
 import Fuse from 'fuse.js'
@@ -258,21 +259,31 @@ watch(() => settings.value.chunkViewType, () => {
       <ChunksFlatList
         :session="session"
         :chunks="searched"
+        scroller="window"
       />
     </div>
     <div
-      v-if="settings.chunkViewType === 'detailed-list'"
+      v-else-if="settings.chunkViewType === 'detailed-list'"
       class="px5 pt-4" flex="~ col gap-4"
     >
-      <DataChunkDetails
-        v-for="chunk of searched"
-        :key="chunk.id"
-        border="~ base rounded-lg"
-        p3
-        :chunk="chunk"
-        :chunks="searched!"
-        :session="session"
-      />
+      <DataVirtualList
+        :items="searched"
+        key-prop="id"
+        scroller="window"
+        :min-item-size="220"
+      >
+        <template #default="{ item }">
+          <div pb4>
+            <DataChunkDetails
+              border="~ base rounded-lg"
+              p3
+              :chunk="item"
+              :chunks="searched"
+              :session="session"
+            />
+          </div>
+        </template>
+      </DataVirtualList>
     </div>
     <ChunksGraph
       v-else-if="settings.chunkViewType === 'graph'"
diff --git a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
index 3867a1e8..9e82ab00 100644
--- a/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/graph/index.vue
@@ -189,11 +189,13 @@ function toggleDisplay(type: ClientSettings['moduleGraphViewType']) {
       v-if="settings.moduleGraphViewType === 'list'"
       :session="session"
       :modules="searched"
+      scroller="window"
     />
     <ModulesDetailedList
       v-else-if="settings.moduleGraphViewType === 'detailed-list'"
       :session="session"
       :modules="searched"
+      scroller="window"
     />
     <ModulesGraph
       v-else-if="settings.moduleGraphViewType === 'graph'"
diff --git a/packages/rolldown/src/app/pages/session/[session]/packages.vue b/packages/rolldown/src/app/pages/session/[session]/packages.vue
index 0902a1f2..d2b97255 100644
--- a/packages/rolldown/src/app/pages/session/[session]/packages.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/packages.vue
@@ -151,7 +151,7 @@ watch(() => settings.value.packageViewType, () => {
 
 <template>
   <VisualLoading v-if="isLoading" />
-  <div v-else relative>
+  <div v-else relative h-full min-h-0 flex="~ col">
     <div sticky left-4 right-4 top-4 z-panel-nav p-4>
       <DataSearchPanel v-model="searchValue" :rules="packageTypeRules">
         <div flex="~ wrap gap-2 items-center" p2 border="t base">
@@ -169,7 +169,7 @@ watch(() => settings.value.packageViewType, () => {
         </div>
       </DataSearchPanel>
     </div>
-    <div flex="~ col gap-2" pt4 px4 pb4 overflow-x-auto>
+    <div flex="~ col gap-2" flex-1 min-h-0 pt4 px4 pb4 overflow-x-auto overflow-y-hidden>
       <template v-if="settings.packageViewType === 'table'">
         <PackagesTable :packages="normalizedPackages" :session="session" />
         <div
diff --git a/packages/rolldown/src/app/pages/session/[session]/plugins.vue b/packages/rolldown/src/app/pages/session/[session]/plugins.vue
index d2a257ab..8feac7c8 100644
--- a/packages/rolldown/src/app/pages/session/[session]/plugins.vue
+++ b/packages/rolldown/src/app/pages/session/[session]/plugins.vue
@@ -80,7 +80,7 @@ watchDebounced(
     <div sticky left-4 right-4 top-4 z-panel-nav p-4>
       <DataSearchPanel v-model="searchValue" :rules="searchFilterTypes" />
     </div>
-    <PluginsFlatList :plugins="searched ?? []" />
+    <PluginsFlatList :plugins="searched ?? []" scroller="window" />
     <div
       fixed bottom-4 py-1 px-2 bg-glass left="1/2" translate-x="-1/2" border="~ base rounded-full" text="center xs"
     >
diff --git a/packages/rolldown/src/node/rolldown/events-reader.ts b/packages/rolldown/src/node/rolldown/events-reader.ts
index 4434f787..ff2952c0 100644
--- a/packages/rolldown/src/node/rolldown/events-reader.ts
+++ b/packages/rolldown/src/node/rolldown/events-reader.ts
@@ -1,36 +1,80 @@
-import type { Event, SessionMeta } from '@rolldown/debug'
-import type { ModuleBuildMetrics, RolldownModuleLoadInfo, RolldownModuleTransformInfo, RolldownResolveInfo } from '../../shared/types'
+import type { Event, HookLoadCallEnd, HookTransformCallEnd, HookTransformCallStart, SessionMeta } from '@rolldown/debug'
+import type { ModuleBuildMetrics, RolldownModuleLoadInfo, RolldownModuleTransformInfo } from '../../shared/types'
+import { Buffer } from 'node:buffer'
 import fs from 'node:fs'
+import { parseToEvent } from '@rolldown/debug'
+import { logger } from '../diagnostics'
 import { getContentByteSize } from '../utils/format'
-import { parseJsonStream } from '../utils/json-parse-stream'
-import { getContentRef, getEventId, RolldownEventsManager } from './events-manager'
+import { getContentRef, RolldownEventsManager } from './events-manager'
 
 const readers: Map<string, RolldownEventsReader> = new Map()
 const MAX_READERS = 32
+const MAX_MODULE_METRICS_CACHE = 32
+const MAX_MODULE_METRICS_CACHE_BYTES = 64 * 1024 * 1024
+const LINE_FEED = '\n'.charCodeAt(0)
+const CARRIAGE_RETURN = '\r'.charCodeAt(0)
+const ACTION_PREVIEW_BYTES = 512
+const PACKAGE_SUMMARY_MAX_PARSED_LINE_BYTES = 1024 * 1024
+const PACKAGE_SUMMARY_ACTIONS = new Set([
+  'ChunkGraphReady',
+  'HookTransformCallEnd',
+  'ModuleGraphReady',
+  'StringRef',
+])
+const PACKAGE_SUMMARY_LARGE_LINE_ACTIONS = new Set([
+  'HookTransformCallEnd',
+  'StringRef',
+])
 
 interface DeferredContent {
   value: string | null
   ref: string | null
 }
 
-interface PendingResolveStart {
-  timestamp: string
-  importer: string | null
-  module_request: string
-  import_kind: RolldownResolveInfo['import_kind']
+interface LineLocation {
+  offset: number
+  length: number
 }
 
-interface PendingLoadStart {
-  timestamp: string
+interface IndexedTransform {
+  start: LineLocation
+  end: LineLocation
+}
+
+interface ModuleEventIndex {
+  loadEnds: Map<string, LineLocation>
+  transforms: Map<string, IndexedTransform>
 }
 
 interface PendingTransformStart {
-  timestamp: string
-  content: DeferredContent
+  module: string
+  location: LineLocation
+}
+
+interface ModuleMetricsCacheEntry {
+  metrics: ModuleBuildMetrics
+  bytes: number
+}
+
+type ContentEvent = HookLoadCallEnd | HookTransformCallStart | HookTransformCallEnd
+type IndexedEvent = Event & { event_id?: string }
+
+interface ReadEventLinesOptions {
+  onlyActions?: ReadonlySet<string>
+  skipAction?: string
+  maxLineBytes?: number
+  largeLineActions?: ReadonlySet<string>
+  onSkippedLine?: (line: SkippedEventLine) => void
 }
 
-function getDeferredContent(event: any, refs: Set<string>): DeferredContent {
-  if (!('content' in event) || typeof event.content !== 'string') {
+interface SkippedEventLine {
+  action: string | undefined
+  location: LineLocation
+  preview: Buffer
+}
+
+function getDeferredContent(event: ContentEvent, refs: Set<string>): DeferredContent {
+  if (typeof event.content !== 'string') {
     return {
       value: null,
       ref: null,
@@ -59,6 +103,82 @@ function resolveDeferredContent(content: DeferredContent, refs: Map<string, stri
   return content.value
 }
 
+function cloneModuleBuildMetrics(metrics: ModuleBuildMetrics): ModuleBuildMetrics {
+  return {
+    resolve_ids: metrics.resolve_ids.map(item => ({ ...item })),
+    loads: metrics.loads.map(item => ({ ...item })),
+    transforms: metrics.transforms.map(item => ({ ...item })),
+  }
+}
+
+function getContentCacheBytes(content: string | null | undefined) {
+  return content ? getContentByteSize(content) : 0
+}
+
+function getModuleBuildMetricsCacheBytes(metrics: ModuleBuildMetrics) {
+  return metrics.loads.reduce((total, load) => total + getContentCacheBytes(load.content), 0)
+    + metrics.transforms.reduce((total, transform) => total
+      + getContentCacheBytes(transform.content_from)
+      + getContentCacheBytes(transform.content_to), 0)
+}
+
+function stripLineEnd(line: Buffer) {
+  if (line.at(-1) === CARRIAGE_RETURN)
+    return line.subarray(0, -1).toString('utf8')
+  return line.toString('utf8')
+}
+
+function appendPreview(preview: Buffer, segment: Buffer) {
+  if (preview.length >= ACTION_PREVIEW_BYTES || !segment.length)
+    return preview
+
+  const remaining = ACTION_PREVIEW_BYTES - preview.length
+  const next = segment.subarray(0, Math.min(remaining, segment.length))
+  return preview.length
+    ? Buffer.concat([preview, next], preview.length + next.length)
+    : Buffer.from(next)
+}
+
+function getPreviewAction(preview: Buffer) {
+  const match = preview.toString('utf8').match(/"action":"([^"]+)"/)
+  return match?.[1]
+}
+
+function getReferencedContentByteSize(content: unknown, refs: Map<string, number>) {
+  if (typeof content !== 'string')
+    return 0
+
+  const ref = getContentRef(content)
+  if (ref)
+    return refs.get(ref) ?? 0
+
+  return getContentByteSize(content)
+}
+
+function getPreviewStringValue(preview: Buffer, key: string) {
+  const match = preview.toString('utf8').match(new RegExp(`"${key}":"((?:\\\\.|[^"])*)"`))
+  if (!match)
+    return undefined
+
+  try {
+    return JSON.parse(`"${match[1]}"`) as string
+  }
+  catch {
+    return undefined
+  }
+}
+
+function estimateContentByteSizeFromLine(preview: Buffer, location: LineLocation) {
+  const marker = Buffer.from('"content":"')
+  const index = preview.indexOf(marker)
+  if (index === -1)
+    return 0
+
+  const contentStart = index + marker.length
+  // The remaining JSON properties and closing quote are tiny compared to skipped content.
+  return Math.max(0, location.length - contentStart - 128)
+}
+
 function pruneReaders() {
   if (readers.size <= MAX_READERS)
     return
@@ -78,21 +198,33 @@ export class RolldownEventsReader {
   manager = new RolldownEventsManager()
   meta: SessionMeta | undefined
   private pendingRead: Promise<void> | undefined
+  private lineNumber: number = 0
+  private moduleEventIndex: Map<string, ModuleEventIndex> = new Map()
+  private stringRefIndex: Map<string, LineLocation> = new Map()
+  private pendingTransformStarts: Map<string, PendingTransformStart> = new Map()
+  private moduleMetricsCache: Map<string, ModuleMetricsCacheEntry> = new Map()
+  private moduleMetricsCacheBytes: number = 0
+  private pendingModuleMetrics: Map<string, Promise<ModuleBuildMetrics>> = new Map()
+  private assetsReadyLocations: LineLocation[] = []
+  private assetsHydrated = false
+  private pendingPackageSummaryRead: Promise<void> | undefined
+  private packageSummaryTimestamp: number = 0
 
   private constructor(
     readonly filepath: string,
+    private readonly cacheKey: string = filepath,
   ) {
   }
 
-  static get(filepath: string) {
-    if (readers.has(filepath)) {
-      const reader = readers.get(filepath)!
-      readers.delete(filepath)
-      readers.set(filepath, reader)
+  static get(filepath: string, cacheKey: string = filepath) {
+    if (readers.has(cacheKey)) {
+      const reader = readers.get(cacheKey)!
+      readers.delete(cacheKey)
+      readers.set(cacheKey, reader)
       return reader
     }
-    const reader = new RolldownEventsReader(filepath)
-    readers.set(filepath, reader)
+    const reader = new RolldownEventsReader(filepath, cacheKey)
+    readers.set(cacheKey, reader)
     pruneReaders()
     return reader
   }
@@ -113,161 +245,546 @@ export class RolldownEventsReader {
     if (mtime.getTime() <= this.lastTimestamp) {
       return
     }
+
+    let changed = false
+    await this.readEventLines(this.lastBytes, (event, location) => {
+      changed = true
+      if (event.action === 'SessionMeta') {
+        this.meta = event as SessionMeta
+      }
+      this.manager.handleEvent(event)
+      this.indexEvent(event, location)
+    }, {
+      skipAction: 'AssetsReady',
+      onSkippedLine: line => this.recordAssetsReadyLocation(line),
+    })
+    if (changed) {
+      this.clearModuleMetricsCache()
+      this.pendingModuleMetrics.clear()
+    }
+    this.lastTimestamp = mtime.getTime()
+    this.lastBytes = size
+  }
+
+  private async readEventLines(
+    start: number,
+    processor: (event: Event, location: LineLocation) => void | Promise<void>,
+    options: ReadEventLinesOptions = {},
+  ) {
     const stream = fs.createReadStream(this.filepath, {
-      start: this.lastBytes,
+      start,
     })
-    await parseJsonStream<Event>(
-      stream,
-      (event) => {
-        if (event.action === 'SessionMeta') {
-          this.meta = event as SessionMeta
+    let absoluteOffset = start
+    let lineStartOffset = start
+    let parts: Buffer[] = []
+    let partsLength = 0
+    let preview: Buffer<ArrayBufferLike> = Buffer.alloc(0)
+    let skipCurrentLine = false
+    let lineAction: string | undefined
+
+    const processLine = async (line: Buffer, location: LineLocation) => {
+      this.lineNumber += 1
+      const text = stripLineEnd(line)
+      if (!text)
+        return
+
+      try {
+        await processor(parseToEvent(text), location)
+      }
+      catch (e) {
+        const preview = text.length > 256 ? `${text.slice(0, 256)}...` : text
+        logger.RDDT0002({ line: this.lineNumber, error: (e as Error).message, preview }).log()
+      }
+    }
+
+    const appendSegmentPreview = (segment: Buffer) => {
+      if (skipCurrentLine)
+        return
+
+      preview = appendPreview(preview, segment)
+      lineAction = lineAction ?? getPreviewAction(preview)
+      const lineBytes = partsLength + segment.length
+
+      if (
+        lineAction
+        && (
+          options.skipAction === lineAction
+          || (options.onlyActions && !options.onlyActions.has(lineAction))
+          || (
+            options.maxLineBytes != null
+            && lineBytes > options.maxLineBytes
+            && !!options.largeLineActions?.has(lineAction)
+          )
+        )
+      ) {
+        skipCurrentLine = true
+        parts = []
+        partsLength = 0
+      }
+    }
+
+    const processSkippedLine = (location: LineLocation) => {
+      this.lineNumber += 1
+      options.onSkippedLine?.({
+        action: lineAction,
+        location,
+        preview,
+      })
+    }
+
+    const resetLine = (nextLineStartOffset: number) => {
+      parts = []
+      partsLength = 0
+      preview = Buffer.alloc(0)
+      skipCurrentLine = false
+      lineAction = undefined
+      lineStartOffset = nextLineStartOffset
+    }
+
+    for await (const chunk of stream) {
+      const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk)
+      let segmentStart = 0
+      let newline = buffer.indexOf(LINE_FEED)
+
+      while (newline !== -1) {
+        const segment = buffer.subarray(segmentStart, newline)
+        if (!partsLength && !preview.length)
+          lineStartOffset = absoluteOffset + segmentStart
+
+        appendSegmentPreview(segment)
+        const location = {
+          offset: lineStartOffset,
+          length: absoluteOffset + newline + 1 - lineStartOffset,
+        }
+
+        if (skipCurrentLine) {
+          processSkippedLine(location)
+        }
+        else {
+          const line = partsLength
+            ? Buffer.concat([...parts, segment], partsLength + segment.length)
+            : segment
+          await processLine(line, location)
         }
+
+        segmentStart = newline + 1
+        resetLine(absoluteOffset + segmentStart)
+        newline = buffer.indexOf(LINE_FEED, segmentStart)
+      }
+
+      if (segmentStart < buffer.length) {
+        if (!partsLength && !preview.length)
+          lineStartOffset = absoluteOffset + segmentStart
+        const tail = buffer.subarray(segmentStart)
+        appendSegmentPreview(tail)
+        if (!skipCurrentLine) {
+          parts.push(tail)
+          partsLength += tail.length
+        }
+      }
+
+      absoluteOffset += buffer.length
+    }
+
+    if (skipCurrentLine) {
+      processSkippedLine({
+        offset: lineStartOffset,
+        length: absoluteOffset - lineStartOffset,
+      })
+    }
+    else if (partsLength) {
+      await processLine(Buffer.concat(parts, partsLength), {
+        offset: lineStartOffset,
+        length: partsLength,
+      })
+    }
+  }
+
+  async readAssets() {
+    await this.read()
+
+    if (this.assetsHydrated)
+      return
+
+    this.manager.assets.clear()
+    this.manager.chunkAssetMap.clear()
+
+    const events = await this.readEventsAt(this.assetsReadyLocations)
+    for (const event of events) {
+      if (event?.action === 'AssetsReady') {
         this.manager.handleEvent(event)
-      },
-    )
-    this.lastTimestamp = mtime.getTime()
-    this.lastBytes = size
+      }
+    }
+    this.assetsHydrated = true
+  }
+
+  private recordAssetsReadyLocation(line: SkippedEventLine) {
+    if (line.action !== 'AssetsReady')
+      return
+
+    this.assetsReadyLocations.push(line.location)
+    this.assetsHydrated = false
+  }
+
+  async readPackageSummary() {
+    if (this.pendingPackageSummaryRead)
+      return this.pendingPackageSummaryRead
+
+    this.pendingPackageSummaryRead = this.readPackageSummaryChanges().finally(() => {
+      this.pendingPackageSummaryRead = undefined
+    })
+    return this.pendingPackageSummaryRead
   }
 
-  private async scanEvents(processor: (event: Event, eventIndex: number) => void | Promise<void>) {
-    let eventIndex = 0
-    await parseJsonStream<Event>(
-      fs.createReadStream(this.filepath),
-      async (event) => {
-        await processor(event, eventIndex)
-        eventIndex += 1
-      },
+  private async readPackageSummaryChanges() {
+    const { mtime } = await fs.promises.stat(this.filepath)
+    if (mtime.getTime() <= this.packageSummaryTimestamp)
+      return
+
+    this.disposeData()
+
+    const sourceRefSizes = new Map<string, number>()
+    await this.readEventLines(0, (event) => {
+      if (event.action === 'StringRef') {
+        sourceRefSizes.set(event.id, getContentByteSize(event.content))
+        return
+      }
+
+      if (event.action === 'HookTransformCallEnd') {
+        this.recordPackageTransformEnd(event, sourceRefSizes)
+        return
+      }
+
+      if (
+        event.action === 'ChunkGraphReady'
+        || event.action === 'ModuleGraphReady'
+      ) {
+        this.manager.handleEvent(event)
+      }
+    }, {
+      onlyActions: PACKAGE_SUMMARY_ACTIONS,
+      maxLineBytes: PACKAGE_SUMMARY_MAX_PARSED_LINE_BYTES,
+      largeLineActions: PACKAGE_SUMMARY_LARGE_LINE_ACTIONS,
+      onSkippedLine: line => this.recordPackageSummarySkippedLine(line, sourceRefSizes),
+    })
+
+    for (const [id, metrics] of this.manager.module_build_metrics) {
+      const module = this.manager.modules.get(id)
+      if (module)
+        module.build_metrics = metrics
+    }
+
+    this.packageSummaryTimestamp = mtime.getTime()
+  }
+
+  private recordPackageSummarySkippedLine(line: SkippedEventLine, sourceRefSizes: Map<string, number>) {
+    if (line.action === 'StringRef') {
+      const id = getPreviewStringValue(line.preview, 'id')
+      if (id)
+        sourceRefSizes.set(id, estimateContentByteSizeFromLine(line.preview, line.location))
+      return
+    }
+
+    if (line.action === 'HookTransformCallEnd') {
+      const moduleId = getPreviewStringValue(line.preview, 'module_id')
+      if (moduleId)
+        this.recordPackageTransformSize(moduleId, estimateContentByteSizeFromLine(line.preview, line.location))
+    }
+  }
+
+  private recordPackageTransformEnd(event: HookTransformCallEnd & { timestamp?: string | number }, refs: Map<string, number>) {
+    if (!event.module_id)
+      return
+
+    this.recordPackageTransformSize(
+      event.module_id,
+      getReferencedContentByteSize(event.content, refs),
+      event,
     )
   }
 
+  private recordPackageTransformSize(
+    moduleId: string,
+    transformedCodeSize: number,
+    event?: HookTransformCallEnd & { timestamp?: string | number },
+  ) {
+    const moduleBuildMetrics = this.manager.module_build_metrics.get(moduleId) ?? {
+      resolve_ids: [],
+      loads: [],
+      transforms: [],
+    }
+
+    moduleBuildMetrics.transforms.push({
+      type: 'transform',
+      id: '',
+      plugin_name: event?.plugin_name ?? '',
+      plugin_id: event?.plugin_id ?? 0,
+      content_from: null,
+      content_to: null,
+      source_code_size: 0,
+      transformed_code_size: transformedCodeSize,
+      timestamp_start: +(event?.timestamp ?? 0),
+      timestamp_end: +(event?.timestamp ?? 0),
+      duration: 0,
+    })
+    this.manager.module_build_metrics.set(moduleId, moduleBuildMetrics)
+  }
+
+  private getModuleEventIndex(module: string) {
+    let index = this.moduleEventIndex.get(module)
+    if (!index) {
+      index = {
+        loadEnds: new Map(),
+        transforms: new Map(),
+      }
+      this.moduleEventIndex.set(module, index)
+    }
+    return index
+  }
+
+  private indexEvent(event: IndexedEvent, location: LineLocation) {
+    if (event.action === 'StringRef') {
+      this.stringRefIndex.set(event.id, location)
+      return
+    }
+
+    if (event.action === 'HookLoadCallEnd' && event.module_id && event.event_id) {
+      this.getModuleEventIndex(event.module_id).loadEnds.set(event.event_id, location)
+      return
+    }
+
+    if (event.action === 'HookTransformCallStart' && event.call_id && event.module_id) {
+      this.pendingTransformStarts.set(event.call_id, {
+        module: event.module_id,
+        location,
+      })
+      return
+    }
+
+    if (event.action === 'HookTransformCallEnd' && event.call_id) {
+      const start = this.pendingTransformStarts.get(event.call_id)
+      this.pendingTransformStarts.delete(event.call_id)
+      if (!start)
+        return
+
+      if (!event.event_id)
+        return
+
+      this.getModuleEventIndex(event.module_id ?? start.module).transforms.set(event.event_id, {
+        start: start.location,
+        end: location,
+      })
+      return
+    }
+
+    if (event.action === 'ModuleGraphReady') {
+      this.pendingTransformStarts.clear()
+    }
+  }
+
+  private async readEventsAt(locations: LineLocation[]): Promise<Array<Event | undefined>> {
+    if (!locations.length)
+      return []
+
+    const file = await fs.promises.open(this.filepath, 'r')
+    try {
+      const events: Array<Event | undefined> = []
+      for (const location of locations) {
+        const buffer = Buffer.allocUnsafe(location.length)
+        const { bytesRead } = await file.read(buffer, 0, location.length, location.offset)
+        let end = bytesRead
+        if (end > 0 && buffer[end - 1] === LINE_FEED)
+          end -= 1
+        if (end > 0 && buffer[end - 1] === CARRIAGE_RETURN)
+          end -= 1
+
+        const text = buffer.subarray(0, end).toString('utf8')
+        if (!text) {
+          events.push(undefined)
+          continue
+        }
+        try {
+          events.push(parseToEvent(text))
+        }
+        catch {
+          events.push(undefined)
+        }
+      }
+      return events
+    }
+    finally {
+      await file.close()
+    }
+  }
+
   private async readStringRefs(refs: Set<string>) {
     const values = new Map<string, string>()
     if (!refs.size)
       return values
 
-    await this.scanEvents((event) => {
-      if (event.action !== 'StringRef' || !refs.has(event.id))
-        return
+    const ids: string[] = []
+    const locations: LineLocation[] = []
+    for (const id of refs) {
+      const location = this.stringRefIndex.get(id)
+      if (!location)
+        continue
+      ids.push(id)
+      locations.push(location)
+    }
 
-      values.set(event.id, event.content)
-    })
+    const events = await this.readEventsAt(locations)
+    for (const [index, event] of events.entries()) {
+      if (event?.action === 'StringRef')
+        values.set(ids[index]!, event.content)
+    }
 
     return values
   }
 
   async readModuleBuildMetrics(module: string): Promise<ModuleBuildMetrics> {
-    const resolveStarts = new Map<string, PendingResolveStart>()
-    const loadStarts = new Map<string, PendingLoadStart>()
-    const transformStarts = new Map<string, PendingTransformStart>()
+    await this.read()
+
+    const cached = this.moduleMetricsCache.get(module)
+    if (cached) {
+      this.moduleMetricsCache.delete(module)
+      this.moduleMetricsCache.set(module, cached)
+      return cloneModuleBuildMetrics(cached.metrics)
+    }
+
+    const pending = this.pendingModuleMetrics.get(module)
+    if (pending)
+      return cloneModuleBuildMetrics(await pending)
+
+    const promise = this.hydrateModuleBuildMetrics(module)
+    this.pendingModuleMetrics.set(module, promise)
+    try {
+      const metrics = await promise
+      this.setCachedModuleBuildMetrics(module, metrics)
+      return cloneModuleBuildMetrics(metrics)
+    }
+    finally {
+      this.pendingModuleMetrics.delete(module)
+    }
+  }
+
+  private clearModuleMetricsCache() {
+    this.moduleMetricsCache.clear()
+    this.moduleMetricsCacheBytes = 0
+  }
+
+  private setCachedModuleBuildMetrics(module: string, metrics: ModuleBuildMetrics) {
+    const bytes = getModuleBuildMetricsCacheBytes(metrics)
+    const previous = this.moduleMetricsCache.get(module)
+    if (previous) {
+      this.moduleMetricsCacheBytes -= previous.bytes
+      this.moduleMetricsCache.delete(module)
+    }
+
+    if (bytes > MAX_MODULE_METRICS_CACHE_BYTES)
+      return
+
+    this.moduleMetricsCache.set(module, {
+      metrics,
+      bytes,
+    })
+    this.moduleMetricsCacheBytes += bytes
+
+    while (this.moduleMetricsCache.size > MAX_MODULE_METRICS_CACHE || this.moduleMetricsCacheBytes > MAX_MODULE_METRICS_CACHE_BYTES) {
+      const firstKey = this.moduleMetricsCache.keys().next().value
+      if (firstKey == null)
+        break
+      const deleted = this.moduleMetricsCache.get(firstKey)
+      this.moduleMetricsCache.delete(firstKey)
+      if (deleted)
+        this.moduleMetricsCacheBytes -= deleted.bytes
+    }
+  }
+
+  private async hydrateModuleBuildMetrics(module: string): Promise<ModuleBuildMetrics> {
+    const summary = this.manager.module_build_metrics.get(module) ?? {
+      resolve_ids: [],
+      loads: [],
+      transforms: [],
+    }
+    const index = this.moduleEventIndex.get(module)
     const refs = new Set<string>()
-    const resolve_ids: RolldownResolveInfo[] = []
-    const loads: Array<Omit<RolldownModuleLoadInfo, 'content'> & { content: DeferredContent }> = []
-    const transforms: Array<Omit<RolldownModuleTransformInfo, 'content_from' | 'content_to' | 'diff_added' | 'diff_removed'> & {
-      content_from: DeferredContent
-      content_to: DeferredContent
-      source_code_size: number
-      transformed_code_size: number
-    }> = []
-
-    await this.scanEvents((raw, eventIndex) => {
-      const event = raw as any
-      const eventId = getEventId(raw, eventIndex)
-
-      if (event.action === 'HookResolveIdCallStart') {
-        resolveStarts.set(event.call_id, {
-          timestamp: event.timestamp,
-          importer: event.importer,
-          module_request: event.module_request,
-          import_kind: event.import_kind,
-        })
-        return
-      }
-      if (event.action === 'HookLoadCallStart') {
-        if (event.module_id === module) {
-          loadStarts.set(event.call_id, {
-            timestamp: event.timestamp,
-          })
-        }
-        return
-      }
-      if (event.action === 'HookTransformCallStart') {
-        if (event.module_id === module) {
-          transformStarts.set(event.call_id, {
-            timestamp: event.timestamp,
-            content: getDeferredContent(event, refs),
-          })
-        }
-        return
+    const loadEventIndexes: Array<number | undefined> = []
+    const loadLocations: LineLocation[] = []
+    for (const load of summary.loads) {
+      const location = index?.loadEnds.get(load.id)
+      if (!location) {
+        loadEventIndexes.push(undefined)
+        continue
       }
+      loadEventIndexes.push(loadLocations.length)
+      loadLocations.push(location)
+    }
 
-      if (event.action === 'HookResolveIdCallEnd') {
-        const start = resolveStarts.get(event.call_id)
-        resolveStarts.delete(event.call_id)
-        if (!start || event.resolved_id !== module)
-          return
-
-        resolve_ids.push({
-          id: eventId,
-          type: 'resolve',
-          timestamp_start: +start.timestamp,
-          timestamp_end: +event.timestamp,
-          duration: +event.timestamp - +start.timestamp,
-          plugin_id: event.plugin_id,
-          plugin_name: event.plugin_name,
-          importer: start.importer,
-          module_request: start.module_request,
-          import_kind: start.import_kind,
-          resolved_id: event.resolved_id,
-        })
+    const transformEventIndexes: Array<number | undefined> = []
+    const transformLocations: LineLocation[] = []
+    for (const transform of summary.transforms) {
+      const location = index?.transforms.get(transform.id)
+      if (!location) {
+        transformEventIndexes.push(undefined)
+        continue
       }
+      transformEventIndexes.push(transformLocations.length)
+      transformLocations.push(location.start, location.end)
+    }
+
+    const loadEvents = await this.readEventsAt(loadLocations)
+    const transformEvents = await this.readEventsAt(transformLocations)
 
-      if (event.action === 'HookLoadCallEnd') {
-        const start = loadStarts.get(event.call_id)
-        loadStarts.delete(event.call_id)
-        if (!start || event.module_id !== module)
-          return
-
-        loads.push({
-          id: eventId,
-          type: 'load',
-          timestamp_start: +start.timestamp,
-          timestamp_end: +event.timestamp,
-          duration: +event.timestamp - +start.timestamp,
-          plugin_id: event.plugin_id,
-          plugin_name: event.plugin_name,
-          content: getDeferredContent(event, refs),
-        })
+    const loads: Array<Omit<RolldownModuleLoadInfo, 'content'> & { content: DeferredContent }> = summary.loads.map((load, index) => {
+      const eventIndex = loadEventIndexes[index]
+      const event = eventIndex == null
+        ? undefined
+        : loadEvents[eventIndex]
+      return {
+        ...load,
+        content: event?.action === 'HookLoadCallEnd'
+          ? getDeferredContent(event, refs)
+          : {
+              value: load.content,
+              ref: null,
+            },
       }
+    })
 
-      if (event.action === 'HookTransformCallEnd') {
-        const start = transformStarts.get(event.call_id)
-        transformStarts.delete(event.call_id)
-        if (!start || event.module_id !== module)
-          return
-
-        const content_from = start.content
-        const content_to = getDeferredContent(event, refs)
-
-        transforms.push({
-          id: eventId,
-          type: 'transform',
-          timestamp_start: +start.timestamp,
-          timestamp_end: +event.timestamp,
-          duration: +event.timestamp - +start.timestamp,
-          plugin_id: event.plugin_id,
-          plugin_name: event.plugin_name,
-          content_from,
-          content_to,
-          source_code_size: 0,
-          transformed_code_size: 0,
-        })
+    const transforms: Array<Omit<RolldownModuleTransformInfo, 'content_from' | 'content_to' | 'diff_added' | 'diff_removed'> & {
+      content_from: DeferredContent
+      content_to: DeferredContent
+      source_code_size: number
+      transformed_code_size: number
+    }> = summary.transforms.map((transform, index) => {
+      const eventIndex = transformEventIndexes[index]
+      const start = eventIndex == null
+        ? undefined
+        : transformEvents[eventIndex]
+      const end = eventIndex == null
+        ? undefined
+        : transformEvents[eventIndex + 1]
+      return {
+        ...transform,
+        content_from: start?.action === 'HookTransformCallStart'
+          ? getDeferredContent(start, refs)
+          : {
+              value: transform.content_from,
+              ref: null,
+            },
+        content_to: end?.action === 'HookTransformCallEnd'
+          ? getDeferredContent(end, refs)
+          : {
+              value: transform.content_to,
+              ref: null,
+            },
       }
     })
 
     const refValues = await this.readStringRefs(refs)
 
     return {
-      resolve_ids,
+      resolve_ids: summary.resolve_ids.map(resolve => ({ ...resolve })),
       loads: loads.map(load => ({
         ...load,
         content: resolveDeferredContent(load.content, refValues),
@@ -287,12 +804,24 @@ export class RolldownEventsReader {
   }
 
   hasPendingRead() {
-    return !!this.pendingRead
+    return !!this.pendingRead || !!this.pendingPackageSummaryRead
   }
 
   dispose() {
-    readers.delete(this.filepath)
+    readers.delete(this.cacheKey)
+    this.disposeData()
+  }
+
+  private disposeData() {
     this.manager.dispose()
+    this.lineNumber = 0
+    this.moduleEventIndex.clear()
+    this.stringRefIndex.clear()
+    this.pendingTransformStarts.clear()
+    this.clearModuleMetricsCache()
+    this.pendingModuleMetrics.clear()
+    this.assetsReadyLocations = []
+    this.assetsHydrated = false
   }
 
   [Symbol.dispose]() {
diff --git a/packages/rolldown/src/node/rolldown/logs-manager.ts b/packages/rolldown/src/node/rolldown/logs-manager.ts
index 74ff80c0..d1c0e790 100644
--- a/packages/rolldown/src/node/rolldown/logs-manager.ts
+++ b/packages/rolldown/src/node/rolldown/logs-manager.ts
@@ -50,4 +50,22 @@ export class RolldownLogsManager {
     }
     return reader
   }
+
+  async loadAssetSession(session: string) {
+    const reader = await this.loadSession(session)
+    await reader.readAssets()
+    return reader
+  }
+
+  async loadPackageSession(session: string) {
+    const filepath = join(this.dir, session, 'logs.json')
+    const reader = RolldownEventsReader.get(filepath, `${filepath}:package-summary`)
+    await reader.readPackageSummary()
+    if (!reader.meta) {
+      const metaReader = RolldownEventsReader.get(join(this.dir, session, 'meta.json'))
+      await metaReader.read()
+      reader.meta = metaReader.meta!
+    }
+    return reader
+  }
 }
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-asset-details.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-asset-details.ts
index c2e6607f..2bb368d8 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-asset-details.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-asset-details.ts
@@ -10,7 +10,7 @@ export const rolldownGetAssetDetails = defineRpcFunction({
     const manager = getLogsManager(context)
     return {
       handler: async ({ session, id }: { session: string, id: string }) => {
-        const reader = await manager.loadSession(session)
+        const reader = await manager.loadAssetSession(session)
         const assets = reader.manager.assets
         const chunks = reader.manager.chunks
         const asset = assets.get(id)!
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-assets-list.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-assets-list.ts
index 8a878a49..cc2f0068 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-assets-list.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-assets-list.ts
@@ -10,7 +10,7 @@ export const rolldownGetAssetsList = defineRpcFunction({
     const manager = getLogsManager(context)
     return {
       handler: async ({ session }: { session: string }) => {
-        const reader = await manager.loadSession(session)
+        const reader = await manager.loadAssetSession(session)
         return Array.from(reader.manager.assets.values())
       },
     }
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-chunk-info.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-chunk-info.ts
index e7effee6..9adf0442 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-chunk-info.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-chunk-info.ts
@@ -10,7 +10,7 @@ export const rolldownGetChunkInfo = defineRpcFunction({
     const manager = getLogsManager(context)
     return {
       handler: async ({ session, id }: { session: string, id: number }) => {
-        const reader = await manager.loadSession(session)
+        const reader = await manager.loadAssetSession(session)
         const chunk = reader.manager.chunks.get(id)!
         chunk.asset = reader.manager.chunkAssetMap.get(chunk.chunk_id)
         return chunk
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-chunks-graph.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-chunks-graph.ts
index 152973df..c8304659 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-chunks-graph.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-chunks-graph.ts
@@ -10,7 +10,7 @@ export const rolldownGetChunksGraph = defineRpcFunction({
     const manager = getLogsManager(context)
     return {
       handler: async ({ session }: { session: string }) => {
-        const reader = await manager.loadSession(session)
+        const reader = await manager.loadAssetSession(session)
         const chunks = Array.from(reader.manager.chunks.values())
 
         chunks.forEach((chunk) => {
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts
index f04cd175..7e74407b 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-module-info.ts
@@ -11,7 +11,7 @@ export const rolldownGetModuleInfo = defineRpcFunction({
     const manager = getLogsManager(context)
     return {
       handler: async ({ session, module }: { session: string, module: string }) => {
-        const reader = await manager.loadSession(session)
+        const reader = await manager.loadAssetSession(session)
 
         if (!reader.manager.eventCount)
           return null
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-package-details.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-package-details.ts
index 2cc3b948..1fb72a38 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-package-details.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-package-details.ts
@@ -11,7 +11,7 @@ export const rolldownGetPackageDetails = defineRpcFunction({
     const manager = getLogsManager(context)
     return {
       handler: async ({ session, id }: { session: string, id: string }) => {
-        const reader = await manager.loadSession(session)
+        const reader = await manager.loadPackageSession(session)
         const packagesManifest = await getPackagesManifest(reader)
         return packagesManifest.get(id)
       },
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-packages.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-packages.ts
index 2f210245..a6af1686 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-packages.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-packages.ts
@@ -5,86 +5,107 @@ import { defineRpcFunction } from '@vitejs/devtools-kit'
 import { getPackageDirPath, isNodeModulePath } from '../../../shared/utils/filepath'
 import { getLogsManager } from '../utils'
 
-export async function getPackagesManifest(reader: RolldownEventsReader) {
+type ProjectManifest = Awaited<ReturnType<typeof readProjectManifestOnly>>
+
+function createPackageManifestReader() {
+  const manifestCache = new Map<string, Promise<ProjectManifest | null>>()
+
+  return (dir: string) => {
+    let promise = manifestCache.get(dir)
+    if (!promise) {
+      promise = readProjectManifestOnly(dir).catch((err: any) => {
+        if (err?.code === 'ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND') {
+          return null
+        }
+        throw err
+      })
+      manifestCache.set(dir, promise)
+    }
+    return promise
+  }
+}
+
+export async function getPackagesManifest(
+  reader: RolldownEventsReader,
+  readPackageManifest: (dir: string) => Promise<ProjectManifest | null> = createPackageManifestReader(),
+) {
   const modulesMap = reader.manager.modules
   const chunks = Array.from(reader.manager.chunks.values())
-  const packagesManifest = new Map<string, PackageInfo>()
+  const packagesMap = new Map<string, PackageInfo>()
+  const packageImportersMap = new Map<string, string[]>()
 
-  const getImporters = (path: string, packageDir: string, visited = new Set<string>()): string[] => {
-    const importers = modulesMap.get(path)?.importers || []
-    const result: string[] = []
+  const packageModules = chunks.flatMap(chunk => chunk.modules).filter(isNodeModulePath).map((path) => {
+    const moduleBuildMetrics = modulesMap.get(path)?.build_metrics
+    return {
+      path,
+      dir: getPackageDirPath(path),
+      transformedCodeSize: moduleBuildMetrics?.transforms[moduleBuildMetrics.transforms.length - 1]?.transformed_code_size ?? 0,
+    }
+  })
+
+  const packageModulePaths = new Map<string, Set<string>>()
+  for (const item of packageModules) {
+    let paths = packageModulePaths.get(item.dir)
+    if (!paths) {
+      paths = new Set()
+      packageModulePaths.set(item.dir, paths)
+    }
+    paths.add(item.path)
+  }
 
-    for (const importer of importers) {
-      if (visited.has(importer))
-        continue
+  const getPackageImporters = (packageDir: string): string[] => {
+    const cached = packageImportersMap.get(packageDir)
+    if (cached)
+      return cached
 
-      visited.add(importer)
-      const module = modulesMap.get(importer)
-      const imports = module?.imports?.map(i => i.module_id) || []
+    const importers = new Set<string>()
+    for (const path of packageModulePaths.get(packageDir) ?? []) {
+      for (const importer of modulesMap.get(path)?.importers ?? []) {
+        if (importer.startsWith(packageDir))
+          continue
 
-      if (imports.some(i => getPackageDirPath(i) === packageDir)) {
-        result.push(importer)
+        if (modulesMap.get(importer)?.imports?.some(i => getPackageDirPath(i.module_id) === packageDir))
+          importers.add(importer)
       }
-
-      result.push(...getImporters(importer, packageDir, visited))
     }
 
+    const result = Array.from(importers).sort((a, b) => a.localeCompare(b))
+    packageImportersMap.set(packageDir, result)
     return result
   }
 
-  const packages = chunks.map(chunk => chunk.modules.map(module => module)).flat().filter(isNodeModulePath).map((p) => {
-    const module = modulesMap.get(p)
-    const moduleBuildMetrics = module?.build_metrics
-    return {
-      path: p,
-      dir: getPackageDirPath(p),
-      transformedCodeSize: moduleBuildMetrics?.transforms[moduleBuildMetrics?.transforms.length - 1]?.transformed_code_size ?? 0,
-    }
-  })
-  await Promise.all(packages.map(async (p) => {
-    let packageKey = ''
-    let manifest = null
+  const manifests = await Promise.all(packageModules.map(async item => ({
+    item,
+    manifest: await readPackageManifest(item.dir),
+  })))
 
-    try {
-      manifest = await readProjectManifestOnly(p.dir)
-      packageKey = `${manifest.name!}@${manifest.version!}`
-    }
-    catch (err: any) {
-      if (err?.code === 'ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND') {
-        packageKey = `${p.dir}`
-      }
-      else {
-        throw err
-      }
+  for (const { item, manifest } of manifests) {
+    const packageKey = manifest ? `${manifest.name!}@${manifest.version!}` : `${item.dir}`
+    const packageInfo = packagesMap.get(packageKey)
+    const importers = packageInfo
+      ? []
+      : getPackageImporters(item.dir).map(path => ({ path, version: '' }))
+    const file = {
+      path: item.path,
+      transformedCodeSize: item.transformedCodeSize,
+      importers,
     }
-    const packageInfo = packagesManifest.get(packageKey)
-    const importers = getImporters(p.path, p.dir).map(i => ({ path: i, version: '' }))
+
     if (packageInfo) {
-      packagesManifest.set(packageKey, {
-        ...packageInfo,
-        files: [...packageInfo.files, {
-          path: p.path,
-          transformedCodeSize: p.transformedCodeSize,
-          importers,
-        }],
-        transformedCodeSize: packageInfo.transformedCodeSize + p.transformedCodeSize,
-      })
+      packageInfo.files.push(file)
+      packageInfo.transformedCodeSize += item.transformedCodeSize
+      continue
     }
-    else {
-      packagesManifest.set(packageKey, {
-        name: manifest?.name || p.dir,
-        version: manifest?.version || '(unknown)',
-        dir: p.dir,
-        files: [{
-          path: p.path,
-          transformedCodeSize: p.transformedCodeSize,
-          importers,
-        }],
-        transformedCodeSize: p.transformedCodeSize,
-      })
-    }
-  }))
-  return packagesManifest
+
+    packagesMap.set(packageKey, {
+      name: manifest?.name || item.dir,
+      version: manifest?.version || '(unknown)',
+      dir: item.dir,
+      files: [file],
+      transformedCodeSize: item.transformedCodeSize,
+    })
+  }
+  return packagesMap
 }
 
 export const rolldownGetPackages = defineRpcFunction({
@@ -96,49 +117,39 @@ export const rolldownGetPackages = defineRpcFunction({
     const manager = getLogsManager(context)
     return {
       handler: async ({ session }: { session: string }) => {
-        const reader = await manager.loadSession(session)
+        const reader = await manager.loadPackageSession(session)
         const modulesMap = reader.manager.modules
-        const duplicatePackagesMap = new Map<string, number>()
-        const packagesManifest = await getPackagesManifest(reader)
-
-        const normalizedPackages = await Promise.all(
-          Array.from<PackageInfo>(packagesManifest.values())
-            .map((p) => {
-              duplicatePackagesMap.set(p.name, (duplicatePackagesMap.get(p.name) ?? 0) + 1)
-              return {
-                ...p,
-                type: p.files.some(f => modulesMap.get(f.path)?.importers?.some(i => i.includes(reader.meta!.cwd))) ? 'direct' : 'transitive',
-              }
-            })
-            .map(async (p) => {
-              const duplicated = duplicatePackagesMap.get(p.name)! > 1
-              let files = p.files
-              if (duplicated) {
-                files = await Promise.all(files.map(async (f) => {
-                  const importers = await Promise.all(f.importers.map(async (i) => {
-                    let manifest = null
-                    try {
-                      if (isNodeModulePath(i.path)) {
-                        manifest = await readProjectManifestOnly(getPackageDirPath(i.path))
-                      }
-                    }
-                    catch (err: any) {
-                      if (err?.code !== 'ERR_PNPM_NO_IMPORTER_MANIFEST_FOUND') {
-                        throw err
-                      }
-                    }
-                    return { ...i, version: manifest?.version ?? '' }
-                  }))
-                  return { ...f, importers }
+        const packageNameCounts = new Map<string, number>()
+        const readPackageManifest = createPackageManifestReader()
+        const packagesMap = await getPackagesManifest(reader, readPackageManifest)
+        const packages = Array.from<PackageInfo>(packagesMap.values())
+
+        for (const item of packages) {
+          packageNameCounts.set(item.name, (packageNameCounts.get(item.name) ?? 0) + 1)
+        }
+
+        const normalizedPackages = await Promise.all(packages.map(async (item) => {
+          const duplicated = (packageNameCounts.get(item.name) ?? 0) > 1
+          const files = duplicated
+            ? await Promise.all(item.files.map(async (file) => {
+                const importers = await Promise.all(file.importers.map(async (importer) => {
+                  if (!isNodeModulePath(importer.path))
+                    return importer
+
+                  const manifest = await readPackageManifest(getPackageDirPath(importer.path))
+                  return { ...importer, version: manifest?.version ?? '' }
                 }))
-              }
-              return {
-                ...p,
-                duplicated,
-                files,
-              }
-            }),
-        )
+                return { ...file, importers }
+              }))
+            : item.files
+
+          return {
+            ...item,
+            duplicated,
+            files,
+            type: item.files.some(f => modulesMap.get(f.path)?.importers?.some(i => i.includes(reader.meta!.cwd))) ? 'direct' : 'transitive',
+          }
+        }))
         return normalizedPackages.filter(i => !!i.transformedCodeSize)
       },
     }
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-summary.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-summary.ts
index 547f8c4b..8204761c 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-summary.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-summary.ts
@@ -10,7 +10,7 @@ export const rolldownGetSessionCompareSummary = defineRpcFunction({
     const manager = getLogsManager(context)
     return {
       handler: async ({ sessions }: { sessions: string[] }) => {
-        const reader = await Promise.all(sessions.map(s => manager.loadSession(s)))
+        const reader = await Promise.all(sessions.map(s => manager.loadAssetSession(s)))
 
         return sessions.map((s, index) => {
           const _reader = reader[index]!
diff --git a/packages/ui/src/components/DataVirtualList.vue b/packages/ui/src/components/DataVirtualList.vue
index b45a72a2..b0e3ac61 100644
--- a/packages/ui/src/components/DataVirtualList.vue
+++ b/packages/ui/src/components/DataVirtualList.vue
@@ -1,15 +1,22 @@
 <script setup lang="ts" generic="T">
-import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller'
+import { DynamicScroller, DynamicScrollerItem, RecycleScroller, WindowScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/index.css'
 
-withDefaults(defineProps<{
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
   items: T[]
   keyProp: keyof T & string
   pageMode?: boolean
   minItemSize?: number
+  itemSize?: number
+  scroller?: 'dynamic' | 'fixed' | 'window'
 }>(), {
   pageMode: true,
   minItemSize: 30,
+  scroller: 'dynamic',
 })
 
 defineSlots<{
@@ -23,11 +30,41 @@ defineSlots<{
 </script>
 
 <template>
+  <div
+    v-if="props.scroller === 'window'"
+    v-bind="$attrs"
+    class="data-virtual-list-window"
+  >
+    <WindowScroller
+      class="data-virtual-list-window__scroller"
+      list-class="data-virtual-list-window__list"
+      item-class="data-virtual-list-window__item"
+      :items="props.items"
+      :item-size="props.itemSize ?? null"
+      :min-item-size="props.minItemSize"
+      :key-field="props.keyProp"
+      :flow-mode="props.itemSize == null"
+    >
+      <template #before>
+        <slot name="before" />
+      </template>
+      <template #default="{ item, active, index }">
+        <slot
+          v-bind="{ key: (item as T)[props.keyProp] }"
+          :item="(item as T)"
+          :index="index"
+          :active="active"
+        />
+      </template>
+    </WindowScroller>
+  </div>
   <DynamicScroller
-    :items="items"
-    :min-item-size="minItemSize"
-    :key-field="keyProp"
-    :page-mode="pageMode"
+    v-else-if="props.scroller === 'dynamic'"
+    v-bind="$attrs"
+    :items="props.items"
+    :min-item-size="props.minItemSize"
+    :key-field="props.keyProp"
+    :page-mode="props.pageMode"
   >
     <template #before>
       <slot name="before" />
@@ -39,7 +76,7 @@ defineSlots<{
         :index="index"
       >
         <slot
-          v-bind="{ key: (item as T)[keyProp] }"
+          v-bind="{ key: (item as T)[props.keyProp] }"
           :item="(item as T)"
           :index="index"
           :active="active"
@@ -47,4 +84,24 @@ defineSlots<{
       </DynamicScrollerItem>
     </template>
   </DynamicScroller>
+  <RecycleScroller
+    v-else
+    v-bind="$attrs"
+    :items="props.items"
+    :item-size="props.itemSize ?? props.minItemSize"
+    :key-field="props.keyProp"
+    :page-mode="props.pageMode"
+  >
+    <template #before>
+      <slot name="before" />
+    </template>
+    <template #default="{ item, active, index }">
+      <slot
+        v-bind="{ key: (item as T)[props.keyProp] }"
+        :item="(item as T)"
+        :index="index"
+        :active="active"
+      />
+    </template>
+  </RecycleScroller>
 </template>
diff --git a/packages/ui/src/components/PanelSideNav.vue b/packages/ui/src/components/PanelSideNav.vue
index 85683411..cbd24970 100644
--- a/packages/ui/src/components/PanelSideNav.vue
+++ b/packages/ui/src/components/PanelSideNav.vue
@@ -29,27 +29,29 @@ const items = computed<SideNavItem[]>(() => {
 </script>
 
 <template>
-  <div>
-    <div
-      border="r y base rounded-r-xl" flex="~ col gap-1" p1 of-y-auto max-h-96vh relative bg-glass
-      class="fixed left-0 top-1/2 -translate-y-1/2"
-    >
-      <template v-for="item in items" :key="item.title">
-        <component
-          :is="item.to ? NuxtLink : 'button'"
-          v-bind="item.to ? { to: item.to } : { type: 'button' }"
-          v-tooltip="{ placement: 'right', content: item.title }"
-          :title="item.title"
-          :aria-label="item.title"
-          rounded-full
-          p2 hover:bg-active op-fade hover:op100
-          flex="~ items-center justify-center"
-          exact-active-class="text-primary op100!"
-          @click="item.action?.()"
-        >
-          <div :class="item.icon" text-lg />
-        </component>
-      </template>
-    </div>
+  <div w12 flex-none>
+    <Teleport to="body">
+      <div
+        border="r y base rounded-r-xl" flex="~ col gap-1" p1 of-y-auto max-h-96vh bg-glass
+        style="position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 64"
+      >
+        <template v-for="item in items" :key="item.title">
+          <component
+            :is="item.to ? NuxtLink : 'button'"
+            v-bind="item.to ? { to: item.to } : { type: 'button' }"
+            v-tooltip="{ placement: 'right', content: item.title }"
+            :title="item.title"
+            :aria-label="item.title"
+            rounded-full
+            p2 hover:bg-active op-fade hover:op100
+            flex="~ items-center justify-center"
+            exact-active-class="text-primary op100!"
+            @click="item.action?.()"
+          >
+            <div :class="item.icon" text-lg />
+          </component>
+        </template>
+      </div>
+    </Teleport>
   </div>
 </template>

From 146a0894233f59891e80b519618554c8875bc60e Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Fri, 15 May 2026 15:11:59 +0800
Subject: [PATCH 3/3] feat: log cache

---
 .../src/node/rolldown/events-manager.ts       |  60 +-
 .../src/node/rolldown/events-reader.ts        | 576 ++++++++++++++++--
 .../rolldown/src/node/rolldown/log-cache.ts   | 537 ++++++++++++++++
 .../src/node/rolldown/logs-manager.ts         |  23 +
 .../functions/rolldown-get-plugin-details.ts  |   1 +
 .../functions/rolldown-get-session-summary.ts |   2 +-
 6 files changed, 1147 insertions(+), 52 deletions(-)
 create mode 100644 packages/rolldown/src/node/rolldown/log-cache.ts

diff --git a/packages/rolldown/src/node/rolldown/events-manager.ts b/packages/rolldown/src/node/rolldown/events-manager.ts
index e11cc225..a084d20d 100644
--- a/packages/rolldown/src/node/rolldown/events-manager.ts
+++ b/packages/rolldown/src/node/rolldown/events-manager.ts
@@ -1,6 +1,5 @@
 import type { Event, HookLoadCallEnd, HookLoadCallStart, HookResolveIdCallEnd, HookResolveIdCallStart, HookTransformCallEnd, HookTransformCallStart, Module as ModuleInfo } from '@rolldown/debug'
 import type { ModuleBuildMetrics, PluginBuildMetrics, RolldownAssetInfo, RolldownChunkInfo } from '../../shared/types'
-import { createHash } from 'node:crypto'
 import { guessChunkName } from '../../shared/utils/guess-chunk-name'
 import { getInitialChunkIds } from '../utils/chunk'
 import { getContentByteSize } from '../utils/format'
@@ -14,12 +13,13 @@ type ModuleBuildHookEvents = (Exclude<Event, 'StringRef'> & (HookResolveIdCallSt
 const MODULE_BUILD_START_HOOKS = ['HookResolveIdCallStart', 'HookLoadCallStart', 'HookTransformCallStart']
 const MODULE_BUILD_END_HOOKS = ['HookResolveIdCallEnd', 'HookLoadCallEnd', 'HookTransformCallEnd']
 
-interface ContentInfo {
+export interface ContentInfo {
   byteSize: number
-  hash: string
 }
 
-type PendingModuleBuildHookEvent
+type ModuleSnapshot = Omit<ModuleInfo & { build_metrics?: ModuleBuildMetrics }, 'build_metrics'>
+
+export type PendingModuleBuildHookEvent
   = | {
     action: 'HookResolveIdCallStart'
     timestamp: string
@@ -37,20 +37,27 @@ type PendingModuleBuildHookEvent
     contentInfo: ContentInfo
   }
 
-function getContentHash(content: string) {
-  return createHash('sha1').update(content).digest('hex')
+export interface RolldownEventsManagerSnapshot {
+  eventCount: number
+  lastEvent: RolldownEvent | undefined
+  chunks: Array<[number, RolldownChunkInfo]>
+  modules: Array<[string, ModuleSnapshot]>
+  source_refs: Array<[string, ContentInfo]>
+  module_build_hook_events: Array<[string, PendingModuleBuildHookEvent]>
+  module_build_metrics: Array<[string, ModuleBuildMetrics]>
+  plugin_build_metrics: Array<[number, PluginBuildMetrics]>
+  build_start_time: number
+  build_end_time: number
 }
 
 function getContentInfo(content: string | null | undefined): ContentInfo {
   if (!content) {
     return {
       byteSize: 0,
-      hash: '',
     }
   }
   return {
     byteSize: getContentByteSize(content),
-    hash: getContentHash(content),
   }
 }
 
@@ -211,7 +218,6 @@ export class RolldownEventsManager {
             ...info,
             type: 'transform',
             module: event.module_id,
-            unchanged: sourceContentInfo.hash === transformedContentInfo.hash,
           })
         }
         this.plugin_build_metrics.set(pluginId, plugin_build_metrics)
@@ -306,6 +312,42 @@ export class RolldownEventsManager {
     this.build_end_time = 0
   }
 
+  snapshot(): RolldownEventsManagerSnapshot {
+    return {
+      eventCount: this.eventCount,
+      lastEvent: this.lastEvent,
+      chunks: Array.from(this.chunks.entries()),
+      modules: Array.from(this.modules.entries()).map(([id, module]) => {
+        const { build_metrics, ...snapshot } = module
+        return [id, snapshot]
+      }),
+      source_refs: Array.from(this.source_refs.entries()),
+      module_build_hook_events: Array.from(this.module_build_hook_events.entries()),
+      module_build_metrics: Array.from(this.module_build_metrics.entries()),
+      plugin_build_metrics: Array.from(this.plugin_build_metrics.entries()),
+      build_start_time: this.build_start_time,
+      build_end_time: this.build_end_time,
+    }
+  }
+
+  restore(snapshot: RolldownEventsManagerSnapshot) {
+    this.eventCount = snapshot.eventCount
+    this.lastEvent = snapshot.lastEvent
+    this.chunks = new Map(snapshot.chunks)
+    this.assets.clear()
+    this.chunkAssetMap.clear()
+    this.source_refs = new Map(snapshot.source_refs)
+    this.module_build_hook_events = new Map(snapshot.module_build_hook_events)
+    this.module_build_metrics = new Map(snapshot.module_build_metrics)
+    this.modules = new Map(snapshot.modules.map(([id, module]) => [id, {
+      ...module,
+      build_metrics: this.module_build_metrics.get(id),
+    }]))
+    this.plugin_build_metrics = new Map(snapshot.plugin_build_metrics)
+    this.build_start_time = snapshot.build_start_time
+    this.build_end_time = snapshot.build_end_time
+  }
+
   [Symbol.dispose]() {
     this.dispose()
   }
diff --git a/packages/rolldown/src/node/rolldown/events-reader.ts b/packages/rolldown/src/node/rolldown/events-reader.ts
index ff2952c0..d0849a33 100644
--- a/packages/rolldown/src/node/rolldown/events-reader.ts
+++ b/packages/rolldown/src/node/rolldown/events-reader.ts
@@ -1,16 +1,20 @@
 import type { Event, HookLoadCallEnd, HookTransformCallEnd, HookTransformCallStart, SessionMeta } from '@rolldown/debug'
-import type { ModuleBuildMetrics, RolldownModuleLoadInfo, RolldownModuleTransformInfo } from '../../shared/types'
+import type { ModuleBuildMetrics, PluginBuildMetrics, RolldownModuleLoadInfo, RolldownModuleTransformInfo, RolldownResolveInfo } from '../../shared/types'
+import type { IndexedHookCall, LineLocation, ModuleEventIndex, PendingHookCallStart, RolldownLogCacheState } from './log-cache'
 import { Buffer } from 'node:buffer'
+import { createHash } from 'node:crypto'
 import fs from 'node:fs'
 import { parseToEvent } from '@rolldown/debug'
 import { logger } from '../diagnostics'
 import { getContentByteSize } from '../utils/format'
 import { getContentRef, RolldownEventsManager } from './events-manager'
+import { RolldownLogCache } from './log-cache'
 
 const readers: Map<string, RolldownEventsReader> = new Map()
 const MAX_READERS = 32
 const MAX_MODULE_METRICS_CACHE = 32
 const MAX_MODULE_METRICS_CACHE_BYTES = 64 * 1024 * 1024
+const READ_STREAM_HIGH_WATER_MARK = 1024 * 1024
 const LINE_FEED = '\n'.charCodeAt(0)
 const CARRIAGE_RETURN = '\r'.charCodeAt(0)
 const ACTION_PREVIEW_BYTES = 512
@@ -31,26 +35,6 @@ interface DeferredContent {
   ref: string | null
 }
 
-interface LineLocation {
-  offset: number
-  length: number
-}
-
-interface IndexedTransform {
-  start: LineLocation
-  end: LineLocation
-}
-
-interface ModuleEventIndex {
-  loadEnds: Map<string, LineLocation>
-  transforms: Map<string, IndexedTransform>
-}
-
-interface PendingTransformStart {
-  module: string
-  location: LineLocation
-}
-
 interface ModuleMetricsCacheEntry {
   metrics: ModuleBuildMetrics
   bytes: number
@@ -115,6 +99,10 @@ function getContentCacheBytes(content: string | null | undefined) {
   return content ? getContentByteSize(content) : 0
 }
 
+function getContentHash(content: string | null | undefined) {
+  return createHash('sha1').update(content ?? '').digest('hex')
+}
+
 function getModuleBuildMetricsCacheBytes(metrics: ModuleBuildMetrics) {
   return metrics.loads.reduce((total, load) => total + getContentCacheBytes(load.content), 0)
     + metrics.transforms.reduce((total, transform) => total
@@ -122,6 +110,10 @@ function getModuleBuildMetricsCacheBytes(metrics: ModuleBuildMetrics) {
       + getContentCacheBytes(transform.content_to), 0)
 }
 
+function isPromiseLike<T>(value: T | Promise<T>): value is Promise<T> {
+  return !!value && typeof (value as Promise<T>).then === 'function'
+}
+
 function stripLineEnd(line: Buffer) {
   if (line.at(-1) === CARRIAGE_RETURN)
     return line.subarray(0, -1).toString('utf8')
@@ -198,10 +190,11 @@ export class RolldownEventsReader {
   manager = new RolldownEventsManager()
   meta: SessionMeta | undefined
   private pendingRead: Promise<void> | undefined
+  private pendingSummaryRead: Promise<void> | undefined
   private lineNumber: number = 0
   private moduleEventIndex: Map<string, ModuleEventIndex> = new Map()
   private stringRefIndex: Map<string, LineLocation> = new Map()
-  private pendingTransformStarts: Map<string, PendingTransformStart> = new Map()
+  private pendingHookCallStarts: Map<string, PendingHookCallStart> = new Map()
   private moduleMetricsCache: Map<string, ModuleMetricsCacheEntry> = new Map()
   private moduleMetricsCacheBytes: number = 0
   private pendingModuleMetrics: Map<string, Promise<ModuleBuildMetrics>> = new Map()
@@ -209,11 +202,18 @@ export class RolldownEventsReader {
   private assetsHydrated = false
   private pendingPackageSummaryRead: Promise<void> | undefined
   private packageSummaryTimestamp: number = 0
+  private summaryOnly = false
+  private packageSummaryOnly = false
+  private metricsSummaryOnly = false
+  private logCache: RolldownLogCache
 
   private constructor(
     readonly filepath: string,
     private readonly cacheKey: string = filepath,
   ) {
+    this.logCache = new RolldownLogCache(filepath, {
+      completeSession: cacheKey === filepath,
+    })
   }
 
   static get(filepath: string, cacheKey: string = filepath) {
@@ -229,20 +229,56 @@ export class RolldownEventsReader {
     return reader
   }
 
+  static peek(filepath: string, cacheKey: string = filepath) {
+    return readers.get(cacheKey)
+  }
+
   async read() {
     if (this.pendingRead) {
       return this.pendingRead
     }
 
+    if (this.pendingSummaryRead)
+      await this.pendingSummaryRead
+
     this.pendingRead = this.readChanges().finally(() => {
       this.pendingRead = undefined
     })
     return this.pendingRead
   }
 
+  async readSummary() {
+    if (this.pendingRead)
+      return this.pendingRead
+
+    if (this.pendingSummaryRead)
+      return this.pendingSummaryRead
+
+    this.pendingSummaryRead = this.readSummaryChanges().finally(() => {
+      this.pendingSummaryRead = undefined
+    })
+    return this.pendingSummaryRead
+  }
+
   private async readChanges() {
-    const { mtime, size } = await fs.promises.stat(this.filepath)
-    if (mtime.getTime() <= this.lastTimestamp) {
+    const stat = await fs.promises.stat(this.filepath)
+    const mtime = stat.mtime.getTime()
+
+    if (this.summaryOnly || this.packageSummaryOnly)
+      this.resetReadState()
+
+    if (await this.logCache.restoreCompleteSession(stat, this.createLogCacheState())) {
+      this.clearModuleMetricsCache()
+      this.pendingModuleMetrics.clear()
+      this.summaryOnly = false
+      this.packageSummaryOnly = false
+      this.assetsHydrated = false
+      return
+    }
+
+    if (mtime <= this.lastTimestamp) {
+      if (this.hasCompleteSession() && this.logCache.shouldWriteCompleteSession())
+        await this.logCache.writeCompleteSession(stat, this.createLogCacheState())
       return
     }
 
@@ -261,9 +297,62 @@ export class RolldownEventsReader {
     if (changed) {
       this.clearModuleMetricsCache()
       this.pendingModuleMetrics.clear()
+      this.logCache.resetCompleteSessionWriteAttempt()
     }
-    this.lastTimestamp = mtime.getTime()
-    this.lastBytes = size
+    this.lastTimestamp = mtime
+    this.lastBytes = stat.size
+    this.metricsSummaryOnly = false
+
+    await this.logCache.writeCompleteSession(stat, this.createLogCacheState())
+  }
+
+  private async readSummaryChanges() {
+    const stat = await fs.promises.stat(this.filepath)
+    const mtime = stat.mtime.getTime()
+
+    if (this.manager.eventCount && mtime <= this.lastTimestamp) {
+      if (this.logCache.shouldWriteSummary())
+        await this.logCache.writeSummary(stat, this.createLogCacheState())
+      return
+    }
+
+    const restoredSummary = await this.logCache.restoreSummary(stat, this.createLogCacheState())
+    if (restoredSummary) {
+      this.clearModuleMetricsCache()
+      this.pendingModuleMetrics.clear()
+      this.summaryOnly = restoredSummary !== 'complete'
+      this.packageSummaryOnly = false
+      this.assetsHydrated = false
+      return
+    }
+
+    if (this.manager.eventCount || this.lastBytes)
+      this.resetReadState()
+
+    let changed = false
+    await this.readEventLines(0, (event, location) => {
+      changed = true
+      if (event.action === 'SessionMeta') {
+        this.meta = event as SessionMeta
+      }
+      this.manager.handleEvent(event)
+      this.indexEvent(event, location)
+    }, {
+      skipAction: 'AssetsReady',
+      onSkippedLine: line => this.recordAssetsReadyLocation(line),
+    })
+    if (changed) {
+      this.clearModuleMetricsCache()
+      this.pendingModuleMetrics.clear()
+      this.logCache.resetSummaryWriteAttempt()
+    }
+    this.lastTimestamp = mtime
+    this.lastBytes = stat.size
+    this.summaryOnly = false
+    this.packageSummaryOnly = false
+    this.metricsSummaryOnly = false
+
+    await this.logCache.writeSummary(stat, this.createLogCacheState())
   }
 
   private async readEventLines(
@@ -273,6 +362,7 @@ export class RolldownEventsReader {
   ) {
     const stream = fs.createReadStream(this.filepath, {
       start,
+      highWaterMark: READ_STREAM_HIGH_WATER_MARK,
     })
     let absoluteOffset = start
     let lineStartOffset = start
@@ -289,7 +379,10 @@ export class RolldownEventsReader {
         return
 
       try {
-        await processor(parseToEvent(text), location)
+        const event = parseToEvent(text)
+        const result = processor(event, location)
+        if (isPromiseLike(result))
+          await result
       }
       catch (e) {
         const preview = text.length > 256 ? `${text.slice(0, 256)}...` : text
@@ -361,9 +454,11 @@ export class RolldownEventsReader {
           processSkippedLine(location)
         }
         else {
-          const line = partsLength
-            ? Buffer.concat([...parts, segment], partsLength + segment.length)
-            : segment
+          let line = segment
+          if (partsLength) {
+            parts.push(segment)
+            line = Buffer.concat(parts, partsLength + segment.length)
+          }
           await processLine(line, location)
         }
 
@@ -436,10 +531,29 @@ export class RolldownEventsReader {
     return this.pendingPackageSummaryRead
   }
 
+  async ensurePackageSummaryCache() {
+    const stat = await fs.promises.stat(this.filepath)
+    this.packageSummaryTimestamp = stat.mtime.getTime()
+    if (this.logCache.shouldWritePackageSummary())
+      await this.logCache.writePackageSummary(stat, this.createLogCacheState())
+  }
+
   private async readPackageSummaryChanges() {
-    const { mtime } = await fs.promises.stat(this.filepath)
-    if (mtime.getTime() <= this.packageSummaryTimestamp)
+    const stat = await fs.promises.stat(this.filepath)
+    const mtime = stat.mtime.getTime()
+    if (mtime <= this.packageSummaryTimestamp) {
+      if (this.packageSummaryOnly && this.logCache.shouldWritePackageSummary())
+        await this.logCache.writePackageSummary(stat, this.createLogCacheState())
+      return
+    }
+
+    if (await this.logCache.restorePackageSummary(stat, this.createLogCacheState())) {
+      this.clearModuleMetricsCache()
+      this.pendingModuleMetrics.clear()
+      this.packageSummaryOnly = true
+      this.summaryOnly = false
       return
+    }
 
     this.disposeData()
 
@@ -474,7 +588,12 @@ export class RolldownEventsReader {
         module.build_metrics = metrics
     }
 
-    this.packageSummaryTimestamp = mtime.getTime()
+    this.packageSummaryTimestamp = mtime
+    this.packageSummaryOnly = true
+    this.summaryOnly = false
+    this.logCache.resetPackageSummaryWriteAttempt()
+
+    await this.logCache.writePackageSummary(stat, this.createLogCacheState())
   }
 
   private recordPackageSummarySkippedLine(line: SkippedEventLine, sourceRefSizes: Map<string, number>) {
@@ -534,7 +653,8 @@ export class RolldownEventsReader {
     let index = this.moduleEventIndex.get(module)
     if (!index) {
       index = {
-        loadEnds: new Map(),
+        resolveIds: new Map(),
+        loads: new Map(),
         transforms: new Map(),
       }
       this.moduleEventIndex.set(module, index)
@@ -548,13 +668,53 @@ export class RolldownEventsReader {
       return
     }
 
+    if (event.action === 'HookResolveIdCallStart' && event.call_id) {
+      this.pendingHookCallStarts.set(event.call_id, {
+        location,
+      })
+      return
+    }
+
+    if (event.action === 'HookResolveIdCallEnd' && event.call_id) {
+      const start = this.pendingHookCallStarts.get(event.call_id)
+      this.pendingHookCallStarts.delete(event.call_id)
+      if (!start || !event.event_id || !event.resolved_id)
+        return
+
+      this.getModuleEventIndex(event.resolved_id).resolveIds.set(event.event_id, {
+        start: start.location,
+        end: location,
+      })
+      return
+    }
+
+    if (event.action === 'HookLoadCallStart' && event.call_id && event.module_id) {
+      this.pendingHookCallStarts.set(event.call_id, {
+        module: event.module_id,
+        location,
+      })
+      return
+    }
+
     if (event.action === 'HookLoadCallEnd' && event.module_id && event.event_id) {
-      this.getModuleEventIndex(event.module_id).loadEnds.set(event.event_id, location)
+      const start = event.call_id
+        ? this.pendingHookCallStarts.get(event.call_id)
+        : undefined
+      if (event.call_id)
+        this.pendingHookCallStarts.delete(event.call_id)
+
+      if (!start)
+        return
+
+      this.getModuleEventIndex(event.module_id).loads.set(event.event_id, {
+        start: start.location,
+        end: location,
+      })
       return
     }
 
     if (event.action === 'HookTransformCallStart' && event.call_id && event.module_id) {
-      this.pendingTransformStarts.set(event.call_id, {
+      this.pendingHookCallStarts.set(event.call_id, {
         module: event.module_id,
         location,
       })
@@ -562,8 +722,8 @@ export class RolldownEventsReader {
     }
 
     if (event.action === 'HookTransformCallEnd' && event.call_id) {
-      const start = this.pendingTransformStarts.get(event.call_id)
-      this.pendingTransformStarts.delete(event.call_id)
+      const start = this.pendingHookCallStarts.get(event.call_id)
+      this.pendingHookCallStarts.delete(event.call_id)
       if (!start)
         return
 
@@ -578,7 +738,7 @@ export class RolldownEventsReader {
     }
 
     if (event.action === 'ModuleGraphReady') {
-      this.pendingTransformStarts.clear()
+      this.pendingHookCallStarts.clear()
     }
   }
 
@@ -651,6 +811,14 @@ export class RolldownEventsReader {
       return cloneModuleBuildMetrics(cached.metrics)
     }
 
+    if (this.metricsSummaryOnly) {
+      const metrics = await this.hydrateModuleBuildMetricsFromIndex(module)
+      if (metrics) {
+        this.setCachedModuleBuildMetrics(module, metrics)
+        return cloneModuleBuildMetrics(metrics)
+      }
+    }
+
     const pending = this.pendingModuleMetrics.get(module)
     if (pending)
       return cloneModuleBuildMetrics(await pending)
@@ -667,6 +835,72 @@ export class RolldownEventsReader {
     }
   }
 
+  async hydratePluginBuildMetrics(pluginId: number) {
+    await this.read()
+
+    let metrics = this.manager.plugin_build_metrics.get(pluginId)
+    if (!metrics && this.metricsSummaryOnly) {
+      metrics = await this.hydratePluginBuildMetricsFromIndex(pluginId)
+      if (metrics)
+        this.manager.plugin_build_metrics.set(pluginId, metrics)
+    }
+
+    if (!metrics)
+      return
+
+    const transformCalls = metrics.calls.filter(call => call.type === 'transform' && call.unchanged == null)
+    if (!transformCalls.length)
+      return
+
+    const refs = new Set<string>()
+    const transformEventIndexes: Array<number | undefined> = []
+    const locations: LineLocation[] = []
+
+    for (const call of transformCalls) {
+      const location = this.moduleEventIndex.get(call.module)?.transforms.get(call.id)
+      if (!location) {
+        transformEventIndexes.push(undefined)
+        continue
+      }
+      transformEventIndexes.push(locations.length)
+      locations.push(location.start, location.end)
+    }
+
+    const events = await this.readEventsAt(locations)
+    const contents = transformCalls.map((call, index) => {
+      const eventIndex = transformEventIndexes[index]
+      if (eventIndex == null) {
+        return {
+          call,
+          content_from: undefined,
+          content_to: undefined,
+        }
+      }
+      const start = events[eventIndex]
+      const end = events[eventIndex + 1]
+      return {
+        call,
+        content_from: start?.action === 'HookTransformCallStart'
+          ? getDeferredContent(start, refs)
+          : { value: null, ref: null },
+        content_to: end?.action === 'HookTransformCallEnd'
+          ? getDeferredContent(end, refs)
+          : { value: null, ref: null },
+      }
+    })
+
+    const refValues = await this.readStringRefs(refs)
+    for (const item of contents) {
+      if (!item.content_from || !item.content_to) {
+        item.call.unchanged = false
+        continue
+      }
+      const contentFrom = resolveDeferredContent(item.content_from, refValues)
+      const contentTo = resolveDeferredContent(item.content_to, refValues)
+      item.call.unchanged = getContentHash(contentFrom) === getContentHash(contentTo)
+    }
+  }
+
   private clearModuleMetricsCache() {
     this.moduleMetricsCache.clear()
     this.moduleMetricsCacheBytes = 0
@@ -700,6 +934,173 @@ export class RolldownEventsReader {
     }
   }
 
+  private async readIndexedHookEvents(calls: Array<[string, IndexedHookCall]>) {
+    const locations = calls.flatMap(([, call]) => [call.start, call.end])
+    const events = await this.readEventsAt(locations)
+    return calls.map(([id], index) => ({
+      id,
+      start: events[index * 2],
+      end: events[index * 2 + 1],
+    }))
+  }
+
+  private async hydrateModuleBuildMetricsFromIndex(module: string): Promise<ModuleBuildMetrics | undefined> {
+    const index = this.moduleEventIndex.get(module)
+    if (!index)
+      return undefined
+
+    const [resolveEvents, loadEvents, transformEvents] = await Promise.all([
+      this.readIndexedHookEvents(Array.from(index.resolveIds.entries())),
+      this.readIndexedHookEvents(Array.from(index.loads.entries())),
+      this.readIndexedHookEvents(Array.from(index.transforms.entries())),
+    ])
+
+    const refs = new Set<string>()
+    const resolve_ids: RolldownResolveInfo[] = []
+    for (const item of resolveEvents) {
+      const start = item.start
+      const end = item.end
+      if (start?.action !== 'HookResolveIdCallStart' || end?.action !== 'HookResolveIdCallEnd')
+        continue
+
+      resolve_ids.push({
+        type: 'resolve',
+        id: item.id,
+        plugin_name: end.plugin_name,
+        plugin_id: end.plugin_id,
+        importer: start.importer,
+        module_request: start.module_request,
+        import_kind: start.import_kind,
+        resolved_id: end.resolved_id,
+        timestamp_start: +start.timestamp,
+        timestamp_end: +end.timestamp,
+        duration: +end.timestamp - +start.timestamp,
+      })
+    }
+
+    const loads: Array<Omit<RolldownModuleLoadInfo, 'content'> & { content: DeferredContent }> = []
+    for (const item of loadEvents) {
+      const start = item.start
+      const end = item.end
+      if (start?.action !== 'HookLoadCallStart' || end?.action !== 'HookLoadCallEnd')
+        continue
+
+      loads.push({
+        type: 'load',
+        id: item.id,
+        plugin_name: end.plugin_name,
+        plugin_id: end.plugin_id,
+        content: getDeferredContent(end, refs),
+        timestamp_start: +start.timestamp,
+        timestamp_end: +end.timestamp,
+        duration: +end.timestamp - +start.timestamp,
+      })
+    }
+
+    const transforms: Array<Omit<RolldownModuleTransformInfo, 'content_from' | 'content_to' | 'diff_added' | 'diff_removed'> & {
+      content_from: DeferredContent
+      content_to: DeferredContent
+      source_code_size: number
+      transformed_code_size: number
+    }> = []
+    for (const item of transformEvents) {
+      const start = item.start
+      const end = item.end
+      if (start?.action !== 'HookTransformCallStart' || end?.action !== 'HookTransformCallEnd')
+        continue
+
+      transforms.push({
+        type: 'transform',
+        id: item.id,
+        plugin_name: end.plugin_name,
+        plugin_id: end.plugin_id,
+        content_from: getDeferredContent(start, refs),
+        content_to: getDeferredContent(end, refs),
+        timestamp_start: +start.timestamp,
+        timestamp_end: +end.timestamp,
+        duration: +end.timestamp - +start.timestamp,
+        source_code_size: 0,
+        transformed_code_size: 0,
+      })
+    }
+
+    const refValues = await this.readStringRefs(refs)
+
+    return {
+      resolve_ids,
+      loads: loads.map(load => ({
+        ...load,
+        content: resolveDeferredContent(load.content, refValues),
+      })),
+      transforms: transforms.map((transform) => {
+        const content_from = resolveDeferredContent(transform.content_from, refValues)
+        const content_to = resolveDeferredContent(transform.content_to, refValues)
+        return {
+          ...transform,
+          content_from,
+          content_to,
+          source_code_size: getContentByteSize(content_from ?? ''),
+          transformed_code_size: getContentByteSize(content_to ?? ''),
+        }
+      }),
+    }
+  }
+
+  private async hydratePluginBuildMetricsFromIndex(pluginId: number): Promise<PluginBuildMetrics | undefined> {
+    const calls: Array<{
+      module: string
+      type: 'resolve' | 'load' | 'transform'
+      id: string
+      location: IndexedHookCall
+    }> = []
+
+    for (const [module, index] of this.moduleEventIndex) {
+      for (const [id, location] of index.resolveIds)
+        calls.push({ module, type: 'resolve', id, location })
+      for (const [id, location] of index.loads)
+        calls.push({ module, type: 'load', id, location })
+      for (const [id, location] of index.transforms)
+        calls.push({ module, type: 'transform', id, location })
+    }
+
+    const events = await this.readIndexedHookEvents(calls.map(call => [call.id, call.location]))
+    const metrics: PluginBuildMetrics = {
+      plugin_id: pluginId,
+      plugin_name: '',
+      calls: [],
+    }
+
+    for (const [index, item] of events.entries()) {
+      const call = calls[index]!
+      const start = item.start
+      const end = item.end
+      if (!start || !end || !('plugin_id' in end) || end.plugin_id !== pluginId)
+        continue
+
+      const timestamp_start = 'timestamp' in start ? +start.timestamp : 0
+      const timestamp_end = 'timestamp' in end ? +end.timestamp : 0
+      metrics.plugin_name = end.plugin_name
+      metrics.calls.push({
+        type: call.type,
+        id: call.id,
+        duration: timestamp_end - timestamp_start,
+        plugin_id: pluginId,
+        plugin_name: end.plugin_name,
+        module: call.type === 'resolve' && start.action === 'HookResolveIdCallStart'
+          ? start.module_request
+          : call.module,
+        timestamp_start,
+        timestamp_end,
+        unchanged: call.type === 'load' && end.action === 'HookLoadCallEnd'
+          ? !end.content
+          : undefined,
+      })
+    }
+
+    metrics.calls.sort((a, b) => a.timestamp_start - b.timestamp_start)
+    return metrics.calls.length ? metrics : undefined
+  }
+
   private async hydrateModuleBuildMetrics(module: string): Promise<ModuleBuildMetrics> {
     const summary = this.manager.module_build_metrics.get(module) ?? {
       resolve_ids: [],
@@ -711,7 +1112,7 @@ export class RolldownEventsReader {
     const loadEventIndexes: Array<number | undefined> = []
     const loadLocations: LineLocation[] = []
     for (const load of summary.loads) {
-      const location = index?.loadEnds.get(load.id)
+      const location = index?.loads.get(load.id)?.end
       if (!location) {
         loadEventIndexes.push(undefined)
         continue
@@ -804,7 +1205,87 @@ export class RolldownEventsReader {
   }
 
   hasPendingRead() {
-    return !!this.pendingRead || !!this.pendingPackageSummaryRead
+    return !!this.pendingRead || !!this.pendingSummaryRead || !!this.pendingPackageSummaryRead
+  }
+
+  hasReadData() {
+    return this.lastBytes > 0 || this.manager.eventCount > 0
+  }
+
+  private createLogCacheState(): RolldownLogCacheState {
+    return Object.defineProperties({} as RolldownLogCacheState, {
+      lastBytes: {
+        get: () => this.lastBytes,
+        set: (value: number) => {
+          this.lastBytes = value
+        },
+      },
+      lastTimestamp: {
+        get: () => this.lastTimestamp,
+        set: (value: number) => {
+          this.lastTimestamp = value
+        },
+      },
+      lineNumber: {
+        get: () => this.lineNumber,
+        set: (value: number) => {
+          this.lineNumber = value
+        },
+      },
+      moduleEventIndex: {
+        get: () => this.moduleEventIndex,
+        set: (value: Map<string, ModuleEventIndex>) => {
+          this.moduleEventIndex = value
+        },
+      },
+      stringRefIndex: {
+        get: () => this.stringRefIndex,
+        set: (value: Map<string, LineLocation>) => {
+          this.stringRefIndex = value
+        },
+      },
+      pendingHookCallStarts: {
+        get: () => this.pendingHookCallStarts,
+        set: (value: Map<string, PendingHookCallStart>) => {
+          this.pendingHookCallStarts = value
+        },
+      },
+      assetsReadyLocations: {
+        get: () => this.assetsReadyLocations,
+        set: (value: LineLocation[]) => {
+          this.assetsReadyLocations = value
+        },
+      },
+      meta: {
+        get: () => this.meta,
+        set: (value: SessionMeta | undefined) => {
+          this.meta = value
+        },
+      },
+      manager: {
+        get: () => this.manager,
+      },
+      packageSummaryTimestamp: {
+        get: () => this.packageSummaryTimestamp,
+        set: (value: number) => {
+          this.packageSummaryTimestamp = value
+        },
+      },
+      metricsSummaryOnly: {
+        get: () => this.metricsSummaryOnly,
+        set: (value: boolean) => {
+          this.metricsSummaryOnly = value
+        },
+      },
+    })
+  }
+
+  hasCompleteSession() {
+    return this.hasReadData() && !this.summaryOnly && !this.packageSummaryOnly
+  }
+
+  isReadingCompleteSession() {
+    return !!this.pendingRead
   }
 
   dispose() {
@@ -812,16 +1293,27 @@ export class RolldownEventsReader {
     this.disposeData()
   }
 
+  private resetReadState() {
+    this.lastBytes = 0
+    this.lastTimestamp = 0
+    this.disposeData()
+  }
+
   private disposeData() {
     this.manager.dispose()
     this.lineNumber = 0
     this.moduleEventIndex.clear()
     this.stringRefIndex.clear()
-    this.pendingTransformStarts.clear()
+    this.pendingHookCallStarts.clear()
     this.clearModuleMetricsCache()
     this.pendingModuleMetrics.clear()
     this.assetsReadyLocations = []
     this.assetsHydrated = false
+    this.summaryOnly = false
+    this.packageSummaryOnly = false
+    this.metricsSummaryOnly = false
+    this.logCache.resetCompleteSessionWriteAttempt()
+    this.logCache.resetPackageSummaryWriteAttempt()
   }
 
   [Symbol.dispose]() {
diff --git a/packages/rolldown/src/node/rolldown/log-cache.ts b/packages/rolldown/src/node/rolldown/log-cache.ts
new file mode 100644
index 00000000..c1e86e41
--- /dev/null
+++ b/packages/rolldown/src/node/rolldown/log-cache.ts
@@ -0,0 +1,537 @@
+import type { SessionMeta } from '@rolldown/debug'
+import type { Stats } from 'node:fs'
+import type { ModuleBuildMetrics, PluginBuildMetrics } from '../../shared/types'
+import type { RolldownEventsManager } from './events-manager'
+import fs from 'node:fs/promises'
+import { basename, dirname, join } from 'pathe'
+
+export const ROLLDOWN_LOG_CACHE_DIR = '.cache'
+export const ROLLDOWN_LOG_SESSION_SUMMARY_CACHE_FILENAME = 'session-summary.json'
+export const ROLLDOWN_LOG_READER_INDEX_CACHE_FILENAME = 'reader-index.json'
+export const ROLLDOWN_LOG_PACKAGE_SUMMARY_CACHE_FILENAME = 'package-summary.json'
+export const ROLLDOWN_LOG_PLUGIN_SUMMARY_CACHE_FILENAME = 'plugin-summary.json'
+export const ROLLDOWN_LOG_MODULE_METRICS_SUMMARY_CACHE_FILENAME = 'module-metrics-summary.json'
+const ROLLDOWN_LOG_CACHE_VERSION = 1
+
+type ManagerSnapshot = ReturnType<RolldownEventsManager['snapshot']>
+
+export interface LineLocation {
+  offset: number
+  length: number
+}
+
+export interface IndexedHookCall {
+  start: LineLocation
+  end: LineLocation
+}
+
+export interface ModuleEventIndex {
+  resolveIds: Map<string, IndexedHookCall>
+  loads: Map<string, IndexedHookCall>
+  transforms: Map<string, IndexedHookCall>
+}
+
+export interface PendingHookCallStart {
+  module?: string
+  location: LineLocation
+}
+
+export interface RolldownLogCacheState {
+  lastBytes: number
+  lastTimestamp: number
+  lineNumber: number
+  moduleEventIndex: Map<string, ModuleEventIndex>
+  stringRefIndex: Map<string, LineLocation>
+  pendingHookCallStarts: Map<string, PendingHookCallStart>
+  assetsReadyLocations: LineLocation[]
+  meta: SessionMeta | undefined
+  readonly manager: RolldownEventsManager
+  packageSummaryTimestamp: number
+  metricsSummaryOnly: boolean
+}
+
+interface RolldownLogCacheFileContent<T> {
+  version: number
+  log: {
+    size: number
+    mtime: number
+  }
+  data: T
+}
+
+interface RolldownSessionSummaryCacheSnapshot {
+  reader: {
+    lastBytes: number
+    lastTimestamp: number
+    lineNumber: number
+  }
+  meta: SessionMeta | undefined
+  manager: Pick<ManagerSnapshot, 'eventCount' | 'lastEvent' | 'chunks' | 'modules' | 'build_start_time' | 'build_end_time'>
+}
+
+interface RolldownModuleMetricsSummaryCacheSnapshot {
+  metrics: Array<[string, ModuleBuildMetrics]>
+}
+
+interface PluginMetricSummary {
+  count: number
+  duration: number
+}
+
+interface PluginBuildMetricsSummary {
+  plugin_id: number
+  plugin_name: string
+  total: PluginMetricSummary
+  resolve: PluginMetricSummary
+  load: PluginMetricSummary
+  transform: PluginMetricSummary
+}
+
+interface RolldownPluginSummaryCacheSnapshot {
+  plugins: Array<[number, PluginBuildMetricsSummary]>
+}
+
+interface RolldownReaderIndexCacheSnapshot {
+  reader: {
+    lastBytes: number
+    lastTimestamp: number
+    moduleEventIndex: Array<[string, {
+      resolveIds: Array<[string, IndexedHookCall]>
+      loads: Array<[string, IndexedHookCall]>
+      transforms: Array<[string, IndexedHookCall]>
+    }]>
+    stringRefIndex: Array<[string, LineLocation]>
+    pendingHookCallStarts: Array<[string, PendingHookCallStart]>
+    assetsReadyLocations: LineLocation[]
+  }
+}
+
+interface RolldownPackageSummaryCacheSnapshot {
+  packageSummaryTimestamp: number
+  manager: ManagerSnapshot
+}
+
+class RolldownLogCacheFile<T> {
+  private constructor(
+    readonly filepath: string,
+  ) {
+  }
+
+  static forLogFile<T>(logFilepath: string, filename: string) {
+    if (basename(logFilepath) !== 'logs.json')
+      return undefined
+
+    return new RolldownLogCacheFile<T>(join(dirname(logFilepath), ROLLDOWN_LOG_CACHE_DIR, filename))
+  }
+
+  async read(stat: Stats): Promise<T | undefined> {
+    try {
+      const cache = JSON.parse(await fs.readFile(this.filepath, 'utf8')) as RolldownLogCacheFileContent<T>
+      if (!this.matches(stat, cache))
+        return undefined
+
+      return cache.data
+    }
+    catch {
+      return undefined
+    }
+  }
+
+  async write(stat: Stats, data: T) {
+    try {
+      const temporaryFilepath = `${this.filepath}.tmp`
+      await fs.mkdir(dirname(this.filepath), { recursive: true })
+      await fs.writeFile(temporaryFilepath, JSON.stringify(this.createFile(stat, data)), 'utf8')
+      await fs.rename(temporaryFilepath, this.filepath)
+    }
+    catch {
+      // The cache is best-effort. The reader can always rebuild from logs.json.
+    }
+  }
+
+  private createFile(stat: Stats, data: T): RolldownLogCacheFileContent<T> {
+    return {
+      version: ROLLDOWN_LOG_CACHE_VERSION,
+      log: {
+        size: stat.size,
+        mtime: stat.mtime.getTime(),
+      },
+      data,
+    }
+  }
+
+  private matches(stat: Stats, cache: RolldownLogCacheFileContent<T>) {
+    return cache.version === ROLLDOWN_LOG_CACHE_VERSION
+      && cache.log.size === stat.size
+      && cache.log.mtime === stat.mtime.getTime()
+  }
+}
+
+function createMetricSummary(): PluginMetricSummary {
+  return {
+    count: 0,
+    duration: 0,
+  }
+}
+
+function addMetricSummary(summary: PluginMetricSummary, duration: number) {
+  summary.count += 1
+  summary.duration += duration
+}
+
+function compactModuleBuildMetrics(metrics: ModuleBuildMetrics): ModuleBuildMetrics {
+  const resolveDuration = metrics.resolve_ids.reduce((total, item) => total + item.duration, 0)
+  const loadDuration = metrics.loads.reduce((total, item) => total + item.duration, 0)
+  const transformDuration = metrics.transforms.reduce((total, item) => total + item.duration, 0)
+
+  const resolve_ids = metrics.resolve_ids.length
+    ? [{
+        ...metrics.resolve_ids[0]!,
+        id: '',
+        duration: resolveDuration,
+        timestamp_start: metrics.resolve_ids[0]!.timestamp_start,
+        timestamp_end: metrics.resolve_ids.at(-1)!.timestamp_end,
+      }]
+    : []
+
+  const loads = metrics.loads.length
+    ? [{
+        ...metrics.loads[0]!,
+        id: '',
+        content: null,
+        duration: loadDuration,
+        timestamp_start: metrics.loads[0]!.timestamp_start,
+        timestamp_end: metrics.loads.at(-1)!.timestamp_end,
+      }]
+    : []
+
+  const transformsByPlugin = new Map<number, ModuleBuildMetrics['transforms'][number]>()
+  let finalTransformedCodeSize = 0
+  for (const transform of metrics.transforms) {
+    if (transform.transformed_code_size)
+      finalTransformedCodeSize = transform.transformed_code_size
+
+    if (!transform.transformed_code_size || transform.source_code_size === transform.transformed_code_size)
+      continue
+
+    const item = transformsByPlugin.get(transform.plugin_id)
+    if (item) {
+      item.duration += transform.duration
+      item.timestamp_end = transform.timestamp_end
+      item.transformed_code_size = transform.transformed_code_size
+      continue
+    }
+
+    transformsByPlugin.set(transform.plugin_id, {
+      ...transform,
+      id: '',
+      content_from: null,
+      content_to: null,
+    })
+  }
+
+  const transforms = Array.from(transformsByPlugin.values())
+  const changedDuration = transforms.reduce((total, item) => total + item.duration, 0)
+  const remainingDuration = transformDuration - changedDuration
+  if (remainingDuration > 0 && metrics.transforms.length) {
+    transforms.push({
+      ...metrics.transforms[0]!,
+      id: '',
+      plugin_name: '',
+      plugin_id: 0,
+      content_from: null,
+      content_to: null,
+      source_code_size: 0,
+      transformed_code_size: 0,
+      duration: remainingDuration,
+      timestamp_start: metrics.transforms[0]!.timestamp_start,
+      timestamp_end: metrics.transforms.at(-1)!.timestamp_end,
+    })
+  }
+
+  if (finalTransformedCodeSize && metrics.transforms.length) {
+    transforms.push({
+      ...metrics.transforms.at(-1)!,
+      id: '',
+      plugin_name: '',
+      plugin_id: 0,
+      content_from: null,
+      content_to: null,
+      source_code_size: finalTransformedCodeSize,
+      transformed_code_size: finalTransformedCodeSize,
+      duration: 0,
+    })
+  }
+
+  return {
+    resolve_ids,
+    loads,
+    transforms,
+  }
+}
+
+function createPluginBuildMetricsSummary(metrics: PluginBuildMetrics): PluginBuildMetricsSummary {
+  const summary = {
+    plugin_id: metrics.plugin_id,
+    plugin_name: metrics.plugin_name,
+    total: createMetricSummary(),
+    resolve: createMetricSummary(),
+    load: createMetricSummary(),
+    transform: createMetricSummary(),
+  }
+
+  for (const call of metrics.calls) {
+    addMetricSummary(summary.total, call.duration)
+    if (call.type === 'resolve')
+      addMetricSummary(summary.resolve, call.duration)
+    else if (call.type === 'load')
+      addMetricSummary(summary.load, call.duration)
+    else if (call.type === 'transform')
+      addMetricSummary(summary.transform, call.duration)
+  }
+
+  return summary
+}
+
+export class RolldownLogCache {
+  private sessionSummaryCache: RolldownLogCacheFile<RolldownSessionSummaryCacheSnapshot> | undefined
+  private moduleMetricsSummaryCache: RolldownLogCacheFile<RolldownModuleMetricsSummaryCacheSnapshot> | undefined
+  private pluginSummaryCache: RolldownLogCacheFile<RolldownPluginSummaryCacheSnapshot> | undefined
+  private readerIndexCache: RolldownLogCacheFile<RolldownReaderIndexCacheSnapshot> | undefined
+  private packageSummaryCache: RolldownLogCacheFile<RolldownPackageSummaryCacheSnapshot> | undefined
+  private completeSessionWriteAttempted = false
+  private summaryWriteAttempted = false
+  private packageSummaryWriteAttempted = false
+
+  constructor(logFilepath: string, options: { completeSession: boolean }) {
+    if (options.completeSession) {
+      this.sessionSummaryCache = RolldownLogCacheFile.forLogFile(logFilepath, ROLLDOWN_LOG_SESSION_SUMMARY_CACHE_FILENAME)
+      this.moduleMetricsSummaryCache = RolldownLogCacheFile.forLogFile(logFilepath, ROLLDOWN_LOG_MODULE_METRICS_SUMMARY_CACHE_FILENAME)
+      this.pluginSummaryCache = RolldownLogCacheFile.forLogFile(logFilepath, ROLLDOWN_LOG_PLUGIN_SUMMARY_CACHE_FILENAME)
+      this.readerIndexCache = RolldownLogCacheFile.forLogFile(logFilepath, ROLLDOWN_LOG_READER_INDEX_CACHE_FILENAME)
+    }
+    this.packageSummaryCache = RolldownLogCacheFile.forLogFile(logFilepath, ROLLDOWN_LOG_PACKAGE_SUMMARY_CACHE_FILENAME)
+  }
+
+  shouldWriteCompleteSession() {
+    return !this.completeSessionWriteAttempted
+  }
+
+  shouldWritePackageSummary() {
+    return !this.packageSummaryWriteAttempted
+  }
+
+  shouldWriteSummary() {
+    return !this.summaryWriteAttempted
+  }
+
+  resetCompleteSessionWriteAttempt() {
+    this.completeSessionWriteAttempted = false
+    this.summaryWriteAttempted = false
+  }
+
+  resetSummaryWriteAttempt() {
+    this.summaryWriteAttempted = false
+  }
+
+  resetPackageSummaryWriteAttempt() {
+    this.packageSummaryWriteAttempted = false
+  }
+
+  async restoreCompleteSession(stat: Stats, state: RolldownLogCacheState) {
+    if (state.lastBytes || state.manager.eventCount)
+      return false
+
+    const [sessionSummaryCache, moduleMetricsCache, pluginSummaryCacheExists, indexCache] = await Promise.all([
+      this.sessionSummaryCache?.read(stat),
+      this.moduleMetricsSummaryCache?.read(stat),
+      this.pluginSummaryCache?.read(stat),
+      this.readerIndexCache?.read(stat),
+    ])
+    if (!sessionSummaryCache || !moduleMetricsCache || !pluginSummaryCacheExists || !indexCache)
+      return false
+
+    if (sessionSummaryCache.reader.lastBytes !== stat.size || indexCache.reader.lastBytes !== stat.size)
+      return false
+
+    this.restoreSessionSnapshot(sessionSummaryCache, state, moduleMetricsCache)
+    this.restoreReaderIndexSnapshot(indexCache, state)
+    this.completeSessionWriteAttempted = true
+    this.summaryWriteAttempted = true
+    return true
+  }
+
+  async restoreSummary(stat: Stats, state: RolldownLogCacheState) {
+    if (state.lastBytes || state.manager.eventCount)
+      return false
+
+    const [sessionSummaryCache, moduleMetricsCache, _pluginSummaryCache, indexCache] = await Promise.all([
+      this.sessionSummaryCache?.read(stat),
+      this.moduleMetricsSummaryCache?.read(stat),
+      this.pluginSummaryCache?.read(stat),
+      this.readerIndexCache?.read(stat),
+    ])
+    if (!sessionSummaryCache)
+      return false
+
+    if (sessionSummaryCache.reader.lastBytes !== stat.size)
+      return false
+
+    this.restoreSessionSnapshot(sessionSummaryCache, state, moduleMetricsCache)
+    const hasCompleteCache = !!moduleMetricsCache && !!_pluginSummaryCache && !!indexCache
+    if (indexCache?.reader.lastBytes === stat.size)
+      this.restoreReaderIndexSnapshot(indexCache, state)
+    else
+      this.clearReaderIndexState(state)
+    this.summaryWriteAttempted = true
+    this.completeSessionWriteAttempted = hasCompleteCache
+    return hasCompleteCache ? 'complete' : 'summary'
+  }
+
+  async restorePackageSummary(stat: Stats, state: RolldownLogCacheState) {
+    if (state.manager.eventCount)
+      return false
+
+    const cache = await this.packageSummaryCache?.read(stat)
+    if (!cache)
+      return false
+
+    if (cache.packageSummaryTimestamp !== stat.mtime.getTime())
+      return false
+
+    this.restorePackageSummarySnapshot(cache, state)
+    this.packageSummaryWriteAttempted = true
+    return true
+  }
+
+  async writeCompleteSession(stat: Stats, state: RolldownLogCacheState) {
+    this.completeSessionWriteAttempted = true
+    this.summaryWriteAttempted = true
+    await Promise.all([
+      this.sessionSummaryCache?.write(stat, this.createSessionSummarySnapshot(state)),
+      this.moduleMetricsSummaryCache?.write(stat, this.createModuleMetricsSummarySnapshot(state)),
+      this.pluginSummaryCache?.write(stat, this.createPluginSummarySnapshot(state)),
+      this.readerIndexCache?.write(stat, this.createReaderIndexSnapshot(state)),
+    ])
+  }
+
+  async writeSummary(stat: Stats, state: RolldownLogCacheState) {
+    this.summaryWriteAttempted = true
+    await Promise.all([
+      this.sessionSummaryCache?.write(stat, this.createSessionSummarySnapshot(state)),
+      this.moduleMetricsSummaryCache?.write(stat, this.createModuleMetricsSummarySnapshot(state)),
+      this.pluginSummaryCache?.write(stat, this.createPluginSummarySnapshot(state)),
+      this.readerIndexCache?.write(stat, this.createReaderIndexSnapshot(state)),
+    ])
+  }
+
+  async writePackageSummary(stat: Stats, state: RolldownLogCacheState) {
+    this.packageSummaryWriteAttempted = true
+    await this.packageSummaryCache?.write(stat, this.createPackageSummarySnapshot(state))
+  }
+
+  private createSessionSummarySnapshot(state: RolldownLogCacheState): RolldownSessionSummaryCacheSnapshot {
+    const manager = state.manager.snapshot()
+    return {
+      reader: {
+        lastBytes: state.lastBytes,
+        lastTimestamp: state.lastTimestamp,
+        lineNumber: state.lineNumber,
+      },
+      meta: state.meta,
+      manager: {
+        eventCount: manager.eventCount,
+        lastEvent: manager.lastEvent,
+        chunks: manager.chunks,
+        modules: manager.modules,
+        build_start_time: manager.build_start_time,
+        build_end_time: manager.build_end_time,
+      },
+    }
+  }
+
+  private createModuleMetricsSummarySnapshot(state: RolldownLogCacheState): RolldownModuleMetricsSummaryCacheSnapshot {
+    const manager = state.manager.snapshot()
+    return {
+      metrics: manager.module_build_metrics.map(([module, metrics]) => [module, compactModuleBuildMetrics(metrics)]),
+    }
+  }
+
+  private createPluginSummarySnapshot(state: RolldownLogCacheState): RolldownPluginSummaryCacheSnapshot {
+    const manager = state.manager.snapshot()
+    return {
+      plugins: manager.plugin_build_metrics.map(([pluginId, metrics]) => [pluginId, createPluginBuildMetricsSummary(metrics)]),
+    }
+  }
+
+  private createReaderIndexSnapshot(state: RolldownLogCacheState): RolldownReaderIndexCacheSnapshot {
+    return {
+      reader: {
+        lastBytes: state.lastBytes,
+        lastTimestamp: state.lastTimestamp,
+        moduleEventIndex: Array.from(state.moduleEventIndex.entries()).map(([module, index]) => [module, {
+          resolveIds: Array.from(index.resolveIds.entries()),
+          loads: Array.from(index.loads.entries()),
+          transforms: Array.from(index.transforms.entries()),
+        }]),
+        stringRefIndex: Array.from(state.stringRefIndex.entries()),
+        pendingHookCallStarts: Array.from(state.pendingHookCallStarts.entries()),
+        assetsReadyLocations: state.assetsReadyLocations,
+      },
+    }
+  }
+
+  private createPackageSummarySnapshot(state: RolldownLogCacheState): RolldownPackageSummaryCacheSnapshot {
+    return {
+      packageSummaryTimestamp: state.packageSummaryTimestamp,
+      manager: state.manager.snapshot(),
+    }
+  }
+
+  private restoreSessionSnapshot(
+    session: RolldownSessionSummaryCacheSnapshot,
+    state: RolldownLogCacheState,
+    moduleMetrics?: RolldownModuleMetricsSummaryCacheSnapshot,
+  ) {
+    state.lastBytes = session.reader.lastBytes
+    state.lastTimestamp = session.reader.lastTimestamp
+    state.lineNumber = session.reader.lineNumber
+    state.meta = session.meta
+    state.metricsSummaryOnly = true
+    state.manager.restore({
+      eventCount: session.manager.eventCount,
+      lastEvent: session.manager.lastEvent,
+      chunks: session.manager.chunks,
+      modules: session.manager.modules,
+      source_refs: [],
+      module_build_hook_events: [],
+      module_build_metrics: moduleMetrics?.metrics ?? [],
+      plugin_build_metrics: [],
+      build_start_time: session.manager.build_start_time,
+      build_end_time: session.manager.build_end_time,
+    })
+  }
+
+  private restoreReaderIndexSnapshot(snapshot: RolldownReaderIndexCacheSnapshot, state: RolldownLogCacheState) {
+    state.moduleEventIndex = new Map(snapshot.reader.moduleEventIndex.map(([module, item]) => [module, {
+      resolveIds: new Map(item.resolveIds),
+      loads: new Map(item.loads),
+      transforms: new Map(item.transforms),
+    }]))
+    state.stringRefIndex = new Map(snapshot.reader.stringRefIndex)
+    state.pendingHookCallStarts = new Map(snapshot.reader.pendingHookCallStarts)
+    state.assetsReadyLocations = snapshot.reader.assetsReadyLocations
+  }
+
+  private restorePackageSummarySnapshot(snapshot: RolldownPackageSummaryCacheSnapshot, state: RolldownLogCacheState) {
+    state.manager.restore(snapshot.manager)
+    state.packageSummaryTimestamp = snapshot.packageSummaryTimestamp
+  }
+
+  private clearReaderIndexState(state: RolldownLogCacheState) {
+    state.moduleEventIndex = new Map()
+    state.stringRefIndex = new Map()
+    state.pendingHookCallStarts = new Map()
+    state.assetsReadyLocations = []
+  }
+}
diff --git a/packages/rolldown/src/node/rolldown/logs-manager.ts b/packages/rolldown/src/node/rolldown/logs-manager.ts
index 4ae06c0a..dc914b23 100644
--- a/packages/rolldown/src/node/rolldown/logs-manager.ts
+++ b/packages/rolldown/src/node/rolldown/logs-manager.ts
@@ -55,6 +55,17 @@ export class RolldownLogsManager {
     return reader
   }
 
+  async loadSessionSummary(session: string) {
+    const reader = RolldownEventsReader.get(join(this.dir, session, 'logs.json'))
+    await reader.readSummary()
+    if (!reader.meta) {
+      const metaReader = RolldownEventsReader.get(join(this.dir, session, 'meta.json'))
+      await metaReader.read()
+      reader.meta = metaReader.meta!
+    }
+    return reader
+  }
+
   async loadAssetSession(session: string) {
     const reader = await this.loadSession(session)
     await reader.readAssets()
@@ -63,6 +74,18 @@ export class RolldownLogsManager {
 
   async loadPackageSession(session: string) {
     const filepath = join(this.dir, session, 'logs.json')
+    const loadedReader = RolldownEventsReader.peek(filepath)
+    if (loadedReader?.hasCompleteSession() || loadedReader?.isReadingCompleteSession()) {
+      await loadedReader.read()
+      await loadedReader.ensurePackageSummaryCache()
+      if (!loadedReader.meta) {
+        const metaReader = RolldownEventsReader.get(join(this.dir, session, 'meta.json'))
+        await metaReader.read()
+        loadedReader.meta = metaReader.meta!
+      }
+      return loadedReader
+    }
+
     const reader = RolldownEventsReader.get(filepath, `${filepath}:package-summary`)
     await reader.readPackageSummary()
     if (!reader.meta) {
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-plugin-details.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-plugin-details.ts
index f2b0819a..b6d71aea 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-plugin-details.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-plugin-details.ts
@@ -12,6 +12,7 @@ export const rolldownGetPluginDetails = defineRpcFunction({
     return {
       handler: async ({ session, id }: { session: string, id: string }) => {
         const reader = await manager.loadSession(session)
+        await reader.hydratePluginBuildMetrics(+id)
         const pluginBuildMetrics = reader.manager.plugin_build_metrics.get(+id)!
         if (!pluginBuildMetrics) {
           const plugin = reader.meta!.plugins!.find(p => p.plugin_id === +id)!
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-session-summary.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-summary.ts
index a12e285a..b7a7e7c9 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-session-summary.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-summary.ts
@@ -17,7 +17,7 @@ export const rolldownGetSessionSummary = defineRpcFunction({
     const manager = getLogsManager(context)
     return {
       handler: async ({ session }: { session: string }) => {
-        const reader = await manager.loadSession(session)
+        const reader = await manager.loadSessionSummary(session)
 
         return {
           id: session,