feat: add initial tag for chunk (#123)

Author: webfansplz

packages/vite/src/app/components/chunks/Graph.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import type { Chunk, ChunkImport } from '@rolldown/debug'
-import type { SessionContext } from '~~/shared/types/data'
+import type { ChunkImport } from '@rolldown/debug'
+import type { RolldownChunkInfo, SessionContext } from '~~/shared/types/data'
 import type { ModuleGraphLink, ModuleGraphNode } from '~/composables/moduleGraph'
 import { useRoute } from '#app/composables/router'
 import { computed, nextTick, unref } from 'vue'
 import { createModuleGraph } from '~/composables/moduleGraph'
 
+type ChunkInfo = RolldownChunkInfo & {
+  id: string
+}
 const props = defineProps<{
   session: SessionContext
   chunks: ChunkInfo[]
@@ -14,9 +17,6 @@ const props = defineProps<{
 const chunks = computed(() => props.chunks)
 const route = useRoute()
 
-type ChunkInfo = Chunk & {
-  id: string
-}
 createModuleGraph<ChunkInfo, ChunkImport>({
   modules: chunks,
   spacing: {
@@ -165,6 +165,7 @@ createModuleGraph<ChunkInfo, ChunkImport>({
         <div flex="~ gap-2 items-center" :title="`Chunk #${node.data.module.id}`">
           <div>{{ node.data.module.name || '[unnamed]' }}</div>
           <DisplayBadge :text="node.data.module.reason" />
+          <DisplayBadge v-if="node.data.module.is_initial" text="initial" />
         </div>
         <div flex-auto />
         <div flex="~ gap-1 items-center">

packages/vite/src/app/components/data/ChunkDetails.vue

@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import type { Chunk as ChunkInfo } from '@rolldown/debug'
-import type { RolldownChunkImport, SessionContext } from '~~/shared/types'
+import type { RolldownChunkImport, RolldownChunkInfo, SessionContext } from '~~/shared/types'
 import { useRpc } from '#imports'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
-  chunk: ChunkInfo
+  chunk: RolldownChunkInfo
   session: SessionContext
   showModules?: boolean
   showImports?: boolean
-  chunks?: ChunkInfo[]
+  chunks?: RolldownChunkInfo[]
 }>(), {
   showModules: true,
   showImports: true,
@@ -82,6 +81,7 @@ const importers = computed((): RolldownChunkImport[] => {
         <div i-ph-shapes-duotone />
         <div>{{ chunk.name || '[unnamed]' }}</div>
         <DisplayBadge :text="chunk.reason" />
+        <DisplayBadge v-if="chunk.is_initial" text="initial" />
         <DisplayFileSizeBadge :bytes="chunkSize" text-sm />
       </div>
 

packages/vite/src/node/rolldown/events-manager.ts

@@ -1,5 +1,6 @@
-import type { Asset as AssetInfo, Chunk as ChunkInfo, Event, HookLoadCallEnd, HookLoadCallStart, HookResolveIdCallEnd, HookResolveIdCallStart, HookTransformCallEnd, HookTransformCallStart, Module as ModuleInfo } from '@rolldown/debug'
-import type { ModuleBuildMetrics, PluginBuildMetrics } from '../../shared/types'
+import type { Asset as AssetInfo, Event, HookLoadCallEnd, HookLoadCallStart, HookResolveIdCallEnd, HookResolveIdCallStart, HookTransformCallEnd, HookTransformCallStart, Module as ModuleInfo } from '@rolldown/debug'
+import type { ModuleBuildMetrics, PluginBuildMetrics, RolldownChunkInfo } from '../../shared/types'
+import { getInitialChunkIds } from '../utils/chunk'
 import { getContentByteSize } from '../utils/format'
 
 export type RolldownEvent = Event & {
@@ -14,7 +15,7 @@ const MODULE_BUILD_END_HOOKS = ['HookResolveIdCallEnd', 'HookLoadCallEnd', 'Hook
 
 export class RolldownEventsManager {
   events: RolldownEvent[] = []
-  chunks: Map<number, ChunkInfo> = new Map()
+  chunks: Map<number, RolldownChunkInfo> = new Map()
   assets: Map<string, AssetInfo> = new Map()
   modules: Map<string, ModuleInfo & { build_metrics?: ModuleBuildMetrics }> = new Map()
   source_refs: Map<string, string> = new Map()
@@ -139,8 +140,9 @@ export class RolldownEventsManager {
     }
 
     if (event.action === 'ChunkGraphReady') {
+      const initialChunkIds = getInitialChunkIds(event.chunks)
       for (const chunk of event.chunks) {
-        this.chunks.set(chunk.chunk_id, chunk)
+        this.chunks.set(chunk.chunk_id, { ...chunk, is_initial: initialChunkIds.has(chunk.chunk_id) })
       }
       return
     }

packages/vite/src/node/rpc/functions/rolldown-get-session-compare-summary.ts

@@ -14,31 +14,7 @@ export const rolldownGetSessionCompareSummary = defineRpcFunction({
           const _reader = reader[index]!
           const assets = Array.from(_reader.manager.assets.values())
           const chunks = Array.from(_reader.manager.chunks.values())
-
-          function getInitialChunkIds(chunkIds: number[], visited = new Set<number>()): number[] {
-            const initialChunkIds: number[] = []
-
-            for (const chunkId of chunkIds) {
-              if (visited.has(chunkId))
-                continue
-              visited.add(chunkId)
-
-              const chunk = chunks.find(c => c.chunk_id === chunkId)
-              if (chunk?.imports) {
-                const importChunkIds = chunk.imports.map(imp => imp.chunk_id)
-                initialChunkIds.push(...importChunkIds)
-
-                const nestedImports = getInitialChunkIds(importChunkIds, visited)
-                initialChunkIds.push(...nestedImports)
-              }
-            }
-
-            return initialChunkIds
-          }
-
-          const entryChunkIds = chunks.filter(chunk => !!chunk.is_user_defined_entry).map(chunk => chunk.chunk_id)
-          // initial chunks = user-defined entry chunk (initial entry chunk) + user-defined entry chunk's imports (initial common chunk)
-          const initialChunkIds = [...new Set([...entryChunkIds, ...getInitialChunkIds(entryChunkIds)])]
+          const initialChunkIds = chunks.filter(chunk => chunk.is_initial).map(chunk => chunk.chunk_id)
 
           return {
             id: s,

packages/vite/src/node/utils/chunk.ts

@@ -0,0 +1,30 @@
+import type { RolldownChunkInfo } from '../../shared/types'
+
+// initial chunks = user-defined entry chunk (initial entry chunk) + user-defined entry chunk's imports (initial common chunk)
+export function getInitialChunkIds(chunks: RolldownChunkInfo[]) {
+  const chunkMap = new Map(chunks.map(chunk => [chunk.chunk_id, chunk]))
+  const entryChunkIds = chunks.filter(chunk => !!chunk.is_user_defined_entry).map(chunk => chunk.chunk_id)
+  const visited = new Set<number>()
+  const initialChunkIds = new Set<number>(entryChunkIds)
+  const queue = [...entryChunkIds]
+
+  while (queue.length > 0) {
+    const chunkId = queue.shift()!
+
+    if (visited.has(chunkId))
+      continue
+    visited.add(chunkId)
+
+    const chunk = chunkMap.get(chunkId)
+    if (chunk?.imports) {
+      for (const _import of chunk.imports) {
+        if (!initialChunkIds.has(_import.chunk_id)) {
+          initialChunkIds.add(_import.chunk_id)
+          queue.push(_import.chunk_id)
+        }
+      }
+    }
+  }
+
+  return initialChunkIds
+}

packages/vite/src/shared/types/data.ts

@@ -160,7 +160,8 @@ export interface RolldownModuleNoChangesHide {
 }
 
 export interface RolldownChunkInfo extends ChunkInfo {
-  type: 'chunk'
+  type?: 'chunk'
+  is_initial?: boolean
 }
 
 export interface RolldownAssetInfo extends AssetInfo {

packages/vite/src/shared/utils/guess-chunk-name.ts

@@ -1,6 +1,6 @@
-import type { Chunk as ChunkInfo } from '@rolldown/debug'
+import type { RolldownChunkInfo } from '../types'
 
-export function guessChunkName(chunk: ChunkInfo) {
+export function guessChunkName(chunk: RolldownChunkInfo) {
   if (chunk.name)
     return chunk.name
   if (chunk.modules.length === 1)