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
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.
Retrying this...
## TODO
- [x] deploy docs action
- [x] verify that re-compiled deps are ok, no version regression
- [x] turbopack with fumadocs errors out, why?
Will Binns-Smith
