Comma

Share a Rollup visualizer report

Bundle size arguments are won with a treemap and lost with a number. "The bundle grew 80 KB" invites a shrug. A treemap where one rectangle is visibly a date library you imported for one format call ends the conversation in about four seconds.

rollup-plugin-visualizer produces that treemap as a single self-contained stats.html — and then it sits in your build output, where the person who needs to see it cannot.

Publish it

// vite.config.ts (or rollup.config.js)
import { visualizer } from "rollup-plugin-visualizer";

export default {
  plugins: [visualizer({ filename: "stats.html", gzipSize: true })],
};

npm run build

curl -fsS -X PATCH \
  "https://commareports.com/api/v1/reports/$COMMA_REPORT_ID" \
  -H "Authorization: Bearer $COMMA_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d "$(jq -n --rawfile html stats.html \
        --arg title "Bundle — $APP — $(git rev-parse --short HEAD)" \
        '{title: $title, html: $html}')"

Or drag stats.html into the app.

The treemap stays interactive at the link — scripts run inside a sandboxed iframe (allow-scripts, no allow-same-origin).

What the URL changes

  • The reviewer sees the rectangle. Threads anchor to the chunk, so "this is the moment locale bundle, we only need en" lands on it. See commenting on HTML.
  • A size history per app. PATCH on every main-branch build; each revision keeps its own treemap. See revisions and diffs.
  • PR reviews get a link, not a screenshot. Post it from CI — see GitHub Actions.
  • Private by default — a treemap names every dependency you ship.

Limits

  • HTML body: 5 MB. stats.html for a very large app with sourcemap: true can approach it; the treemap template is the compact one.
  • Scripts run, sandboxed: allow-scripts, no allow-same-origin.
  • 60 requests/minute per token.

Try it

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

Create your first report →

Related