Adds a table view to compare mode, switchable from the treemap via a
toggle in the top bar. The `DiffTable` lists every source file with its
A/B sizes, delta, and env badges, and supports text search. Removed
sources (which can't appear in the treemap since they don't exist in the
current build) are only visible here.
The view toggle defaults to Table when entering compare mode and resets
to Treemap when leaving it.
<!-- NEXT_JS_LLM_PR -->
Co-authored-by: vercel-fleet-prod[bot] <318278635+vercel-fleet-prod[bot]@users.noreply.github.com>
Co-authored-by: Will Binns-Smith <755844+wbinnssmith@users.noreply.github.com>
Adds a compare mode to the bundle analyzer. When the user picks a
historical snapshot from the new baseline picker in the top bar, the UI
switches into compare mode: routes are diff'd by name and size, and the
per-route view shows a `DiffTreemap` that colors each source tile by its
change status (added/removed/grew/shrank/unchanged).
The compare sidebar shows the import chain for the selected tile on
either the baseline ("A") or current ("B") side. Route totals are
fetched in parallel so the route picker can sort by largest impact and
classify routes as `changed`/`identical` rather than just name-presence.
<!-- NEXT_JS_LLM_PR -->
---------
Co-authored-by: vercel-fleet-prod[bot] <318278635+vercel-fleet-prod[bot]@users.noreply.github.com>
Co-authored-by: Will Binns-Smith <755844+wbinnssmith@users.noreply.github.com>
This:
- Removes the uncompressed/compressed toggle in favor of just using
compressed sizes when sizing treemap nodes
- Fixes the width of the client/server and file type triggers so that
they don't reflow horizontally when their content changes
Fixes PACK-6295
Fixes PACK-6298
The top bar is getting quite wide with all of its button toggle groups.
This:
- Converts the Compressed/Uncompressed and Client/Server toggles to
shadcn `<Select>`s
- Adds a custom `<MultiSelect>` implementation since this is missing in
shadcn. This composes shadcn’s popovers and a series of checkboxes,
along with accessibility attributes and keyboard shortcuts.
- Uses this `<MultiSelect>` for the type filter
- Removes the divider between these since there aren’t any groups left
to divide
<img width="1547" height="719" alt="image"
src="https://github.com/user-attachments/assets/4041f6b7-2a47-4e17-b020-448ac0103740"
/>
- Adds decorated kbd-style shortcut labels to cue the user into using them
- Listens only for the appropriate OS or Ctrl key on Mac/Others
- Esc now clears and focuses the search field and the treemap focus
- Does not trigger in the case where the user has another element focused
### What?
fix the import chain showing only modules relevant to the current route
fix module graph being merged by path. It's keyed by identifier now.
also add more info to import chain, e. g. layer info. and more details in tooltip.
For small routes, it can appear like the polyfill chunk takes up a sizable amount of data, but `polyfill-nomodule.js` is only sent to legacy browsers. This makes it clearer.
This PR enhances the bundle analyzer by adding visual indicators for polyfill chunks, and noting they're conditionally sent to modern or legacy browsers. The changes include:
- Adds a source map to polyfill chunks (for the large pre-bundled input only)
- Visually distinguished polyfill chunks in the treemap by lightening their color
- Added a "Polyfill" badge (other badges coming soon!) with text when viewing polyfill chunk details
<img width="388" height="227" alt="image" src="https://github.com/user-attachments/assets/bcebfba6-1e10-459a-9364-b6b8197cd3df" />
Fixes PACK-5826
This adds an interactive Treemap-style bundle analyzer app to the Next.js codebase and writes a copy to disk when `next build --experimental-analyze` is run.
* It's a separate app in `apps/bundle-analyzer` as `@next/bundle-analyzer-ui` that uses `output: 'export'` to export a purely static Next.js app
* These static resources are copied into Next.js's published `dist` directory in the `next` package itself. Users never depend on `@next/bundle-analyzer-ui`
* When users run `next build --experimental-analyze`, these static resources are copied into the user's `.next/diagnostics/analyze` along with the data payloads needed to visualize the user's app
In an upcoming PR, we'll add `next experimental-analyze` that will create analysis files without build artifacts, as well as optionally start a static file server.
Test Plan: Ran `next build --experimental-analyze` in a test app and ran a static file server to run it.
Will Binns-Smith
