Skip to content

Conversation

@delbaoliveira
Copy link
Contributor

@delbaoliveira delbaoliveira commented Dec 16, 2025

This PR adds instructions on how to run and navigate the new turbopack bundle analyzer to the existing Optimizing package bundling guide
.
Todo:

  • Embed video
  • Add image for import chain

@nextjs-bot nextjs-bot added created-by: Next.js DevEx team PRs by the DX team. Documentation Related to Next.js' official documentation. labels Dec 16, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Dec 16, 2025

All broken links are now fixed, thank you!

@delbaoliveira delbaoliveira changed the title Guide: Update package bundling guide to include Turbopack Bundle Analyzer Guide: Update Optimizing Package Bundling to include Turbopack Bundle Analyzer Dec 16, 2025
---

Bundling external packages can significantly improve the performance of your application. <AppOnly>By default, packages imported inside Server Components and Route Handlers are automatically bundled by Next.js. This page will guide you through how to analyze and further optimize package bundling.</AppOnly> <PagesOnly>By default, packages imported into your application are not bundled. This can impact performance or might not work if external packages are not pre-bundled, for example, if imported from a monorepo or `node_modules`. This page will guide you through how to analyze and configure package bundling.</PagesOnly>
Large bundles can negatively impact your application's performance. <AppOnly>By default, Next.js automatically bundles packages imported inside Server Components and Route Handlers.</AppOnly><PagesOnly>By default, packages imported into your application are not bundled, which can be a source of performance issues if external packages are not pre-bundled, for example, if imported from a monorepo or `node_modules`.</PagesOnly>. In some cases, you may need to further optimize it.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Large bundles can negatively impact your application's performance. <AppOnly>By default, Next.js automatically bundles packages imported inside Server Components and Route Handlers.</AppOnly><PagesOnly>By default, packages imported into your application are not bundled, which can be a source of performance issues if external packages are not pre-bundled, for example, if imported from a monorepo or `node_modules`.</PagesOnly>. In some cases, you may need to further optimize it.
Large bundles can negatively impact your application's performance. <AppOnly>By default, Next.js automatically bundles packages imported inside Server Components and Route Handlers.</AppOnly><PagesOnly>By default, packages imported into your application are not bundled, which can be a source of performance issues if external packages are not pre-bundled, for example, if imported from a monorepo or `node_modules`.</PagesOnly>. In some cases, you may need to further optimize client bundles.

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

```bash
npx next experimental-analyze --serve
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we are going to drop the --serve flag

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
npx next experimental-analyze --serve
npx next experimental-analyze

@@ -1,20 +1,61 @@
---
title: How to optimize package bundling
title: Optmizing package bundling
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
title: Optmizing package bundling
title: Optimizing package bundling


## Turbopack Bundle Analyzer (Experimental)

> This experimental feature is available in v16.1 and above. You can share feedback on the [dedicated GitHub discussion](https://github.com/vercel/next.js/discussions/86731).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am hosting a demo here: https://turbopack-bundle-analyzer-demo.vercel.sh/

we plan on keeping it roughly up to date, and will be linking from the blog post.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

created-by: Next.js DevEx team PRs by the DX team. Documentation Related to Next.js' official documentation.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants