From d31bf20ebcd9347500ace37efee1897a8154ce08 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Fri, 17 Oct 2025 19:23:54 +0800
Subject: [PATCH 1/4] refactor:

---
 .../src/app/components/data/ChunkDetails.vue  | 16 +++++----
 .../components/data/ChunkDetailsLoader.vue    |  2 +-
 .../app/components/display/ChunkImports.vue   | 33 +++++--------------
 packages/vite/src/shared/types/data.ts        | 10 +++++-
 4 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/packages/vite/src/app/components/data/ChunkDetails.vue b/packages/vite/src/app/components/data/ChunkDetails.vue
index a57031a5..cbb3a0bd 100644
--- a/packages/vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/vite/src/app/components/data/ChunkDetails.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import type { Chunk as ChunkInfo } from '@rolldown/debug'
-import type { SessionContext } from '~~/shared/types'
+import type { RolldownChunkImport, SessionContext } from '~~/shared/types'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
   chunk: ChunkInfo
   session: SessionContext
   showModules?: boolean
-  showImports?: boolean
+  showImports?: boolean | RolldownChunkImport[]
 }>(), {
   showModules: true,
   showImports: true,
@@ -26,6 +26,10 @@ const chunkSize = computed(() => props.chunk.modules.reduce((total, moduleId) =>
   const transforms = moduleInfo?.buildMetrics?.transforms
   return transforms?.length ? total + transforms[transforms.length - 1]!.transformed_code_size : total
 }, 0))
+
+const imports = computed(() => {
+  return [] as any[]
+})
 </script>
 
 <template>
@@ -78,11 +82,9 @@ const chunkSize = computed(() => props.chunk.modules.reduce((total, moduleId) =>
       </summary>
       <div flex="~ col gap-1" mt2 ws-nowrap>
         <DisplayChunkImports
-          v-for="(importChunk, index) in chunk.imports"
-          :key="index"
-          :chunk-import="importChunk"
-          :session="session"
-          :importer="chunk"
+          v-for="chunk in imports"
+          :key="chunk.chunk_id"
+          :chunk="chunk"
           hover="bg-active"
           border="~ base rounded" px2 py1 w-full
         />
diff --git a/packages/vite/src/app/components/data/ChunkDetailsLoader.vue b/packages/vite/src/app/components/data/ChunkDetailsLoader.vue
index 5dd66f5b..c84ed920 100644
--- a/packages/vite/src/app/components/data/ChunkDetailsLoader.vue
+++ b/packages/vite/src/app/components/data/ChunkDetailsLoader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SessionContext } from '../../../shared/types/data'
+import type { SessionContext } from '~~/shared/types/data'
 import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
 
diff --git a/packages/vite/src/app/components/display/ChunkImports.vue b/packages/vite/src/app/components/display/ChunkImports.vue
index 7f402974..8885523c 100644
--- a/packages/vite/src/app/components/display/ChunkImports.vue
+++ b/packages/vite/src/app/components/display/ChunkImports.vue
@@ -1,28 +1,12 @@
 <script lang="ts" setup>
-import type { ChunkImport, Chunk as ChunkInfo } from '@rolldown/debug'
-import type { SessionContext } from '../../../shared/types/data'
+import type { RolldownChunkImport } from '~~/shared/types/data'
 import { useRoute } from '#app/composables/router'
-import { useRpc } from '#imports'
-import { useAsyncState } from '@vueuse/core'
 
-const props = defineProps<{
-  chunkImport: ChunkImport
-  session: SessionContext
-  importer: ChunkInfo
+const { chunk } = defineProps<{
+  chunk: RolldownChunkImport
 }>()
 
 const route = useRoute()
-
-const rpc = useRpc()
-const { state: chunk } = useAsyncState(
-  async () => {
-    return await rpc.value!['vite:rolldown:get-chunk-info']?.({
-      session: props.session.id,
-      id: props.chunkImport.chunk_id,
-    })
-  },
-  null,
-)
 </script>
 
 <template>
@@ -30,14 +14,13 @@ const { state: chunk } = useAsyncState(
   <NuxtLink v-if="chunk" flex="~ items-center" :to="{ path: route.path, query: { chunk: chunk.chunk_id } }">
     <!-- Icon, Name, Reason -->
     <div flex="~ gap-2 items-center" :title="`Chunk #${chunk.chunk_id}`">
-      <div v-if="chunkImport.kind === 'import-statement'" i-ph-file-duotone />
-      <div v-if="chunkImport.kind === 'dynamic-import'" i-ph-lightning-duotone />
+      <div v-if="chunk.kind === 'import-statement'" i-ph-file-duotone />
+      <div v-if="chunk.kind === 'dynamic-import'" i-ph-lightning-duotone />
       <div>{{ chunk.name || '[unnamed]' }}</div>
       <DisplayBadge :text="chunk.reason" />
 
       <!-- Import Kind -->
-      <DisplayBadge v-if="chunkImport.kind === 'import-statement'" text="statement" :color="210" />
-      <DisplayBadge v-if="chunkImport.kind === 'dynamic-import'" text="dynamic" :color="30" />
+      <DisplayBadge :text="chunk.kind" />
     </div>
 
     <div flex-auto />
@@ -46,11 +29,11 @@ const { state: chunk } = useAsyncState(
       <span op50 font-mono>#{{ chunk.chunk_id }}</span>
       <div flex="~ gap-1 items-center">
         <div i-ph-file-arrow-up-duotone />
-        {{ chunk.imports.length }}
+        {{ chunk.imports }}
       </div>
       <div flex="~ gap-1 items-center">
         <div i-ph-package-duotone />
-        {{ chunk.modules.length }}
+        {{ chunk.modules }}
       </div>
     </div>
   </NuxtLink>
diff --git a/packages/vite/src/shared/types/data.ts b/packages/vite/src/shared/types/data.ts
index df9f5512..61e6ed0a 100644
--- a/packages/vite/src/shared/types/data.ts
+++ b/packages/vite/src/shared/types/data.ts
@@ -1,4 +1,4 @@
-import type { Asset as AssetInfo, Chunk as ChunkInfo, HookResolveIdCallStart, ModuleImport, PluginItem, SessionMeta } from '@rolldown/debug'
+import type { Asset as AssetInfo, ChunkImport, Chunk as ChunkInfo, HookResolveIdCallStart, ModuleImport, PluginItem, SessionMeta } from '@rolldown/debug'
 
 export type { ModuleImport }
 
@@ -175,3 +175,11 @@ export type RolldownModuleFlowNode
     | RolldownModuleTransformInfo
     | RolldownChunkInfo
     | RolldownAssetInfo
+
+export interface RolldownChunkImport extends ChunkImport {
+  type: 'chunk_import'
+  imports: number
+  modules: number
+  name: ChunkInfo['name']
+  reason: ChunkInfo['reason']
+}

From 92e1945198cb6f9cec0f941e166c4938fd5009d9 Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Fri, 17 Oct 2025 21:46:42 +0800
Subject: [PATCH 2/4] perf:

---
 .../src/app/components/data/ChunkDetails.vue  | 35 ++++++++++++++++---
 .../app/pages/session/[session]/chunks.vue    |  1 +
 packages/vite/src/shared/types/data.ts        |  1 -
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/vite/src/app/components/data/ChunkDetails.vue b/packages/vite/src/app/components/data/ChunkDetails.vue
index cbb3a0bd..58863e4f 100644
--- a/packages/vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/vite/src/app/components/data/ChunkDetails.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { Chunk as ChunkInfo } from '@rolldown/debug'
 import type { RolldownChunkImport, SessionContext } from '~~/shared/types'
+import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
+import { useRpc } from '../../composables/rpc'
 
 const props = withDefaults(defineProps<{
   chunk: ChunkInfo
   session: SessionContext
   showModules?: boolean
-  showImports?: boolean | RolldownChunkImport[]
+  showImports?: boolean
+  chunks?: ChunkInfo[]
 }>(), {
   showModules: true,
   showImports: true,
@@ -27,8 +30,31 @@ const chunkSize = computed(() => props.chunk.modules.reduce((total, moduleId) =>
   return transforms?.length ? total + transforms[transforms.length - 1]!.transformed_code_size : total
 }, 0))
 
-const imports = computed(() => {
-  return [] as any[]
+const rpc = useRpc()
+const { state, isLoading } = useAsyncState(
+  async () => {
+    if (props.chunks)
+      return
+
+    return await rpc.value!['vite:rolldown:get-chunks-graph']?.({
+      session: props.session.id,
+    })
+  },
+  null,
+)
+
+const imports = computed((): RolldownChunkImport[] => {
+  return props.chunk.imports.map((importChunk) => {
+    const chunk = (props.chunks || state.value)?.find(c => c.chunk_id === importChunk.chunk_id)
+
+    return {
+      ...importChunk,
+      name: chunk?.name || '[unnamed]',
+      reason: chunk?.reason || 'common',
+      imports: chunk?.imports.length || 0,
+      modules: chunk?.modules.length || 0,
+    }
+  })
 })
 </script>
 
@@ -80,7 +106,8 @@ const imports = computed(() => {
       <summary op50>
         <span>Imports ({{ chunk.imports.length }})</span>
       </summary>
-      <div flex="~ col gap-1" mt2 ws-nowrap>
+      <VisualLoading v-if="isLoading" />
+      <div v-else flex="~ col gap-1" mt2 ws-nowrap>
         <DisplayChunkImports
           v-for="chunk in imports"
           :key="chunk.chunk_id"
diff --git a/packages/vite/src/app/pages/session/[session]/chunks.vue b/packages/vite/src/app/pages/session/[session]/chunks.vue
index d1831fdf..fe56b88a 100644
--- a/packages/vite/src/app/pages/session/[session]/chunks.vue
+++ b/packages/vite/src/app/pages/session/[session]/chunks.vue
@@ -68,6 +68,7 @@ function toggleDisplay(type: ClientSettings['chunkViewType']) {
             border="~ base rounded-lg"
             p3
             :chunk="chunk"
+            :chunks="chunks!"
             :session="session"
           />
         </template>
diff --git a/packages/vite/src/shared/types/data.ts b/packages/vite/src/shared/types/data.ts
index 61e6ed0a..ebb13db5 100644
--- a/packages/vite/src/shared/types/data.ts
+++ b/packages/vite/src/shared/types/data.ts
@@ -177,7 +177,6 @@ export type RolldownModuleFlowNode
     | RolldownAssetInfo
 
 export interface RolldownChunkImport extends ChunkImport {
-  type: 'chunk_import'
   imports: number
   modules: number
   name: ChunkInfo['name']

From 2ab90aee1dd339298bcc720d14966526d0e4c4da Mon Sep 17 00:00:00 2001
From: liangmiQwQ <mi_yyds@126.com>
Date: Sat, 18 Oct 2025 07:36:48 +0800
Subject: [PATCH 3/4] chore: fix lint

---
 packages/vite/src/app/components/data/ChunkDetails.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vite/src/app/components/data/ChunkDetails.vue b/packages/vite/src/app/components/data/ChunkDetails.vue
index 58863e4f..1d0e5850 100644
--- a/packages/vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/vite/src/app/components/data/ChunkDetails.vue
@@ -109,9 +109,9 @@ const imports = computed((): RolldownChunkImport[] => {
       <VisualLoading v-if="isLoading" />
       <div v-else flex="~ col gap-1" mt2 ws-nowrap>
         <DisplayChunkImports
-          v-for="chunk in imports"
-          :key="chunk.chunk_id"
-          :chunk="chunk"
+          v-for="chunkImport in imports"
+          :key="chunkImport.chunk_id"
+          :chunk="chunkImport"
           hover="bg-active"
           border="~ base rounded" px2 py1 w-full
         />

From e07948a81f6057474375f6fe651dbd056ad56bb2 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Sat, 18 Oct 2025 18:01:38 +0800
Subject: [PATCH 4/4] chore: update

---
 packages/vite/src/app/components/data/ChunkDetails.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/app/components/data/ChunkDetails.vue b/packages/vite/src/app/components/data/ChunkDetails.vue
index 1d0e5850..9c0b757d 100644
--- a/packages/vite/src/app/components/data/ChunkDetails.vue
+++ b/packages/vite/src/app/components/data/ChunkDetails.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Chunk as ChunkInfo } from '@rolldown/debug'
 import type { RolldownChunkImport, SessionContext } from '~~/shared/types'
+import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
-import { useRpc } from '../../composables/rpc'
 
 const props = withDefaults(defineProps<{
   chunk: ChunkInfo