chore(www): remove react-icons dependency#140
Merged
Conversation
Last remaining usage was 11 Simple Icons brand marks (Spotify, YouTube, Apple Music, etc.) in the admin playlist track editor's platform badges. Empirically, react-icons subpath imports don't tree-shake cleanly under this project's bundler (confirmed while investigating homepage bundle size in #139 - swapping 5 icons used elsewhere barely moved the gzip size until the whole dependency was gone from that code path). This route is already isolated into its own chunk by TanStack Router's auto code-splitting, so it had zero homepage impact, but there's no reason to keep the dependency around for one file. Replaced with local inline SVG components in a new BrandIcons.tsx, using the exact same path data as the react-icons source (diffed programmatically against the installed package to confirm byte-for- byte parity, since these are hand-copied brand marks). -PlaylistsTab chunk (which contains this route) drops from 35.4KB to 32KB gzip.
|
🎉 This PR is included in version 2.65.4 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #139. That PR swapped the 5
react-iconsimports that sat on the homepage's critical path over tolucide-react/ inline SVG. The only usage left afterward was 11 Simple Icons brand marks (Spotify, YouTube, Apple Music, Bandcamp, SoundCloud, Tidal, Discord, Instagram, X, MusicBrainz, YouTube Music) in the admin playlist track editor's platform badges — already isolated into its own chunk by auto code-splitting, so zero homepage impact either way. Removing it anyway since there's no reason to keep a whole dependency around for one file.Why react-icons specifically (context for future reference)
While investigating the homepage bundle in #139,
react-iconslooked tree-shakeable on paper —sideEffects: false, plain named ESM function exports, no barrel indirection. In practice, under this project's bundler (rolldown), swapping 5 of the 6 usages barely moved the gzip size of the entry chunk until the dependency was fully gone from that code path. Don't assumereact-iconssubpath imports tree-shake cleanly here; treat any import from it as "the whole icon set ships."What changed
apps/www/src/components/icons/BrandIcons.tsx: 11 local inline SVG components, one per platform, sharing a smallBrandIcon(path)factory.-SortableTrackRow.tsx: swappedreact-icons/siimports for the new components; droppedIconType(fromreact-icons) for a localComponentType<SVGProps<SVGSVGElement>>type.react-iconsremoved fromapps/www/package.json, lockfile updated.Correctness check
These are hand-copied brand marks, so eyeballing isn't enough — wrote a one-off script to diff the
dpath attribute of each new component against the exact source in the installedreact-icons/si/index.mjsmodule. All 11 matched byte-for-byte. (Script was scratch tooling, not committed.)Measurements
-PlaylistsTabchunk (which bundles this route): 35.4 KB → 32 KB gzip (~10%)apps/www/package.jsonTest plan
bun run typecheckpasses across all packagesbun run precommit(format + lint + typecheck, repo-wide) passes cleanbun run buildsucceeds, confirmed chunk size delta