perf(vite): improve data processing in chunk imports (#107)

Author: liangmiQwQ

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 { SessionContext } from '~~/shared/types'
+import type { RolldownChunkImport, SessionContext } from '~~/shared/types'
+import { useRpc } from '#imports'
+import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
   chunk: ChunkInfo
   session: SessionContext
   showModules?: boolean
   showImports?: boolean
+  chunks?: ChunkInfo[]
 }>(), {
   showModules: true,
   showImports: true,
@@ -26,6 +29,33 @@ 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 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>
 
 <template>
@@ -76,13 +106,12 @@ const chunkSize = computed(() => props.chunk.modules.reduce((total, moduleId) =>
       <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="(importChunk, index) in chunk.imports"
-          :key="index"
-          :chunk-import="importChunk"
-          :session="session"
-          :importer="chunk"
+          v-for="chunkImport in imports"
+          :key="chunkImport.chunk_id"
+          :chunk="chunkImport"
           hover="bg-active"
           border="~ base rounded" px2 py1 w-full
         />

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'
 

packages/vite/src/app/components/display/ChunkImports.vue

@@ -1,43 +1,26 @@
 <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>
   <!-- <VisualLoading /> -->
   <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>

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>

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,10 @@ export type RolldownModuleFlowNode
     | RolldownModuleTransformInfo
     | RolldownChunkInfo
     | RolldownAssetInfo
+
+export interface RolldownChunkImport extends ChunkImport {
+  imports: number
+  modules: number
+  name: ChunkInfo['name']
+  reason: ChunkInfo['reason']
+}