feat: guess chunk name

Author: antfu

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

@@ -36,28 +36,11 @@ withDefaults(defineProps<{
       <slot />
     </div>
 
-    <template v-if="showImports && chunk.imports.length > 0">
-      <div op50>
-        Imports
-      </div>
-      <div flex="~ col gap-1" ws-nowrap>
-        <DisplayChunkImports
-          v-for="(importChunk, index) in chunk.imports"
-          :key="index"
-          :chunk-import="importChunk"
-          :session="session"
-          :importer="chunk"
-          hover="bg-active"
-          border="~ base rounded" px2 py1 w-full
-        />
-      </div>
-    </template>
-
-    <template v-if="showModules">
-      <div op50>
-        Modules
-      </div>
-      <div flex="~ col gap-1" ws-nowrap>
+    <details v-if="showModules" open="true">
+      <summary op50>
+        <span>Modules ({{ chunk.modules.length }})</span>
+      </summary>
+      <div flex="~ col gap-1" mt2 ws-nowrap>
         <DisplayModuleId
           v-for="module of chunk.modules"
           :id="module"
@@ -69,6 +52,23 @@ withDefaults(defineProps<{
           border="~ base rounded" px2 py1 w-full
         />
       </div>
-    </template>
+    </details>
+
+    <details v-if="showImports && chunk.imports.length > 0" open="true">
+      <summary op50>
+        <span>Imports ({{ chunk.imports.length }})</span>
+      </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"
+          hover="bg-active"
+          border="~ base rounded" px2 py1 w-full
+        />
+      </div>
+    </details>
   </div>
 </template>

packages/vite/src/node/rpc/functions/rolldown-get-chunk-info.ts

@@ -1,4 +1,5 @@
 import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { guessChunkName } from '../../../shared/utils/guess-chunk-name'
 import { getLogsManager } from '../utils'
 
 export const rolldownGetChunkInfo = defineRpcFunction({
@@ -9,7 +10,10 @@ export const rolldownGetChunkInfo = defineRpcFunction({
     return {
       handler: async ({ session, id }: { session: string, id: number }) => {
         const reader = await manager.loadSession(session)
-        return reader.manager.chunks.get(id)
+        const chunk = reader.manager.chunks.get(id)
+        if (chunk && !chunk.name)
+          chunk.name = guessChunkName(chunk)
+        return chunk
       },
     }
   },

packages/vite/src/node/rpc/functions/rolldown-get-chunks-graph.ts

@@ -1,4 +1,5 @@
 import { defineRpcFunction } from '@vitejs/devtools-kit'
+import { guessChunkName } from '../../../shared/utils/guess-chunk-name'
 import { getLogsManager } from '../utils'
 
 export const rolldownGetChunksGraph = defineRpcFunction({
@@ -9,7 +10,12 @@ export const rolldownGetChunksGraph = defineRpcFunction({
     return {
       handler: async ({ session }: { session: string }) => {
         const reader = await manager.loadSession(session)
-        return Array.from(reader.manager.chunks.values())
+        const chunks = Array.from(reader.manager.chunks.values())
+        chunks.forEach((chunk) => {
+          if (chunk && !chunk.name)
+            chunk.name = guessChunkName(chunk)
+        })
+        return chunks
       },
     }
   },

packages/vite/src/nuxt.config.ts

@@ -130,7 +130,7 @@ export default defineNuxtConfig({
   },
 
   devtools: {
-    enabled: true,
+    enabled: false,
   },
 
   typescript: {

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

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { simplifyModuleName } from '../guess-chunk-name'
+
+describe('simplifyModuleName', () => {
+  it('should return the simplified module name', () => {
+    expect(simplifyModuleName('foo/bar')).toBe('foo_bar')
+    expect(simplifyModuleName('foo/bar/')).toBe('foo_bar')
+    expect(simplifyModuleName('/foo/bar')).toBe('foo_bar')
+    expect(simplifyModuleName('/foo/bar/')).toBe('foo_bar')
+    expect(simplifyModuleName('foo/bar/index')).toBe('foo_bar')
+    expect(simplifyModuleName('foo/bar/index/')).toBe('foo_bar')
+    expect(simplifyModuleName('foo/bar/index.ts')).toBe('foo_bar')
+    expect(simplifyModuleName('node_modules/foo/bar/index.tsx')).toBe('foo_bar')
+    expect(simplifyModuleName('node_modules/foo/bar/index.jsx')).toBe('foo_bar')
+    expect(simplifyModuleName('foo/bar/index.mjs')).toBe('foo_bar')
+    expect(simplifyModuleName('foo/bar/index.cjs')).toBe('foo_bar')
+    expect(simplifyModuleName('node_modules/foo/bar/index.tsx')).toBe('foo_bar')
+    expect(simplifyModuleName('node_modules/foo/bar/index.jsx')).toBe('foo_bar')
+    expect(simplifyModuleName('node_modules/foo/bar/index.mjs')).toBe('foo_bar')
+    expect(simplifyModuleName('node_modules/foo/bar/index.cjs')).toBe('foo_bar')
+  })
+})

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

@@ -0,0 +1,34 @@
+import type { Chunk as ChunkInfo } from '@rolldown/debug'
+
+export function guessChunkName(chunk: ChunkInfo) {
+  if (chunk.name)
+    return chunk.name
+  if (chunk.modules.length === 1)
+    return `[${simplifyModuleName(chunk.modules[0]!)}]`
+  if (chunk.modules.length > 1)
+    return `[${simplifyModuleName(`${chunk.modules[0]}`)}_${chunk.modules.length}]`
+  return '[unnamed]'
+}
+
+export function simplifyModuleName(module: string) {
+  let parts = module
+    .replace(/^.*(\.pnpm|node_modules|src|app|packages)\//gi, '') // remove anything before node_modules or src
+    .replace(/\b(index|main|dist|test|component|components)\b/gi, '') // boring names
+    .replace(/\/+/g, '/') // duplicate slashes
+    .replace(/\?.*$/, '') // query string
+    .replace(/\.\w+$/, '') // extension
+    .replace(/\W/g, '_') // non-alphanumeric characters
+    .replace(/_+/g, '_') // duplicate underscores
+    .replace(/^_+|_+$/g, '') // leading/trailing underscores
+    .replace(/([a-z])([A-Z])/g, '$1_$2') // camel case to snake case
+    .toLowerCase()
+    .split('_')
+    .filter(Boolean)
+
+  parts = Array.from(new Set(parts))
+
+  if (parts.length > 5)
+    parts = parts.slice(0, 5)
+
+  return parts.join('_')
+}