Skip to content

Conversation

@Niraj-There
Copy link

Summary

Fixes #881 - Bundle size regressions when adding new icons

Problem

The original sequential chunking strategy caused existing icons to move between chunks when new icons were added alphabetically, triggering webpack's SplitChunksPlugin to reshuffle chunks and cause bundle size regressions.

Solution

Implemented a stable hash-based chunking strategy that:

  • Uses deterministic hashing to assign icons to chunks
  • Maintains chunk stability (existing icons stay in original chunks)
  • Distributes icons evenly across chunks
  • Handles growth gracefully without disturbing existing assignments

Testing

  • ✅ Tested with full FluentUI System Icons set (10,000+ icons)
  • ✅ Verified balanced chunk distribution (6 chunks, ~1600-1950 lines each)
  • ✅ Confirmed stable assignment prevents icon movement
  • ✅ Build process completes successfully

Impact

This enables Teams and other products to safely bump @fluentui/react-icons without triggering webpack bundle size gates.

…gressions

- Replace sequential icon chunking with hash-based stable chunking
- Prevents existing icons from moving between chunks when new icons are added
- Resolves webpack SplitChunksPlugin bundle size regressions
- Maintains backward compatibility with existing build process
- Ensures even distribution across chunks while maintaining stability

Fixes microsoft#881
@Niraj-There Niraj-There requested review from a team as code owners September 20, 2025 22:11
@Niraj-There
Copy link
Author

@microsoft-github-policy-service agree

Summary

Fixes #881 - Bundle size regressions when adding new icons

Problem

The original sequential chunking strategy caused existing icons to move between chunks when new icons were added alphabetically, triggering webpack's SplitChunksPlugin to reshuffle chunks and cause bundle size regressions.

Solution

Implemented a stable hash-based chunking strategy that:

  • Uses deterministic hashing to assign icons to chunks
  • Maintains chunk stability (existing icons stay in original chunks)
  • Distributes icons evenly across chunks
  • Handles growth gracefully without disturbing existing assignments

Testing

  • ✅ Tested with full FluentUI System Icons set (10,000+ icons)
  • ✅ Verified balanced chunk distribution (6 chunks, ~1600-1950 lines each)
  • ✅ Confirmed stable assignment prevents icon movement
  • ✅ Build process completes successfully

Impact

This enables Teams and other products to safely bump @fluentui/react-icons without triggering webpack bundle size gates.

@microsoft-github-policy-service agree

@tudorpopams tudorpopams requested a review from Hotell September 23, 2025 12:06
@Hotell
Copy link
Contributor

Hotell commented Oct 14, 2025

Appreciate the help @Niraj-There !

We will be moving forward with this one as there are more changes necessary and we need to expedite delivery. thanks for understanding

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: adding new icons is causing bundle size regressions

2 participants