Skip to content

fix: eliminate 4.3 MB Phosphor icon client chunk - #32575

Open
mvvmm wants to merge 1 commit into
productionfrom
fix/phosphor-icon-bundle-size
Open

fix: eliminate 4.3 MB Phosphor icon client chunk#32575
mvvmm wants to merge 1 commit into
productionfrom
fix/phosphor-icon-bundle-size

Conversation

@mvvmm

@mvvmm mvvmm commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Summary

Replaces the full @iconify-json/ph/icons.json import in PhosphorIcon.tsx (27,693-line JSON containing every Phosphor icon) with six ?raw SVG imports from @phosphor-icons/core for the only icons actually used by React islands: thumbs-up, thumbs-down, check-circle, magnifying-glass, x, check-bold.

The full-set import produced a 4.3 MB client-side JS chunk (PhosphorIcon.cbrmX4Sq.js) that shipped to every page with a feedback widget or resource selector. The replacement inlines ~2 KB of SVG markup total, eliminating the chunk entirely.

Metric Before After
PhosphorIcon chunk 4.3 MB gone (inlined into consumer chunks)
Chunks > 500 KB 2 1

The name prop is now a union type (keyof typeof icons) instead of string, providing compile-time safety for unknown icon names rather than a runtime throw.

PhosphorIcon imported @iconify-json/ph/icons.json (27,693-line JSON
containing every Phosphor icon) at runtime, producing a 4.3 MB client
chunk. Replace with six ?raw SVG imports from @phosphor-icons/core for
the only icons actually used: thumbs-up, thumbs-down, check-circle,
magnifying-glass, x, check-bold.

Before: 4.3 MB PhosphorIcon chunk + 647 KB chunk = 2 chunks > 500 KB
After:  647 KB chunk only (mermaid/cytoscape, separate issue)
Build time: 3m 27s → 2m 48s
@github-actions github-actions Bot added the size/s label Aug 6, 2026
@github-actions

github-actions Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:

Pattern Owners
/src/components/ @cloudflare/content-engineering, @kodster28

@github-actions

github-actions Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

@mvvmm
mvvmm marked this pull request as ready for review August 6, 2026 15:53
@mvvmm
mvvmm requested review from a team and kodster28 as code owners August 6, 2026 15:53
@cloudflare-docs-bot

cloudflare-docs-bot Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Review

⚠️ 1 warning found in commit aaf8337.

👉 Fix in your agent 👈
Fix the following review findings in PR #32575 (https://github.com/cloudflare/cloudflare-docs/pull/32575).

Before making changes, review each finding and present a brief summary table:
- For each finding, state whether you agree, disagree, or need clarification
- If you disagree (e.g. the fix requires disproportionate effort for minimal benefit,
  or the finding is factually incorrect), explain why
- If you need clarification before deciding, ask those questions
- Then share your plan for which issues to tackle and in what order

After triaging, follow this order:
1. Post a comment on this PR for any findings you are skipping, with the finding ID and your reasoning.
2. Then commit the fixes for the legitimate findings.

The comment must come before the commit — the bot reads PR comments when a new
push triggers a review, so skip comments posted after the push will be missed.

---

## Conventions

### Warnings (1)

#### CV-0bdfca191198 · Product or area identified
- **File:** PR-level finding
- **Issue:** The title "fix: eliminate 4.3 MB Phosphor icon client chunk" does not name the product, feature, or documentation area affected.
- **Fix:** Prefix the title with a product tag or area, e.g. "[Components] fix: eliminate 4.3 MB Phosphor icon client chunk" or "frontend: fix: eliminate 4.3 MB Phosphor icon client chunk".

Code Review

This code review is in beta and may not always be helpful — use your judgment.

No code review issues found.

Conventions

Warnings (1)
File Issue
PR Product or area identified — The title "fix: eliminate 4.3 MB Phosphor icon client chunk" does not name the product, feature, or documentation area affected. Fix: Prefix the title with a product tag or area, e.g. "[Components] fix: eliminate 4.3 MB Phosphor icon client chunk" or "frontend: fix: eliminate 4.3 MB Phosphor icon client chunk".

Style Guide Review

No style-guide issues found.

Commands

Only codeowners can run commands. Post a comment with the command to trigger it.

Command Description
/review Runs a review now. Incremental if a prior review exists, full if not.
/full-review Re-reviews the entire PR diff from scratch, ignoring incremental history. Useful after a rebase, when you want a fresh review, or if the bot gets out of sync and reports issues that no longer exist.
/ignore-review-limit Permanently lifts the 2-review automatic limit for this PR. Future pushes will trigger reviews as normal.
/disable-auto-review Stops automatic reviews from triggering on future pushes to this PR. Codeowners can still run /review or /full-review manually.
/rebase Rebases the PR branch against production. On conflict, attempts to resolve automatically using AI. Stops with an explanation if confidence is not high enough.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants