Skip to content

ci(frontend): add bundle size analysis and monitoring - #1722

Merged
LucasSantana-Dev merged 12 commits into
mainfrom
fix-1637-bundle-size
Jul 10, 2026
Merged

LucasSantana-Dev merged 12 commits into
mainfrom
fix-1637-bundle-size

Conversation

@LucasSantana-Dev

@LucasSantana-Dev LucasSantana-Dev commented Jul 9, 2026 •

Copy link
Copy Markdown
Owner

Summary

Implement three-layer bundle size monitoring to prevent performance regressions:

  • Local inspection: rollup-plugin-visualizer generates interactive HTML bundle analysis
  • CI monitoring: compressed-size-action posts PR comments with size deltas
  • CI enforcement: size-limit with per-chunk budgets that fail on excessive growth

Implementation

Dependencies added

  • rollup-plugin-visualizer: Visual bundle composition analysis
  • size-limit + @size-limit/file: CI budget enforcement

Configuration

  • .size-limit.json: Per-chunk budgets based on current baseline with ~5% growth allowance
  • Vite config updated to generate dist/bundle-analysis.html
  • Bundle-size workflow now runs both size tools for complete monitoring

Documentation

  • BUNDLE_ANALYSIS.md: Baseline sizes, optimization strategies, regression handling guide

Acceptance Criteria

  • rollup-plugin-visualizer generates bundle report (local dev only)
  • size-limit CI check fails on excessive growth (>5% threshold)
  • Current bundle sizes documented as baseline

Test Plan

  • Build passes locally: `npm run build --workspace=packages/frontend`
  • size-limit passes with current bundle: `npx size-limit --config packages/frontend/.size-limit.json`
  • Bundle analysis HTML generated at `dist/bundle-analysis.html`
  • CI workflow validates all steps

Closes #1637


Summary by cubic

Adds three-layer bundle size monitoring for the frontend to prevent regressions, with a dedicated CI job for size-limit and secure checkouts for reliable measurements. Addresses #1637.

  • New Features

    • Local analysis: rollup-plugin-visualizer integrated in Vite; outputs dist/bundle-analysis.html.
    • PR monitoring: compressed-size-action posts size deltas (8‑char hash stripping, 100 B threshold).
    • CI enforcement: Separate “Size Limit Check” job with clean checkout (persist-credentials: false), npm ci --legacy-peer-deps, Prisma generate, shared + frontend builds, then npx size-limit --config .size-limit.json from packages/frontend.
    • Docs: packages/frontend/BUNDLE_ANALYSIS.md with baselines, limits, and optimization tips.
  • Dependencies

    • Added rollup-plugin-visualizer, size-limit, @size-limit/file.

Written for commit b31f55a. Summary will update on new commits.

Review in cubic

Summary by CodeRabbit

  • New Features

    • Added bundle-size monitoring in CI to help keep the frontend lightweight.
    • Added a frontend bundle analysis report for easier performance review.
    • Added size thresholds for key frontend bundles to track growth over time.
  • Documentation

    • Added guidance for interpreting bundle size changes and what to do when limits are exceeded.

implement three-layer bundle size monitoring:

1. rollup-plugin-visualizer: generates interactive HTML report of bundle
   composition at dist/bundle-analysis.html for local inspection during dev

2. size-limit: CI enforcement with per-chunk budgets based on current
   baseline, allowing ~5% growth margin (fails build on excessive increase)

3. baseline documentation: BUNDLE_ANALYSIS.md tracks current chunk sizes,
   accepted growth limits, optimization strategies, and instructions for
   handling size regressions

adds .size-limit.json with enforced limits per chunk:
- main: 75 KB gzip
- vendor-ui: 70 KB gzip
- vendor-react: 60 KB gzip
- vendor-radix: 43 KB gzip
- vendor-forms: 28 KB gzip
- vendor-state: 26 KB gzip

bundle-size workflow now runs both compressed-size-action (for PR comments)
and size-limit (for hard threshold enforcement).

Closes #1637
@github-actions github-actions Bot added dependencies Pull requests that update a dependency file ci frontend labels Jul 9, 2026
@coderabbitai

coderabbitai Bot commented Jul 9, 2026 •

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

This PR adds frontend bundle size monitoring: a new size-limit CI job, .size-limit.json configuration with gzip limits for main and vendor chunks, a Vite rollup-plugin-visualizer plugin generating a bundle analysis report, new devDependencies, and baseline documentation in BUNDLE_ANALYSIS.md.

Changes

Frontend Bundle Size Monitoring

Layer / File(s) Summary
Dependencies for size tracking
packages/frontend/package.json, packages/frontend/vite.config.ts
Adds size-limit and @size-limit/file devDependencies and imports visualizer from rollup-plugin-visualizer.
Vite visualizer plugin
packages/frontend/vite.config.ts
Wires the visualizer plugin into the Vite plugins array to generate dist/bundle-analysis.html without auto-opening it.
Size-limit configuration
packages/frontend/.size-limit.json
Defines gzip size limits for the main JS bundle and vendor chunk groups (UI, React, Radix, Forms, State) via glob patterns.
CI size-limit job
.github/workflows/bundle-size.yml
Adds a size-limit job that installs dependencies, generates the Prisma client, builds shared/frontend packages, and runs npx size-limit against the configuration.
Bundle analysis baseline docs
packages/frontend/BUNDLE_ANALYSIS.md
Documents baseline bundle sizes, tooling, enforcement behavior, and optimization guidance.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The changes satisfy the issue by adding visualizer output, size-limit CI enforcement, and baseline bundle documentation.
Out of Scope Changes check ✅ Passed The reviewed changes stay focused on bundle analysis, monitoring, and documentation with no clear unrelated additions.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the PR’s main frontend CI work on bundle size analysis and monitoring.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix-1637-bundle-size

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown

Failed to generate code suggestions for PR

@socket-security

socket-security Bot commented Jul 9, 2026 •

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Added@​size-limit/​file@​12.1.01001006782100
Addedsize-limit@​12.1.01001008082100
Addedrollup-plugin-visualizer@​7.0.19910010084100

View full report

@socket-security

socket-security Bot commented Jul 9, 2026 •

Copy link
Copy Markdown

Warning

Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
Obfuscated code: npm powershell-utils is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: package-lock.json → npm/rollup-plugin-visualizer@7.0.1 → npm/powershell-utils@0.1.0

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/powershell-utils@0.1.0. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

@github-actions

github-actions Bot commented Jul 9, 2026 •

Copy link
Copy Markdown
Warnings
⚠️

Branch fix-1637-bundle-size doesn't follow the standard prefix convention (feature/, fix/, refactor/, chore/, docs/, ci/, test/, release/).

Generated by 🚫 dangerJS against b31f55a

@github-actions

github-actions Bot commented Jul 9, 2026 •

Copy link
Copy Markdown

Size Change: 0 B

Total Size: 493 kB

ℹ️ View Unchanged
Filename Size
packages/frontend/dist/assets/AddStyledRoleForm-C3Hh34pr.js 3.11 kB
packages/frontend/dist/assets/Admin-DQMEWb36.js 2.3 kB
packages/frontend/dist/assets/AdminSupport-BWie-gy3.js 1.6 kB
packages/frontend/dist/assets/api-B1lHOZZ9.js 4.01 kB
packages/frontend/dist/assets/AutoMessages-CY1s3puD.js 2.65 kB
packages/frontend/dist/assets/AutoMod-6IIp64ik.js 4.19 kB
packages/frontend/dist/assets/badge-BRy27WLt.js 503 B
packages/frontend/dist/assets/BatchJobs-CuAhGRXh.js 3.72 kB
packages/frontend/dist/assets/Card-DmknBHp9.js 507 B
packages/frontend/dist/assets/Changelog-Dkf1uPiy.js 55.9 kB
packages/frontend/dist/assets/CommandsConfig-DQYezFQe.js 1.51 kB
packages/frontend/dist/assets/Config-C_BYJIO6.js 1.98 kB
packages/frontend/dist/assets/CustomCommands-BfrVGSDM.js 2.12 kB
packages/frontend/dist/assets/DashboardOverview-DxA-wmz-.js 3.95 kB
packages/frontend/dist/assets/dialog-CryXol77.js 959 B
packages/frontend/dist/assets/Docs-YIhMA3Y3.js 17.6 kB
packages/frontend/dist/assets/DocsShell-CnVN0iz0.js 1.42 kB
packages/frontend/dist/assets/EmbedBuilder-UyLAUnQ9.js 3.28 kB
packages/frontend/dist/assets/Features-B_M6ECN-.js 757 B
packages/frontend/dist/assets/GuildAutomation-DamcXB5T.js 2.88 kB
packages/frontend/dist/assets/index-BFJIknuY.js 70.9 kB
packages/frontend/dist/assets/index-DY6JagVQ.css 17.6 kB
packages/frontend/dist/assets/input-DYohlqBm.js 464 B
packages/frontend/dist/assets/label-B6cL3Efn.js 477 B
packages/frontend/dist/assets/Landing-BaskhfZB.js 5.2 kB
packages/frontend/dist/assets/LastFm-COePF4ei.js 1.74 kB
packages/frontend/dist/assets/legalNav-B6k3CWsW.js 274 B
packages/frontend/dist/assets/Levels-CmdX-T8r.js 2.27 kB
packages/frontend/dist/assets/Login-BKulZbhs.js 2.5 kB
packages/frontend/dist/assets/Lyrics-v7xtclHR.js 1.34 kB
packages/frontend/dist/assets/Moderation-C-CNb-BJ.js 3.77 kB
packages/frontend/dist/assets/Music-Cn5z8c6U.js 5.97 kB
packages/frontend/dist/assets/MusicConfig-43O-gwu7.js 1.65 kB
packages/frontend/dist/assets/PreferredArtists-Bzf_siH3.js 3.72 kB
packages/frontend/dist/assets/PrivacyPolicy-BWyTCmeV.js 1.77 kB
packages/frontend/dist/assets/ReactionRoles-C0qSzisB.js 7.04 kB
packages/frontend/dist/assets/RoleGroups-5BU73tAT.js 2.24 kB
packages/frontend/dist/assets/Roles-DSkXFb-f.js 3.34 kB
packages/frontend/dist/assets/rolldown-runtime-Cyuzqnbw.js 471 B
packages/frontend/dist/assets/routeMeta-BZjtwMbs.js 595 B
packages/frontend/dist/assets/SectionHeader-DXnUkNXd.js 895 B
packages/frontend/dist/assets/select-DptaWMC7.js 1.23 kB
packages/frontend/dist/assets/sentry-DhXOA89y.js 3.76 kB
packages/frontend/dist/assets/ServerLogs-CtjfDLvO.js 3.04 kB
packages/frontend/dist/assets/ServerSettings--3JFBplD.js 3.99 kB
packages/frontend/dist/assets/ServersPage-ZWP9Aam-.js 3.04 kB
packages/frontend/dist/assets/Skeleton-D2FHRO2A.js 236 B
packages/frontend/dist/assets/Spotify-nMoPlkGj.js 1.75 kB
packages/frontend/dist/assets/Starboard-CMIvczPt.js 1.82 kB
packages/frontend/dist/assets/StatTile-C33joOfm.js 640 B
packages/frontend/dist/assets/Support-mVoJ_pGn.js 1.56 kB
packages/frontend/dist/assets/switch-BJAW5k8F.js 543 B
packages/frontend/dist/assets/TermsOfService-CCefpvyN.js 1.59 kB
packages/frontend/dist/assets/TrackHistory-DCkbE815.js 2.31 kB
packages/frontend/dist/assets/TwitchNotifications-DL9QVQXs.js 2.44 kB
packages/frontend/dist/assets/useActiveHeading-CXIIWu8V.js 1.36 kB
packages/frontend/dist/assets/useFeatures-ZFQsQ5k6.js 2.07 kB
packages/frontend/dist/assets/usePageMetadata-DTv-6eVb.js 327 B
packages/frontend/dist/assets/vendor-forms-C-bof8GF.js 25.9 kB
packages/frontend/dist/assets/vendor-radix-qkfmDH9H.js 39.9 kB
packages/frontend/dist/assets/vendor-react-B7C34xnu.js 55.7 kB
packages/frontend/dist/assets/vendor-state-Dw4-MN6C.js 24.2 kB
packages/frontend/dist/assets/vendor-ui-BBN61NBD.js 66.2 kB

compressed-size-action

@cubic-dev-ai cubic-dev-ai Bot left a comment •

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

All reported issues were addressed across 6 files

Reply with feedback, questions, or to request a fix.

Re-trigger cubic

Comment thread .github/workflows/bundle-size.yml
Comment thread packages/frontend/vite.config.ts
@LucasSantana-Dev
LucasSantana-Dev enabled auto-merge (squash) July 9, 2026 04:11
compressed-size-action builds base/head in its own isolated temp
checkouts, never touching $GITHUB_WORKSPACE — the main checkout was
never npm-installed by an earlier step, so the size-limit CLI
resolved to nothing locally and npx silently fetched a bare fallback
with no preset configured, failing immediately.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

0 issues found across 1 file (changes from recent commits).

Requires human review: Auto-approval blocked by 2 unresolved issues from previous reviews.

Re-trigger cubic

compressed-size-action performs internal base/head checkouts and
build/install cycles with no documented guarantee about the final
state of package.json/package-lock.json in $GITHUB_WORKSPACE
afterward — the previous fix (installing deps as a later step in the
same job) still failed the same way. A separate job gets its own
clean checkout, sidestepping the dependency entirely.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

0 issues found across 1 file (changes from recent commits).

Requires human review: Auto-approval blocked by 2 unresolved issues from previous reviews.

Re-trigger cubic

working-directory already scopes to packages/frontend; the --config
flag was also prefixing packages/frontend, doubling the path and
producing ENOENT for packages/frontend/packages/frontend/.size-limit.json.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🧹 Nitpick comments (1)
packages/frontend/.size-limit.json (1)

1-38: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Margins are inconsistent with the "~5% growth" claim.

Computed headroom vs. baseline gzip sizes in BUNDLE_ANALYSIS.md ranges from ~4.5% (vendor-ui) to ~7% (vendor-forms), not a uniform 5%. Not a functional bug, but worth tightening or rewording the docs to avoid confusion later.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/frontend/.size-limit.json` around lines 1 - 38, The bundle size
margins in the size-limit config are inconsistent with the stated “~5% growth”
headroom. Update the limits in the size-limit definition to match the intended
percentage more closely, or adjust the related documentation in
BUNDLE_ANALYSIS.md to describe the actual per-bundle headroom instead of
implying a uniform 5%. Focus on the bundle entries in the size-limit config
(Main bundle, Vendor UI, Vendor React, Vendor Radix, Vendor Forms, Vendor State)
so the numbers and narrative stay aligned.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/bundle-size.yml:
- Around line 59-60: The Checkout PR step is persisting Git credentials
unnecessarily, which static analysis flagged. Update the actions/checkout usage
in the bundle-size workflow to disable persisted credentials for this job, since
it only needs to read the repository and never pushes commits. Use the Checkout
PR step identifier in the workflow to apply the change without affecting other
steps.
- Around line 68-69: Remove the --ignore-scripts flag from the dependency
install step in the bundle-size workflow so npm can run required install scripts
for prisma, `@prisma/engines`, and esbuild. Update the Install dependencies step
in the bundle-size job so the later db:generate and frontend vite build commands
can find their generated binaries and complete successfully.

---

Nitpick comments:
In `@packages/frontend/.size-limit.json`:
- Around line 1-38: The bundle size margins in the size-limit config are
inconsistent with the stated “~5% growth” headroom. Update the limits in the
size-limit definition to match the intended percentage more closely, or adjust
the related documentation in BUNDLE_ANALYSIS.md to describe the actual
per-bundle headroom instead of implying a uniform 5%. Focus on the bundle
entries in the size-limit config (Main bundle, Vendor UI, Vendor React, Vendor
Radix, Vendor Forms, Vendor State) so the numbers and narrative stay aligned.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: babe0989-fb70-4719-a0a7-88dd49311208

📥 Commits

Reviewing files that changed from the base of the PR and between c525aa5 and d69cf2b.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (5)
  • .github/workflows/bundle-size.yml
  • packages/frontend/.size-limit.json
  • packages/frontend/BUNDLE_ANALYSIS.md
  • packages/frontend/package.json
  • packages/frontend/vite.config.ts

Comment thread .github/workflows/bundle-size.yml
Comment thread .github/workflows/bundle-size.yml Outdated

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

0 issues found across 1 file (changes from recent commits).

Requires human review: Auto-approval blocked by 1 unresolved issue from previous reviews.

Re-trigger cubic

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

0 issues found across 1 file (changes from recent commits).

Auto-approved: Adds bundle size monitoring tooling and CI enforcement. Only dev dependencies, config, and documentation changes with no impact on production logic or data integrity.

Re-trigger cubic

@sonarqubecloud

Copy link
Copy Markdown

@LucasSantana-Dev
LucasSantana-Dev merged commit f1b33d6 into main Jul 10, 2026
46 checks passed
@LucasSantana-Dev
LucasSantana-Dev deleted the fix-1637-bundle-size branch July 10, 2026 01:16
LucasSantana-Dev added a commit that referenced this pull request Jul 10, 2026
## Summary
- \`bundle-size.yml\`'s pnpm shim (added in #1722) causes
\`preactjs/compressed-size-action\` to run a pnpm *recursive* build once
pnpm is on PATH, since this repo declares an npm \`workspaces\` field.
pnpm needs a \`pnpm-workspace.yaml\` for that, which doesn't exist here
— fails with "packages field missing or empty".
- Only surfaced now because #1754 (release PR) is the first PR since
#1722 merged to touch \`package.json\` (version bump), hitting the
workflow's path filter for the first time.
- Fix: drop the pnpm setup step — npm's native workspaces support runs
the \`build\` script fine without it.

## Test plan
- [x] CI green on this PR (bundle-size workflow re-runs with the fix)
- [ ] #1754 picks this up via update-branch and its compressed-size
check passes

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Removed the `pnpm` setup from `.github/workflows/bundle-size.yml` so
`preactjs/compressed-size-action` no longer switches to a `pnpm`
recursive build in this `npm`-managed repo. The action now runs the
`build` script via `npm` workspaces, resolving the "packages field
missing or empty" error from the absent `pnpm-workspace.yaml`.

<sup>Written for commit 7e50496.
Summary will update on new commits.</sup>

<a
href="https://cubic.dev/pr/LucasSantana-Dev/Lucky/pull/1759?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>

<!-- End of auto-generated description by cubic. -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci dependencies Pull requests that update a dependency file frontend size/xl

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ci(frontend): add bundle size analysis and monitoring

1 participant