Recommendations for analyzing bundles sizes?

[vincerubinetti]

I personally am using React Router v7 in framework mode, and I'm building a completely static (all routes are pre-rendered) site, but this discussion could serve as recommendations for any and all modes of React Router operation.

There are many tools available for analyzing bundle sizes. I'm wondering if anyone, especially the maintainers, have any recommendations for which tools would be most effective.

In my case, I've tried vite-bundle-analyzer, rollup-plugin-visualizer, and vite-bundle-visualizer. They all offer insights, but none seem to exactly reflect either the size of the static build output files or the over-the-network transfer sizes.

[Samielakkad]

Those tools do not exactly match the build directory or Network panel because they measure different things:

• a visualizer attributes modules to Rollup chunks;
• the build directory shows raw minified bytes on disk;
• browser transfer size is the response after the deployed server/CDN applies Brotli or gzip, headers, caching and possibly transformations.

I would use a three-part check rather than choose one number as canonical.

1. Module composition

Keep rollup-plugin-visualizer (or an equivalent) for answering why is this chunk large?. Enable its gzip/Brotli estimates, but treat them as estimates rather than deployed transfer sizes.

2. Exact build artifacts

Measure build/client after react-router build. If you need a stable machine-readable map, Vite can emit .vite/manifest.json with build.manifest: true:

https://vite.dev/config/build-options.html#build-manifest

The manifest maps source entries and dynamic imports to their hashed JS/CSS/assets. That is useful for tracking route chunk changes in CI.

For example, record both raw and locally compressed sizes:

find build/client -type f \( -name '*.js' -o -name '*.css' \) -print0 |
  xargs -0 -n1 sh -c '
    f="$0"
    raw=$(wc -c < "$f")
    gzip=$(gzip -9 -c "$f" | wc -c)
    printf "%9d %9d %s\n" "$raw" "$gzip" "$f"
  ' |
  sort -nr

3. Real transfer size

Serve the output using the same compression and caching configuration as production, then inspect a cold navigation in browser DevTools with cache disabled. The Network panel's Transferred column is the authoritative client cost for that deployment. Also test direct visits and client navigations because Framework Mode intelligently code-splits route modules.

For a fully pre-rendered site, pre-rendering mainly changes the HTML/data available at first load; it does not make client route chunks disappear because React still hydrates and handles later navigation. So I would budget separately for:

• initial document + initially imported chunks;
• each route's lazy chunk;
• shared vendor chunks;
• total raw static output.

That explains why a visualizer's aggregate chart should not be expected to equal either the directory total or one page's network transfer.