From a139876a4f1f55082c52c874cf9d79aedea94a8f Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Tue, 20 Oct 2026 11:19:25 +0800
Subject: [PATCH] feat(rolldown): add modules to session compare

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../app/components/compare/SingleSideRow.vue  |   6 +-
 .../src/app/components/compare/SplitRow.vue   |  12 +-
 .../src/app/components/compare/TabView.vue    | 117 +++++++++++++++++-
 .../src/app/pages/compare/[sessions].vue      |   5 +
 .../app/pages/compare/[sessions]/modules.vue  |  28 +++++
 .../rolldown-get-session-compare-details.ts   |  84 ++++++++++++-
 packages/rolldown/src/shared/types/data.ts    |  15 +++
 7 files changed, 262 insertions(+), 5 deletions(-)
 create mode 100644 packages/rolldown/src/app/pages/compare/[sessions]/modules.vue

diff --git a/packages/rolldown/src/app/components/compare/SingleSideRow.vue b/packages/rolldown/src/app/components/compare/SingleSideRow.vue
index ad018de7f..7f26db27b 100644
--- a/packages/rolldown/src/app/components/compare/SingleSideRow.vue
+++ b/packages/rolldown/src/app/components/compare/SingleSideRow.vue
@@ -14,6 +14,7 @@ withDefaults(defineProps<{
   delta: number
   format: 'bytes' | 'duration' | 'number'
   subtitle?: string
+  link?: string
   badges?: string[]
   stats?: SingleSideDiffStat[]
 }>(), {
@@ -32,7 +33,10 @@ withDefaults(defineProps<{
           {{ sessionLabel }}
         </div>
         <div class="flex items-baseline gap-2 min-w-0 font-mono" :title="titleMeta ? `${title} (${titleMeta})` : title">
-          <span class="truncate">{{ title }}</span>
+          <NuxtLink v-if="link" :to="link" class="truncate hover:underline">
+            {{ title }}
+          </NuxtLink>
+          <span v-else class="truncate">{{ title }}</span>
           <span v-if="titleMeta" class="flex-none op50">({{ titleMeta }})</span>
         </div>
         <div v-if="subtitle" class="truncate text-xs op55 mt1" :title="subtitle">
diff --git a/packages/rolldown/src/app/components/compare/SplitRow.vue b/packages/rolldown/src/app/components/compare/SplitRow.vue
index b22b61825..af92c306f 100644
--- a/packages/rolldown/src/app/components/compare/SplitRow.vue
+++ b/packages/rolldown/src/app/components/compare/SplitRow.vue
@@ -16,6 +16,8 @@ const props = withDefaults(defineProps<{
   currentTitleMeta?: string
   previousSubtitle?: string
   currentSubtitle?: string
+  previousLink?: string
+  currentLink?: string
   previousStats?: SplitDiffStat[]
   currentStats?: SplitDiffStat[]
   previousBadges?: string[]
@@ -62,7 +64,10 @@ const ratioClass = computed(() => {
               Session A
             </div>
             <div class="flex items-baseline gap-2 min-w-0 font-mono font-600" :title="previousTitleMeta ? `${previousTitle} (${previousTitleMeta})` : previousTitle">
-              <span class="truncate">{{ previousTitle }}</span>
+              <NuxtLink v-if="previousLink" :to="previousLink" class="truncate hover:underline">
+                {{ previousTitle }}
+              </NuxtLink>
+              <span v-else class="truncate">{{ previousTitle }}</span>
               <span v-if="previousTitleMeta" class="flex-none font-400 op50">({{ previousTitleMeta }})</span>
             </div>
             <div v-if="previousSubtitle" class="truncate text-xs op50 mt1" :title="previousSubtitle">
@@ -92,7 +97,10 @@ const ratioClass = computed(() => {
               Session B
             </div>
             <div class="flex items-baseline gap-2 min-w-0 font-mono font-600" :title="currentTitleMeta ? `${currentTitle} (${currentTitleMeta})` : currentTitle">
-              <span class="truncate">{{ currentTitle }}</span>
+              <NuxtLink v-if="currentLink" :to="currentLink" class="truncate hover:underline">
+                {{ currentTitle }}
+              </NuxtLink>
+              <span v-else class="truncate">{{ currentTitle }}</span>
               <span v-if="currentTitleMeta" class="flex-none font-400 op50">({{ currentTitleMeta }})</span>
             </div>
             <div v-if="currentSubtitle" class="truncate text-xs op50 mt1" :title="currentSubtitle">
diff --git a/packages/rolldown/src/app/components/compare/TabView.vue b/packages/rolldown/src/app/components/compare/TabView.vue
index d45ce450f..a36f80ee5 100644
--- a/packages/rolldown/src/app/components/compare/TabView.vue
+++ b/packages/rolldown/src/app/components/compare/TabView.vue
@@ -7,8 +7,9 @@ import type {
 } from '~~/shared/types'
 import { bytesToHumanSize } from '@vitejs/devtools-ui/utils/format'
 import { computed, ref, watch } from 'vue'
+import { useRoute, useRouter } from '#app/composables/router'
 
-type CompareTab = 'overview' | 'plugins' | 'chunks' | 'assets' | 'packages'
+type CompareTab = 'overview' | 'plugins' | 'chunks' | 'modules' | 'assets' | 'packages'
 type DiffMode = 'changed' | 'added' | 'removed'
 type DiffFormat = 'bytes' | 'duration' | 'number'
 type SummaryTone = 'increase' | 'decrease'
@@ -37,6 +38,8 @@ interface SplitDiffRow extends SessionCompareMetricValue {
   currentTitleMeta?: string
   previousSubtitle?: string
   currentSubtitle?: string
+  previousLink?: string
+  currentLink?: string
   previousStats?: SplitDiffStat[]
   currentStats?: SplitDiffStat[]
   previousBadges: string[]
@@ -54,7 +57,13 @@ const props = defineProps<{
 
 const TABLE_LIMIT = 300
 
+const route = useRoute()
+const router = useRouter()
+
 const activeDiffMode = ref<DiffMode>('changed')
+const moduleSearch = ref('')
+const moduleChunkFilter = computed(() => typeof route.query.chunk === 'string' ? route.query.chunk : undefined)
+const moduleChunkFilterName = computed(() => props.details?.chunks.find(chunk => chunk.key === moduleChunkFilter.value)?.name ?? moduleChunkFilter.value)
 const activeTabMeta = computed(() => props.tabs.find(tab => tab.id === props.tab))
 
 const comparisonMetrics = computed(() => {
@@ -167,6 +176,26 @@ const sessionSummaries = computed(() => {
           tone: getSummaryTone(index, session.initial_js, sessionA?.initial_js),
         },
       ])
+    case 'modules': {
+      return props.sessions.map((session, index) => {
+        const codeSize = sumCompareSide(props.details?.modules, index, item => item.previous, item => item.current)
+        const codeSizeA = sumCompareSide(props.details?.modules, 0, item => item.previous, item => item.current)
+        return [
+          {
+            label: 'Modules',
+            value: session.modules.toLocaleString(),
+            icon: 'i-ph-graph-duotone',
+            tone: getSummaryTone(index, session.modules, sessionA?.modules),
+          },
+          {
+            label: 'Code Size',
+            value: formatBytesSummary(codeSize),
+            icon: 'i-ph-file-code-duotone',
+            tone: getSummaryTone(index, codeSize, codeSizeA),
+          },
+        ]
+      })
+    }
     case 'packages': {
       const packageStatsA = getPackageSummaryStats(0)
       return props.sessions.map((_session, index) => {
@@ -226,6 +255,17 @@ const sessionSummaries = computed(() => {
 
 const assetDiffs = computed(() => changedEntries(props.details?.assets))
 const chunkDiffs = computed(() => changedEntries(props.details?.chunks))
+const moduleDiffs = computed(() => {
+  const chunk = moduleChunkFilter.value
+  const search = moduleSearch.value.trim().toLowerCase()
+  return changedEntries(props.details?.modules).filter((item) => {
+    if (chunk && !item.previousChunkKeys.includes(chunk) && !item.currentChunkKeys.includes(chunk))
+      return false
+    if (search && !item.name.toLowerCase().includes(search) && !item.package?.toLowerCase().includes(search))
+      return false
+    return true
+  })
+})
 const packageDiffs = computed(() => changedEntries(props.details?.packages))
 const pluginDiffs = computed(() => changedEntries(props.details?.plugins))
 
@@ -250,6 +290,8 @@ const chunkRows = computed<SplitDiffRow[]>(() => chunkDiffs.value.map(item => cr
   status: item.status,
   previousTitle: item.previousChunkId == null ? undefined : item.name,
   currentTitle: item.currentChunkId == null ? undefined : item.name,
+  previousLink: item.previousChunkId == null ? undefined : getChunkModulesLink(item.key),
+  currentLink: item.currentChunkId == null ? undefined : getChunkModulesLink(item.key),
   previousStats: createChunkStats(item.previousModules, item.previousImports),
   currentStats: createChunkStats(item.currentModules, item.currentImports, {
     modules: item.previousModules,
@@ -270,6 +312,29 @@ const chunkRows = computed<SplitDiffRow[]>(() => chunkDiffs.value.map(item => cr
   ].filter(Boolean) as string[],
 })))
 
+const moduleRows = computed<SplitDiffRow[]>(() => {
+  const [sessionA, sessionB] = props.sessions
+  return moduleDiffs.value.map(item => createSplitRow({
+    key: item.key,
+    status: item.status,
+    previousTitle: item.previousId == null ? undefined : item.name,
+    currentTitle: item.currentId == null ? undefined : item.name,
+    previousSubtitle: formatModuleChunks(item.previousChunks),
+    currentSubtitle: formatModuleChunks(item.currentChunks),
+    previousLink: item.previousId == null || !sessionA ? undefined : getModuleLink(sessionA.id, item.previousId),
+    currentLink: item.currentId == null || !sessionB ? undefined : getModuleLink(sessionB.id, item.currentId),
+    previous: item.previous,
+    current: item.current,
+    delta: item.delta,
+    deltaRatio: item.deltaRatio,
+    format: 'bytes',
+    previousBadges: item.package ? [item.package] : [],
+    currentBadges: item.moved
+      ? [item.package, 'moved'].filter(Boolean) as string[]
+      : item.package ? [item.package] : [],
+  }))
+})
+
 const packageRows = computed<SplitDiffRow[]>(() => packageDiffs.value.map(item => createSplitRow({
   key: item.key,
   status: item.status,
@@ -322,6 +387,8 @@ const activeRows = computed(() => {
       return assetRows.value
     case 'chunks':
       return chunkRows.value
+    case 'modules':
+      return moduleRows.value
     case 'packages':
       return packageRows.value
     case 'plugins':
@@ -420,6 +487,24 @@ function formatAssetTitleMeta(chunkName: string | undefined) {
   return chunkName?.replace(/[[\]]/g, '')
 }
 
+function formatModuleChunks(chunks: string[]) {
+  if (!chunks.length)
+    return undefined
+  return `in ${chunks.map(chunk => chunk.replace(/[[\]]/g, '')).join(', ')}`
+}
+
+function getChunkModulesLink(chunkKey: string) {
+  return `/compare/${props.sessions.map(session => session.id).join(',')}/modules?chunk=${encodeURIComponent(chunkKey)}`
+}
+
+function clearModuleChunkFilter() {
+  router.replace({ query: { ...route.query, chunk: undefined } })
+}
+
+function getModuleLink(session: string, module: string) {
+  return `/session/${session}/graph?module=${encodeURIComponent(module)}`
+}
+
 function formatPackageTitle(name: string, version: string | undefined) {
   if (!version || version === '(unknown)')
     return name
@@ -586,6 +671,28 @@ function sumDelta(rows: SplitDiffRow[]) {
 
       <template v-else>
         <div class="flex flex-col gap-4">
+          <div v-if="props.tab === 'modules'" class="flex items-center gap-2">
+            <div class="flex-1 flex items-center gap-2 border border-base rounded px3 py1.5">
+              <div class="i-ph-magnifying-glass-duotone op50" />
+              <input
+                v-model="moduleSearch"
+                class="flex-1 bg-transparent outline-none font-mono text-sm"
+                placeholder="Filter modules by path or package"
+              >
+            </div>
+            <button
+              v-if="moduleChunkFilter"
+              type="button"
+              class="btn-action"
+              title="Clear chunk filter"
+              @click="clearModuleChunkFilter"
+            >
+              <div class="i-ph-shapes-duotone" />
+              <span class="font-mono">{{ moduleChunkFilterName }}</span>
+              <div class="i-ph-x" />
+            </button>
+          </div>
+
           <div class="grid grid-cols-3 gap-3">
             <button
               v-for="item of diffModeOptions"
@@ -618,6 +725,8 @@ function sumDelta(rows: SplitDiffRow[]) {
                 :current-title-meta="row.currentTitleMeta"
                 :previous-subtitle="row.previousSubtitle"
                 :current-subtitle="row.currentSubtitle"
+                :previous-link="row.previousLink"
+                :current-link="row.currentLink"
                 :previous-stats="row.previousStats"
                 :current-stats="row.currentStats"
                 :previous-badges="row.previousBadges"
@@ -639,6 +748,7 @@ function sumDelta(rows: SplitDiffRow[]) {
                   :title="row.currentTitle || row.key"
                   :title-meta="row.currentTitleMeta"
                   :subtitle="row.currentSubtitle"
+                  :link="row.currentLink"
                   :badges="row.currentBadges"
                   :stats="row.currentStats"
                   :delta="row.delta"
@@ -656,6 +766,7 @@ function sumDelta(rows: SplitDiffRow[]) {
                   :title="row.previousTitle || row.key"
                   :title-meta="row.previousTitleMeta"
                   :subtitle="row.previousSubtitle"
+                  :link="row.previousLink"
                   :badges="row.previousBadges"
                   :stats="row.previousStats"
                   :delta="row.delta"
@@ -665,6 +776,10 @@ function sumDelta(rows: SplitDiffRow[]) {
             </template>
           </section>
 
+          <div v-if="activeDiffRows.length > TABLE_LIMIT" class="text-center text-sm op50">
+            Showing {{ TABLE_LIMIT }} of {{ activeDiffRows.length.toLocaleString() }} entries{{ props.tab === 'modules' ? ', filter to narrow down' : '' }}
+          </div>
+
           <div v-if="!activeDiffRows.length" class="h40 flex items-center justify-center op50 italic">
             {{ activeDiffEmptyText }}
           </div>
diff --git a/packages/rolldown/src/app/pages/compare/[sessions].vue b/packages/rolldown/src/app/pages/compare/[sessions].vue
index 1d99f97c5..9f22963d2 100644
--- a/packages/rolldown/src/app/pages/compare/[sessions].vue
+++ b/packages/rolldown/src/app/pages/compare/[sessions].vue
@@ -35,6 +35,11 @@ const compareTabs = [
     label: 'Chunks',
     icon: 'i-ph-shapes-duotone',
   },
+  {
+    id: 'modules',
+    label: 'Modules',
+    icon: 'i-ph-graph-duotone',
+  },
   {
     id: 'assets',
     label: 'Assets',
diff --git a/packages/rolldown/src/app/pages/compare/[sessions]/modules.vue b/packages/rolldown/src/app/pages/compare/[sessions]/modules.vue
new file mode 100644
index 000000000..bde2b945d
--- /dev/null
+++ b/packages/rolldown/src/app/pages/compare/[sessions]/modules.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type {
+  SessionCompareContext,
+  SessionCompareDetails,
+} from '~~/shared/types'
+
+interface CompareTabItem {
+  id: string
+  label: string
+  icon: string
+}
+type NormalizedSessionCompareContext = SessionCompareContext & { createdAt: Date, title: string }
+
+defineProps<{
+  tabs: CompareTabItem[]
+  sessions: NormalizedSessionCompareContext[]
+  details: SessionCompareDetails | null
+}>()
+</script>
+
+<template>
+  <CompareTabView
+    tab="modules"
+    :tabs="tabs"
+    :sessions="sessions"
+    :details="details"
+  />
+</template>
diff --git a/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts
index 3a8f4ec7f..9b8f28d47 100644
--- a/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts
+++ b/packages/rolldown/src/node/rpc/functions/rolldown-get-session-compare-details.ts
@@ -8,12 +8,13 @@ import type {
   SessionCompareChunkDiff,
   SessionCompareDetails,
   SessionCompareMetricValue,
+  SessionCompareModuleDiff,
   SessionComparePackageDiff,
   SessionComparePluginDiff,
 } from '../../../shared/types'
 import type { RolldownEventsReader } from '../../rolldown/events-reader'
 import { defineRpcFunction } from '@vitejs/devtools-kit'
-import { extname } from 'pathe'
+import { extname, isAbsolute, relative } from 'pathe'
 import { getLogsManager } from '../utils'
 import { getPackageMeta } from './rolldown-get-packages'
 
@@ -136,6 +137,44 @@ function getChunkSize(reader: RolldownEventsReader, chunk: RolldownChunkInfo | u
   }, 0)
 }
 
+function getModuleSize(reader: RolldownEventsReader, id: string) {
+  return reader.manager.modules.get(id)?.build_metrics?.transforms?.at(-1)?.transformed_code_size ?? 0
+}
+
+function getModuleName(id: string, cwd: string) {
+  const [path = id, query] = id.split('?')
+  if (!isAbsolute(path))
+    return id
+  // Show dependencies from their package root, instead of a long `../node_modules/.pnpm/...` path
+  const nodeModulesIndex = path.lastIndexOf('/node_modules/')
+  const name = nodeModulesIndex === -1
+    ? relative(cwd, path)
+    : path.slice(nodeModulesIndex + '/node_modules/'.length)
+  return query == null ? name : `${name}?${query}`
+}
+
+function getModulePackage(id: string) {
+  const match = id.match(/node_modules\/((?:@[^/]+\/)?[^/]+)\/(?!.*node_modules\/)/)
+  return match?.[1]
+}
+
+function getChunkLabel(chunk: RolldownChunkInfo) {
+  return chunk.name || chunk.entry_module || `#${chunk.chunk_id}`
+}
+
+function createModuleChunksMap(chunks: RolldownChunkInfo[]) {
+  const map = new Map<string, RolldownChunkInfo[]>()
+  for (const chunk of chunks) {
+    for (const id of chunk.modules)
+      map.set(id, [...(map.get(id) ?? []), chunk])
+  }
+  return map
+}
+
+function getSortedChunkValues(chunks: RolldownChunkInfo[], getValue: (chunk: RolldownChunkInfo) => string) {
+  return chunks.map(getValue).toSorted((a, b) => a.localeCompare(b))
+}
+
 function getChunkKey(chunk: RolldownChunkInfo) {
   // Bracketed names are guessed (`[<first module>_<module count>]`) and change whenever
   // a module is added or removed, so match those chunks by entry or first module instead
@@ -318,6 +357,47 @@ function compareChunks(previous: SessionCompareSource, current: SessionCompareSo
   }))
 }
 
+// Same keys as `compareChunks`, including the `#2` suffix for duplicates, so the chunk filter lines up
+function createChunkKeyMap(chunks: RolldownChunkInfo[]) {
+  return new Map(Array.from(createUniqueMap(chunks, getChunkKey), ([key, chunk]) => [chunk.chunk_id, key]))
+}
+
+function compareModules(previous: SessionCompareSource, current: SessionCompareSource, cwd: string): SessionCompareModuleDiff[] {
+  const previousChunks = createModuleChunksMap(previous.chunks)
+  const currentChunks = createModuleChunksMap(current.chunks)
+  const previousChunkKeyMap = createChunkKeyMap(previous.chunks)
+  const currentChunkKeyMap = createChunkKeyMap(current.chunks)
+  // Only modules that end up in an output chunk contribute to the bundle
+  const previousModules = new Map(Array.from(previousChunks.keys(), id => [id, id]))
+  const currentModules = new Map(Array.from(currentChunks.keys(), id => [id, id]))
+
+  return sortByDeltaImpact(compareMaps(previousModules, currentModules, (key, previousId, currentId) => {
+    const previousSize = previousId ? getModuleSize(previous.reader, previousId) : 0
+    const currentSize = currentId ? getModuleSize(current.reader, currentId) : 0
+    const previousModuleChunks = previousId ? previousChunks.get(previousId) ?? [] : []
+    const currentModuleChunks = currentId ? currentChunks.get(currentId) ?? [] : []
+
+    const previousChunkKeys = getSortedChunkValues(previousModuleChunks, chunk => previousChunkKeyMap.get(chunk.chunk_id)!)
+    const currentChunkKeys = getSortedChunkValues(currentModuleChunks, chunk => currentChunkKeyMap.get(chunk.chunk_id)!)
+    const moved = !!previousId && !!currentId && previousChunkKeys.join('\0') !== currentChunkKeys.join('\0')
+
+    return {
+      key,
+      status: getStatus(previousId, currentId, previousSize !== currentSize || moved),
+      name: getModuleName(key, cwd),
+      package: getModulePackage(key),
+      previousId,
+      currentId,
+      previousChunks: getSortedChunkValues(previousModuleChunks, getChunkLabel),
+      currentChunks: getSortedChunkValues(currentModuleChunks, getChunkLabel),
+      previousChunkKeys,
+      currentChunkKeys,
+      moved,
+      ...createMetric(previousSize, currentSize),
+    }
+  }))
+}
+
 function comparePackages(previous: SessionCompareSource, current: SessionCompareSource): SessionComparePackageDiff[] {
   const previousPackages = createPackageProfiles(previous.packages)
   const currentPackages = createPackageProfiles(current.packages)
@@ -417,6 +497,7 @@ export const rolldownGetSessionCompareDetails = defineRpcFunction({
 
         const assets = compareAssets(previous, current)
         const chunks = compareChunks(previous, current)
+        const modules = compareModules(previous, current, context.cwd)
         const packages = comparePackages(previous, current)
         const plugins = await comparePlugins(previous, current)
 
@@ -433,6 +514,7 @@ export const rolldownGetSessionCompareDetails = defineRpcFunction({
           },
           assets,
           chunks,
+          modules,
           packages,
           plugins,
         }
diff --git a/packages/rolldown/src/shared/types/data.ts b/packages/rolldown/src/shared/types/data.ts
index 4a3907c85..08076f746 100644
--- a/packages/rolldown/src/shared/types/data.ts
+++ b/packages/rolldown/src/shared/types/data.ts
@@ -99,6 +99,20 @@ export interface SessionCompareChunkDiff extends SessionCompareMetricValue {
   currentInitial: boolean
 }
 
+export interface SessionCompareModuleDiff extends SessionCompareMetricValue {
+  key: string
+  status: SessionCompareChangeStatus
+  name: string
+  package?: string
+  previousId?: string
+  currentId?: string
+  previousChunks: string[]
+  currentChunks: string[]
+  previousChunkKeys: string[]
+  currentChunkKeys: string[]
+  moved: boolean
+}
+
 export interface SessionComparePackageDiff extends SessionCompareMetricValue {
   key: string
   status: SessionCompareChangeStatus
@@ -145,6 +159,7 @@ export interface SessionCompareDetails {
   }
   assets: SessionCompareAssetDiff[]
   chunks: SessionCompareChunkDiff[]
+  modules: SessionCompareModuleDiff[]
   packages: SessionComparePackageDiff[]
   plugins: SessionComparePluginDiff[]
 }