Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 26 additions & 2 deletions docs/01-app/02-guides/package-bundling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,22 @@ The Next.js Bundle Analyzer is integrated with Turbopack's module graph. You can

To get started, run the following command and open up the interactive view in your browser.

```bash filename="Terminal"
```bash filename="Terminal" package="npm"
npx next experimental-analyze
```

```bash filename="Terminal" package="yarn"
yarn next experimental-analyze
```

```bash filename="Terminal" package="pnpm"
pnpm next experimental-analyze
```

```bash filename="Terminal" package="bun"
bunx next experimental-analyze
```

### Step 2: Filter and inspect modules

Within the UI, you can filter by route, environment (client or server), and type (JavaScript, CSS, JSON), or search by file:
Expand Down Expand Up @@ -62,10 +74,22 @@ Click a module to see its size, inspect its full import chain and see exactly wh

If you want to share the analysis with teammates or compare bundle sizes before/after optimizations, you can skip the interactive view and save the analysis as a static file with the `--output` flag:

```bash filename="Terminal"
```bash filename="Terminal" package="npm"
npx next experimental-analyze --output
```

```bash filename="Terminal" package="yarn"
yarn next experimental-analyze --output
```

```bash filename="Terminal" package="pnpm"
pnpm next experimental-analyze --output
```

```bash filename="Terminal" package="bun"
bunx next experimental-analyze --output
```

This command writes the output to `.next/diagnostics/analyze`. You can copy this directory elsewhere to compare results:

```bash filename="Terminal"
Expand Down
Loading