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>
After each `next experimental-analyze` run, snapshot the output data
into a rolling `history/` directory so later builds can use it as a
comparison baseline.
Each snapshot gets a `metadata.json` with git branch/sha/dirty status,
Next.js version, and route count. A `history/history.json` index
(newest-first, capped at 20 entries) lets the UI list available
baselines without re-reading every snapshot directory. Old snapshots
beyond the cap are pruned automatically.
The client-side `SnapshotMetadata` type mirror lives in
`apps/bundle-analyzer/lib/snapshot.ts` so the compare UI can reference
it without a build-time dependency on the Next.js package.
<!-- 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:
- Fetches `data/_app/analyze.data` alongside the current route's data
- Merges `_app` modules into the current route's `AnalyzeData` before
visualization using a `mergeAnalyzeData()`, which merges the two
datasets, reindexing the additional ones and recreating the binary data
format expected by the treemap.
## Test plan
- [x] Add a large dependency (e.g. `moment`) in `pages/_app.tsx`
- [x] Run `next experimental-analyze`
- [x] Open the bundle analyzer and select a pages page
- [x] Verify moment appears in the treemap
- [x] Verify App Router projects (no `_app`) work without errors
### 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
