Next.js experimental bundle analyzer feedback #86731
Replies: 20 comments 32 replies
-
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
I am getting this: |
Beta Was this translation helpful? Give feedback.
-
|
With canary.14 it works fine |
Beta Was this translation helpful? Give feedback.
-
|
Love this addition! Is there a way for userland to run a hosted instance of its bundle analyzer, like you're doing in your demo https://nextjs.org/blog/next-16-1#nextjs-bundle-analyzer-experimental |
Beta Was this translation helpful? Give feedback.
-
|
You can use the output from |
Beta Was this translation helpful? Give feedback.
-
|
Unless your application is very small you likely wouldn't want to run this on every build, as it's a bit slow. It might make more sense as a GitHub Action that you could trigger on specific PRs. |
Beta Was this translation helpful? Give feedback.
-
|
Not sure what the expectation here is, but reading through the release notes for the 16.1 release it looks like you should just be able to run > @**/nextjs@0.1.0 analyze /Users/**/apps/nextjs
> next experimental-analyze
Invalid project directory provided, no such directory: /Users/**/apps/nextjs/experimental-analyzeOr, using the > @**/nextjs@0.1.0 analyze /Users/**/apps/nextjs
> next experimental-analyze --serve
error: unknown option '--serve'Is it still Canary only? |
Beta Was this translation helpful? Give feedback.
-
|
I am getting the same error. I upgraded to 16.1 and added |
Beta Was this translation helpful? Give feedback.
-
|
@ValentinGurkov is it a monorepo? have you reinstalled deps and such? you can run |
Beta Was this translation helpful? Give feedback.
-
Apologies, I feel embarrassed, but it was due to my version in the pnpm catalog. The codemod to update next does not update the catalog, instead it inlines the version in package.json and I have messed up when carrying the new version to the catalog. I can confirm that I can run an analysis just fine with 16.1.0. |
Beta Was this translation helpful? Give feedback.
-
|
No worries! This explains a few other claims I've seen around, and maybe something to call out from our side. |
Beta Was this translation helpful? Give feedback.
-
Yes. Catalog can be tricky in monorepo. The same thing happened to me for the previous versions when I updated Next using codemod. I thought they would be smart enough to detect the use of catalog. |
Beta Was this translation helpful? Give feedback.
-
|
Nice, the analyzer was something I was eager to use, thank you for that :) I assune at some point the Next.js DevTools MCP will make it possible for the ai to bundles by route, using a new MCP function that is to be released!? In the meantime would it be possible to put the params into the url, like the current route, compressed or not, ... this way the ai could access the output directly and we could prompt our agent to analyze the packages of a route and then create a markdown document with optimization suggestions. Currently the ai only sees the default route when it open localhost:4000 and it can not navigate around. |
Beta Was this translation helpful? Give feedback.
-
|
I just read through the 16.1 release notes, and checked out the experimental bundle analyzer's demo link: https://turbopack-bundle-analyzer-demo.vercel.sh/ If you go to the markdownPath, and show the Client data, it seems like it's including eslint in the bundle size. Is it just used for SSR, or is it actually in the client bundle? I know it's experimental, but is there an easy way to check? |
Beta Was this translation helpful? Give feedback.
-
|
The showcased project is indeed, on purpose lazy-loading a linter. |
Beta Was this translation helpful? Give feedback.
-
Fair enough. |
Beta Was this translation helpful? Give feedback.
-
|
True, I think I assumed the blog post called out, cuz it does call it out in the previous section, but that's the react.dev site under the microscope :) they do have live code environments. I was able to trace it exactly as the bundle analyzer indicates. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Mmmm well if everyone adopts Turbopack, then yeah? I mean, the |
Beta Was this translation helpful? Give feedback.
-
|
can't launch 2 analysers at the same time because they try to use the same port it would be nice if it could fail over to a different port similar to the regular next.js dev server:
|
Beta Was this translation helpful? Give feedback.
-
|
May I ask why you are running two analyzers at the same time? Is it possible to run one analyzer and then open multiple tabs? You can change the port number like this next experimental-analyze --port 3003 |
Beta Was this translation helpful? Give feedback.
-
|
thank you for the flag - i wanted to compare multiple different projects (all using next.js) at the same time. |
Beta Was this translation helpful? Give feedback.
-
|
I see! Like in a monorepo! With each instance, you can add a unique port number! |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the feedback. We can still do something similar to the Next.js dev server and find an available open port if the default one is in use. |
Beta Was this translation helpful? Give feedback.
-
|
This is a revelation! Was nearly impossible for us to figure out (except through binary search) why certain modules were getting imported. Now it's easy! Thanks so much. One thing that would be useful (or perhaps I'm misunderstanding?) is removing the async loaded modules from display with a checkbox. We've done some optimizations so those modules are not loaded on the first page load so currently including them gives a somewhat inflated view of the route size. Kudos again to the team, huge. |
Beta Was this translation helpful? Give feedback.
-
|
Same. I have tons of dynamic imports, so it's a bit confusing |
Beta Was this translation helpful? Give feedback.
-
|
thanks! yeah figuring out how to model dynamic imports in the UI is unclear. in the import chain we annotate the edges differently, but it isn't super obvious. A checkbox to drop all async edges is an interesting idea @wbinnssmith ? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, that works. |
Beta Was this translation helpful? Give feedback.
-
|
I'm getting 
Here's my config: {
output: "export",
distDir: "./docs",
basePath: "/t2-mapper",
assetPrefix: "/t2-mapper/",
trailingSlash: true,
}And |
Beta Was this translation helpful? Give feedback.
-
|
I couldn't really repro, got any repo to take a look at? |
Beta Was this translation helpful? Give feedback.
-
|
Here's a repro: https://github.com/exogen/next-experimental-analyze The problem appears to be simply using a non-default |
Beta Was this translation helpful? Give feedback.
-
|
I see, I had done first a pass with export only, and didn't remove |
Beta Was this translation helpful? Give feedback.
-
|
Getting an error: Analyzing a production build...
Unhandled Rejection: [Error: Expected process result to be a module, but it could not be processed
Debug info:
- Execution of write_analyze_data_with_issues_operation failed
- Execution of write_analyze_data_with_issues_operation_inner failed
- Execution of Project::emit_all_output_assets failed
- Execution of *emit_assets failed
- Execution of all_assets_from_entries_operation failed
- Execution of *all_assets_from_entries failed
- Execution of get_analyze_data_operation failed
- Execution of *AnalyzeDataOutputAsset::new failed
- Execution of output_of_endpoints failed
- Execution of <InstrumentationEndpoint as Endpoint>::output failed
- Execution of InstrumentationEndpoint::output_assets failed
- Execution of InstrumentationEndpoint::node_chunk failed
- Execution of *<NodeJsChunkingContext as ChunkingContext>::entry_chunk_group failed
- Execution of Project::server_chunking_context failed
- Execution of *get_server_chunking_context failed
- Execution of Project::module_ids failed
- Execution of whole_app_module_graph_operation failed
- Execution of *ModuleGraph::from_single_graph failed
- Execution of *SingleModuleGraph::new_with_entries failed
- Execution of Project::get_all_entries failed
- Execution of <AppEndpoint as Endpoint>::entries failed
- Execution of get_app_page_entry failed
- Execution of ProcessResult::module failed
- Expected process result to be a module, but it could not be processed] {
code: 'GenericFailure' |
Beta Was this translation helpful? Give feedback.
-
|
Got a similar error. Unhandled Rejection: [Error: failed to analyze ecmascript module '[project]/cartes/proxy.ts [middleware] (ecmascript)' Caused by:
Debug info:
Tried removing the proxy but it fails on other modules with a similar error. |
Beta Was this translation helpful? Give feedback.
-
|
Getting this error bunx next experimental-analyze |
Beta Was this translation helpful? Give feedback.
-
|
Anyway to check which js bundles were lazy loaded vs which were loaded when route renders? This info would be helpful when optimizing for initial page loads. |
Beta Was this translation helpful? Give feedback.
-
|
It would be very helpful if I can compare two reports somehow, for example:
|
Beta Was this translation helpful? Give feedback.
-
|
Ditto this: we are currently using the webpack analyzer and a third-party tool (namely this one: https://github.com/hashicorp/nextjs-bundle-analysis) to check trends across different PRs, and we have some rules in place that will basically block a PR if excessive bloat is detected, such as when a developer accidentally includes a heavy library into the client bundle via accidental This is currently not possible with the experimental bundle analyzer: by looking at the files generated with the |
Beta Was this translation helpful? Give feedback.
-
|
This is also hugely important to us too. A size diff on a PR as part of CI job allows us to catch bundle regressions early and proactively rather than relying on devs to do ad-hoc analysis. |
Beta Was this translation helpful? Give feedback.
-
|
Any tip to overcome the " code: 'GenericFailure'" error described above ? Not being able to analyse the bundle size is quite a problem for serious web applications... |
Beta Was this translation helpful? Give feedback.
-
|
It now works (without update, I don't know why) but I get lots of false negatives : libs not loaded in the initial bundle thanks to lazy loading, but appearing in this bundle analyzer. Also, Maplibre is more than 500 ko compressed, where in the reality it's only half, 260 ko. |
Beta Was this translation helpful? Give feedback.
-
|
I had a problem with the server giving me 500 and no output. I ended up generating only output and starting the server myself. This is how I see analyze results now: |
Beta Was this translation helpful? Give feedback.
-
|
hard to tell if this has been mentioned. I recently optimized a bundle using the webpack based solution. I had discovered that in our initial app chunk we were importing all of a module and only using one import. in this new analyzer, is there a way to see the initial entry chunks too? I only seem to see routes? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah I noticed the tool has the data for "_app" but just doesn't expose the data since it only pulls the list of routes |
Beta Was this translation helpful? Give feedback.
-
|
With the following import createMDX from '@next/mdx'
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
reactCompiler: true,
}
const withMDX = createMDX({
options: {
remarkPlugins: ['remark-gfm'],
rehypePlugins: [],
},
})
export default withMDX(nextConfig)I get: I guess it's due to |
Beta Was this translation helpful? Give feedback.
-
|
I'm missing the option to not filter by route. (Trying to investigate why Turbopack is duplicating so many chunks across the app - the service worker cache is around 15x bigger when using Turbopack on Next.js 6.1.3.) |
Beta Was this translation helpful? Give feedback.
-
|
Hey! Love the new bundle analyzer, and love that it allows to view JS data distribution specifically per page (a great DX detail that most other tools miss.) A few points of feedback (I worked with
|
Beta Was this translation helpful? Give feedback.
-
|
This guy DXes 💪 |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Feedback thread for the new bundle analyzer that integrates with Turbopack's module graph.
Beta Was this translation helpful? Give feedback.
All reactions