Repository navigation
ci(frontend): add bundle size analysis and monitoring - #1722
Conversation
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
📝 WalkthroughWalkthroughThis PR adds frontend bundle size monitoring: a new ChangesFrontend Bundle Size Monitoring
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
Failed to generate code suggestions for PR |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
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.
|
|
Size Change: 0 B Total Size: 493 kB ℹ️ View Unchanged
|
There was a problem hiding this comment.
All reported issues were addressed across 6 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/frontend/.size-limit.json (1)
1-38: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueMargins are inconsistent with the "~5% growth" claim.
Computed headroom vs. baseline gzip sizes in
BUNDLE_ANALYSIS.mdranges 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
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
.github/workflows/bundle-size.ymlpackages/frontend/.size-limit.jsonpackages/frontend/BUNDLE_ANALYSIS.mdpackages/frontend/package.jsonpackages/frontend/vite.config.ts
There was a problem hiding this comment.
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
- Add persist-credentials: false to checkout steps (security hardening) - Remove --ignore-scripts from npm ci to allow prisma and esbuild engine setup via postinstall scripts
There was a problem hiding this comment.
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
|
## 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. -->



Summary
Implement three-layer bundle size monitoring to prevent performance regressions:
Implementation
Dependencies added
rollup-plugin-visualizer: Visual bundle composition analysissize-limit+@size-limit/file: CI budget enforcementConfiguration
.size-limit.json: Per-chunk budgets based on current baseline with ~5% growth allowancedist/bundle-analysis.htmlDocumentation
BUNDLE_ANALYSIS.md: Baseline sizes, optimization strategies, regression handling guideAcceptance Criteria
Test Plan
Closes #1637
Summary by cubic
Adds three-layer bundle size monitoring for the frontend to prevent regressions, with a dedicated CI job for
size-limitand secure checkouts for reliable measurements. Addresses #1637.New Features
rollup-plugin-visualizerintegrated in Vite; outputsdist/bundle-analysis.html.compressed-size-actionposts size deltas (8‑char hash stripping, 100 B threshold).persist-credentials: false),npm ci --legacy-peer-deps, Prisma generate, shared + frontend builds, thennpx size-limit --config .size-limit.jsonfrompackages/frontend.packages/frontend/BUNDLE_ANALYSIS.mdwith baselines, limits, and optimization tips.Dependencies
rollup-plugin-visualizer,size-limit,@size-limit/file.Written for commit b31f55a. Summary will update on new commits.
Summary by CodeRabbit
New Features
Documentation