Commit Graph

5 Commits

Author SHA1 Message Date
Will Binns-Smith 585126e2b3 bundle-analyzer: Add sizes to treemap, status bar (#86966)
![CleanShot 2025-12-08 at 19.58.55@2x.png](https://app.graphite.com/user-attachments/assets/43f13844-abe2-4a1b-bbc4-764554ca6634.png)
2025-12-09 15:02:54 -08:00
Tobias Koppers e9a3ba935f Turbopack: fix import chain by determining depth locally per route (#86350)
### 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.
2025-11-21 11:39:18 +01:00
Will Binns-Smith 24033486b5 next-analyze: improve network error visuals (#86222)
This improves how network errors (such as when the bundle analyzer error server is shut down) are shown.

Fixes PACK-5877

![image.png](https://app.graphite.com/user-attachments/assets/69e57bb7-03ca-45ec-9816-f4bc512bfd58.png)

![image.png](https://app.graphite.com/user-attachments/assets/450ed52c-5368-49ee-a149-e7b17a8c21db.png)
2025-11-20 11:13:57 -08:00
Will Binns-Smith 3e5b96a17e next analyze: annotate polyfill modules in UI (#86062)
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
2025-11-17 18:02:03 -08:00
Will Binns-Smith 617ead5753 Turbopack: Add bundle analyzer UI to next build --experimental-analyze (#85788)
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.
2025-11-14 15:50:42 -08:00