next analyze: annotate polyfill modules in UI

apps/bundle-analyzer/app/globals.css

@@ -32,6 +32,8 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --polyfill: #5f707f;
+  --polyfill-foreground: #ffffff;
 }
 
 .dark {
@@ -62,6 +64,8 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
+  --polyfill: #5f707f;
+  --polyfill-foreground: #ffffff;
 }
 
 @theme inline {
@@ -98,6 +102,8 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-polyfill: var(--polyfill);
+  --color-polyfill-foreground: var(--polyfill-foreground);
 }
 
 @layer base {

apps/bundle-analyzer/app/page.tsx

@@ -14,6 +14,8 @@ import { Input } from '@/components/ui/input'
 import { Skeleton, TreemapSkeleton } from '@/components/ui/skeleton'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { AnalyzeData, ModulesData } from '@/lib/analyze-data'
+import { SpecialModule } from '@/lib/types'
+import { getSpecialModuleType } from '@/lib/utils'
 
 function formatBytes(bytes: number): string {
   if (bytes === 0) return '0 B'
@@ -137,6 +139,11 @@ export default function Home() {
   const isAnyLoading = isAnalyzeLoading || isModulesLoading
   const rootSourceIndex = getRootSourceIndex(analyzeData)
 
+  const specialModuleType = getSpecialModuleType(
+    analyzeData,
+    selectedSourceIndex
+  )
+
   return (
     <main
       className="h-screen flex flex-col bg-background"
@@ -289,12 +296,39 @@ export default function Home() {
                 {selectedSourceIndex != null &&
                   analyzeData.source(selectedSourceIndex) && (
                     <>
-                      <p className="text-xs text-muted-foreground mt-2">
-                        Output Size:{' '}
-                        {formatBytes(
-                          analyzeData.getSourceOutputSize(selectedSourceIndex)
+                      <dl className="space-y-2">
+                        <div>
+                          <dt className="text-xs text-muted-foreground inline">
+                            Output Size:{' '}
+                          </dt>
+                          <dd className="text-xs text-muted-foreground inline">
+                            {formatBytes(
+                              analyzeData.getSourceOutputSize(
+                                selectedSourceIndex
+                              )
+                            )}
+                          </dd>
+                        </div>
+                        {(specialModuleType === SpecialModule.POLYFILL_MODULE ||
+                          specialModuleType ===
+                            SpecialModule.POLYFILL_NOMODULE) && (
+                          <div className="flex items-center gap-2">
+                            <dt className="inline-flex items-center rounded-md bg-polyfill/10 dark:bg-polyfill/30 px-2 py-1 text-xs font-medium text-polyfill dark:text-polyfill-foreground ring-1 ring-inset ring-polyfill/20 shrink-0">
+                              Polyfill
+                            </dt>
+                            <dd className="text-xs text-muted-foreground">
+                              Next.js built-in polyfills
+                              {specialModuleType ===
+                              SpecialModule.POLYFILL_NOMODULE ? (
+                                <>
+                                  . <code>polyfill-nomodule.js</code> is only
+                                  sent to legacy browsers.
+                                </>
+                              ) : null}
+                            </dd>
+                          </div>
                         )}
-                      </p>
+                      </dl>
                       {modulesData && (
                         <ImportChain
                           key={selectedSourceIndex}

apps/bundle-analyzer/components/treemap-visualizer.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { darken, lighten } from 'polished'
+import { darken, lighten, readableColor } from 'polished'
 import type React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import type { AnalyzeData } from '@/lib/analyze-data'
@@ -9,6 +9,7 @@ import {
   type LayoutNode,
   type LayoutNodeInfo,
 } from '@/lib/treemap-layout'
+import { SpecialModule } from '@/lib/types'
 
 interface TreemapVisualizerProps {
   analyzeData: AnalyzeData
@@ -23,6 +24,8 @@ interface TreemapVisualizerProps {
   onHoveredNodeChangeDelayed?: (nodeInfo: LayoutNodeInfo | null) => void
   searchQuery?: string
   filterSource?: (sourceIndex: number) => boolean
+  isModulePolyfillChunk?: (sourceIndex: number) => boolean
+  isNoModulePolyfillChunk?: (sourceIndex: number) => boolean
 }
 
 function getFileColor(node: {
@@ -33,12 +36,17 @@ function getFileColor(node: {
   server?: boolean
   client?: boolean
   traced?: boolean
+  specialModuleType: SpecialModule | null
 }): string {
-  const { js, css, json, asset, client, traced } = node
+  const { js, css, json, asset, client, traced, specialModuleType } = node
+
+  if (isPolyfill(specialModuleType)) {
+    return '#5f707f'
+  }
 
   let color = '#9ca3af' // gray-400 default
-  if (js) color = '#0068d6'
-  if (css) color = '#663399'
+  if (js) color = '#4682b4'
+  if (css) color = '#8b7d9e'
   if (json) color = '#297a3a'
   if (asset) color = '#da2f35'
 
@@ -54,6 +62,13 @@ function getFileColor(node: {
   return color
 }
 
+function isPolyfill(specialModuleType: SpecialModule | null): boolean {
+  return (
+    specialModuleType === SpecialModule.POLYFILL_MODULE ||
+    specialModuleType === SpecialModule.POLYFILL_NOMODULE
+  )
+}
+
 function findNodeAtPosition(
   node: LayoutNode,
   x: number,
@@ -320,7 +335,8 @@ function drawTreemap(
     ctx.strokeRect(rect.x, rect.y, rect.width, rect.height)
 
     if (rect.width > 60 && rect.height > 30) {
-      ctx.fillStyle = colors.text
+      const textColor = readableColor(color)
+      ctx.fillStyle = textColor
       ctx.font = '12px sans-serif'
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
@@ -516,6 +532,7 @@ function wrapLayoutWithAncestorsUsingIndices(
       titleBarHeight: titleBarHeight,
       children: [currentNode],
       sourceIndex: ancestorIndex,
+      specialModuleType: null,
     }
 
     currentNode = ancestorNode
@@ -539,6 +556,7 @@ function wrapLayoutWithAncestorsUsingIndices(
     titleBarHeight: minTitleBarHeight,
     children: [currentNode],
     sourceIndex: rootIndex,
+    specialModuleType: null,
   }
 
   return rootNode

apps/bundle-analyzer/lib/analyze-data.ts

@@ -388,6 +388,20 @@ export class AnalyzeData {
     return { client, server, traced, js, css, json, asset }
   }
 
+  isPolyfillModule(index: number): boolean {
+    const fullSourcePath = this.getFullSourcePath(index)
+    return fullSourcePath.endsWith(
+      'node_modules/next/dist/build/polyfills/polyfill-module.js'
+    )
+  }
+
+  isPolyfillNoModule(index: number): boolean {
+    const fullSourcePath = this.getFullSourcePath(index)
+    return fullSourcePath.endsWith(
+      'node_modules/next/dist/build/polyfills/polyfill-nomodule.js'
+    )
+  }
+
   // Get the raw header for debugging
   getRawAnalyzeHeader(): AnalyzeDataHeader {
     return this.analyzeHeader

apps/bundle-analyzer/lib/treemap-layout.ts

@@ -1,5 +1,7 @@
 import type { AnalyzeData } from './analyze-data'
 import { layoutTreemap } from './layout-treemap'
+import { SpecialModule } from './types'
+import { getSpecialModuleType } from './utils'
 
 export interface LayoutRect {
   x: number
@@ -18,6 +20,7 @@ export interface LayoutNode extends LayoutNodeInfo {
   size: number
   rect: LayoutRect
   type: 'file' | 'directory' | 'collapsed-directory'
+  specialModuleType: SpecialModule | null
   titleBarHeight?: number
   children?: LayoutNode[]
   itemCount?: number
@@ -141,6 +144,7 @@ function computeTreemapLayoutFromAnalyzeInternal(
       type: 'file',
       rect,
       sourceIndex,
+      specialModuleType: getSpecialModuleType(analyzeData, sourceIndex),
       ...analyzeData.getSourceFlags(sourceIndex),
     }
   }
@@ -178,6 +182,7 @@ function computeTreemapLayoutFromAnalyzeInternal(
       itemCount: countDescendants(sourceIndex),
       children: [],
       sourceIndex,
+      specialModuleType: null,
     }
   }
 
@@ -211,6 +216,7 @@ function computeTreemapLayoutFromAnalyzeInternal(
       titleBarHeight,
       children: [],
       sourceIndex,
+      specialModuleType: null,
     }
   }
 
@@ -240,6 +246,7 @@ function computeTreemapLayoutFromAnalyzeInternal(
     titleBarHeight,
     children: layoutChildren,
     sourceIndex,
+    specialModuleType: null,
   }
 }
 

apps/bundle-analyzer/lib/types.ts

@@ -33,3 +33,8 @@ export interface RouteManifest {
   staticRoutes: Array<Route>
   dynamicRoutes: Array<Route>
 }
+
+export enum SpecialModule {
+  POLYFILL_MODULE,
+  POLYFILL_NOMODULE,
+}

apps/bundle-analyzer/lib/utils.ts

@@ -1,5 +1,7 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
+import { SpecialModule } from './types'
+import { AnalyzeData } from './analyze-data'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -8,3 +10,19 @@ export function cn(...inputs: ClassValue[]) {
 export function jsonFetcher<T>(url: string): Promise<T> {
   return fetch(url).then((res) => res.json())
 }
+
+export function getSpecialModuleType(
+  analyzeData: AnalyzeData | undefined,
+  sourceIndex: number | null
+): SpecialModule | null {
+  if (!analyzeData || sourceIndex == null) return null
+
+  const path = analyzeData.source(sourceIndex)?.path || ''
+  if (path.endsWith('polyfill-module.js')) {
+    return SpecialModule.POLYFILL_MODULE
+  } else if (path.endsWith('polyfill-nomodule.js')) {
+    return SpecialModule.POLYFILL_NOMODULE
+  }
+
+  return null
+}

apps/bundle-analyzer/styles/globals.css

@@ -21,6 +21,8 @@
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
+  --polyfill: oklch(0.478 0.0185 252.37);
+  --polyfill-foreground: oklch(0.99 0 0);
   --radius: 0.625rem;
 }
 
@@ -42,6 +44,8 @@
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
   --ring: oklch(0.439 0 0);
+  --polyfill: oklch(0.478 0.0185 252.37);
+  --polyfill-foreground: oklch(0.99 0 0);
 }
 
 @theme inline {
@@ -64,6 +68,8 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --color-polyfill: var(--polyfill);
+  --color-polyfill-foreground: var(--polyfill-foreground);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);

crates/next-api/src/analyze.rs

@@ -367,6 +367,7 @@ pub async fn analyze_output_assets(output_assets: Vc<OutputAssets>) -> Result<Vc
             // Skip source maps.
             continue;
         }
+
         let output_file_index = builder.add_output_file(AnalyzeOutputFile { filename });
         let chunk_parts = split_output_asset_into_parts(*asset).await?;
         for chunk_part in chunk_parts {

crates/next-api/src/app.rs

@@ -62,14 +62,16 @@ use turbopack_core::{
         chunk_group_info::{ChunkGroup, ChunkGroupEntry},
     },
     output::{OutputAsset, OutputAssets, OutputAssetsWithReferenced},
-    raw_output::RawOutput,
     reference::all_assets_from_entries,
     reference_type::{CommonJsReferenceSubType, CssReferenceSubType, ReferenceType},
     resolve::{origin::PlainResolveOrigin, parse::Request, pattern::Pattern},
     source::Source,
+    source_map::SourceMapAsset,
     virtual_output::VirtualOutputAsset,
 };
-use turbopack_ecmascript::resolve::cjs_resolve;
+use turbopack_ecmascript::{
+    resolve::cjs_resolve, single_file_ecmascript_output::SingleFileEcmascriptOutput,
+};
 
 use crate::{
     dynamic_imports::{NextDynamicChunkAvailability, collect_next_dynamic_chunks},
@@ -1300,11 +1302,11 @@ impl AppEndpoint {
 
         let manifest_path_prefix = &app_entry.original_name;
 
-        // polyfill-nomodule.js is a pre-compiled asset distributed as part of next,
-        // load it as a RawModule.
+        // polyfill-nomodule.js is a pre-compiled asset distributed as part of next
         let next_package = get_next_package(project.project_path().owned().await?).await?;
-        let polyfill_source =
-            FileSource::new(next_package.join("dist/build/polyfills/polyfill-nomodule.js")?);
+        let polyfill_source_path =
+            next_package.join("dist/build/polyfills/polyfill-nomodule.js")?;
+        let polyfill_source = FileSource::new(polyfill_source_path.clone());
         let polyfill_output_path = client_chunking_context
             .chunk_path(
                 Some(Vc::upcast(polyfill_source)),
@@ -1314,13 +1316,26 @@ impl AppEndpoint {
             )
             .owned()
             .await?;
-        let polyfill_output_asset = ResolvedVc::upcast(
-            RawOutput::new(polyfill_output_path, Vc::upcast(polyfill_source))
-                .to_resolved()
-                .await?,
-        );
+
+        let polyfill_output = SingleFileEcmascriptOutput::new(
+            polyfill_output_path.clone(),
+            polyfill_source_path,
+            Vc::upcast(polyfill_source),
+        )
+        .to_resolved()
+        .await?;
+
+        let polyfill_output_asset = ResolvedVc::upcast(polyfill_output);
         client_assets.insert(polyfill_output_asset);
 
+        let polyfill_source_map_asset = SourceMapAsset::new_fixed(
+            polyfill_output_path.clone(),
+            *ResolvedVc::upcast(polyfill_output),
+        )
+        .to_resolved()
+        .await?;
+        client_assets.insert(ResolvedVc::upcast(polyfill_source_map_asset));
+
         let client_assets: ResolvedVc<OutputAssets> =
             ResolvedVc::cell(client_assets.into_iter().collect::<Vec<_>>());