How do I share a source-map-explorer report?

Run `npx source-map-explorer 'dist/**/*.js' --html bundle.html`, which writes a single self-contained treemap, then drag that file into Comma or PATCH it to the API. One request, no assets.

Does the interactive treemap still work at the URL?

Yes. Report HTML renders with scripts enabled inside a sandboxed iframe, so drilling into a module, hovering for byte counts and the filter box all behave.

Why publish it instead of screenshotting the treemap?

Because the interesting part is three levels down. A screenshot shows the top-level rectangles; the reviewer needs to click into `node_modules` and find the 400 KB date library nobody meant to ship.

How do I catch bundle-size regressions?

PATCH the same report id on every main build. The URL is stable and each build is kept as a revision, so a jump in a module's share is visible as a diff rather than noticed months later.

Can reviewers claim a specific dependency?

Yes. Anchored threads sit on the module, so "I'll switch this to the ESM build" is recorded on the rectangle it refers to.

Share a source-map-explorer report

source-map-explorer answers the only bundle question that matters — which of my dependencies is 400 KB and why is it in the main chunk — by reading your source maps and drawing a treemap of what actually shipped.

The answer is three clicks deep in that treemap, which is why screenshotting it accomplishes nothing.

Generate

npx source-map-explorer 'dist/assets/*.js' --html bundle.html

CRA and similar layouts:

npx source-map-explorer 'build/static/js/*.js' --html bundle.html

The --html output is a single self-contained file — the treemap library and the data are both inlined — which makes it the easiest kind of report to publish.

Publish it

Drag bundle.html into the app, or from CI:

curl -fsS -X PATCH "https://commareports.com/api/v1/reports/$REPORT_ID" \
  -H "Authorization: Bearer $COMMA_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d "$(jq -n --rawfile html bundle.html \
        --arg title "Bundle — $GITHUB_REF_NAME" '{title: $title, html: $html}')"

Scripts run inside a sandboxed iframe (allow-scripts, no allow-same-origin), so the reviewer can drill in exactly as you can locally.

Catch regressions with revisions

PATCH one report id on every main build. The URL is stable, and each build appends a revision — so a dependency that quietly doubled in size shows up as a diff between two treemaps rather than as a support ticket about load times six weeks later.

Pair it with a size budget in CI: the gate fails the build, the report explains it.

What review adds

Anchored threads on a module — "this is the moment/locale bundle, I'll swap it" recorded on the rectangle. See commenting on HTML.
Access per report — private, team, domain-gated, or named reviewers. See the sharing model.

Limits

Entry HTML: 5 MB. A very large app's inlined treemap data can approach this — analyze per entry chunk rather than the whole dist/ if it does.
Assets: 25 MB per file, 250 MB and 500 files total.
60 requests/minute per token.

Try it

Comma is free — unlimited reports, unlimited commenters, unlimited revision history.

Publish a bundle report →