Frontend: Add performance budget and bundle analysis in CI

[Junirezz]

Goal

Prevent bundle regressions over time.

Scope

• Add bundle analyzer script and artifact output
• Define budget thresholds (initial JS/CSS)
• Fail or warn on significant regression

Acceptance Criteria

• CI produces bundle report
• Budget is defined and enforced or reviewed
• Docs explain how to inspect bundle

[Codex723]

@Codex723 has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hey, I'd like to take on issue

Bundle regression prevention is a great guardrail to have in CI. Here's my approach:

Bundle Analyzer
Add @next/bundle-analyzer (or rollup-plugin-visualizer depending on the build tool) and wire up an analyze npm script that generates an HTML report as a CI artifact — uploadable via actions/upload-artifact so it's inspectable per PR.

Budget Thresholds
Define initial JS and CSS size budgets in a config file (e.g. bundle-budget.json) so thresholds are visible and easy to adjust without touching CI config:

{
  "maxInitialJS": 250,
  "maxInitialCSS": 50
}

CI Enforcement
Add a lightweight budget check script that reads the build output stats, compares against the budget, and either fails the job (hard limit) or posts a warning annotation (soft limit for gradual regressions). I'd suggest fail on >20% over budget, warn between 10–20% — but happy to align on whatever thresholds the team prefers.

Docs
Add a short section to the README or a docs/bundle-analysis.md explaining how to run the analyzer locally, read the CI artifact, and update budget thresholds.

Comfortable with frontend CI tooling and bundle optimization workflows. Happy to take this.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Codex723 to this issue.

[Favourof]

@Favourof has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

I will love to work on this issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Favourof to this issue.

[broda-spendy]

@broda-spendy has applied to work on this issue as part of the Stellar Wave Program's 3rd wave.

Hi, I'm a front-end developer and I'd love to fix your issue.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @broda-spendy to this issue.

[drips-wave]

Congratulations, @broda-spendy! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on March 30, 2026.

🧑‍💻 @broda-spendy: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊