perf(web): keep react-virtualized out of the entry chunk - #14566
Open
dylanjeffers wants to merge 1 commit into
Open
perf(web): keep react-virtualized out of the entry chunk#14566dylanjeffers wants to merge 1 commit into
dylanjeffers wants to merge 1 commit into
Conversation
react-virtualized is ~638 KB of source and was landing in the entry chunk for every visitor through two unrelated edges, neither of which needs it at first paint. 1. harmony's FilterButton imported it statically, but only renders VirtualizedOptionsList behind the opt-in `virtualized` prop -- 3 call sites across the whole web app. Split into its own module and loaded on demand behind a Suspense boundary. The menu only renders while open, so the import starts when a virtualized filter menu is actually opened. Note the `as typeof import(...)` on the lazy const: React.lazy erases the component's `<Value extends string>` generic, so it would otherwise resolve to the `string` instantiation and lose type safety at call sites. 2. TransactionDetailsContent imported `isChangePositive` -- a five-line predicate over two enum values -- from AudioTransactionsTable. That module imports components/table, which imports react-virtualized. Because the TransactionDetails modal is registered eagerly in registerNiceModals, the whole virtualized table came along for a function that checks whether a transaction increases a balance. Moved the predicate to its own module and re-exported it from the table for backwards compatibility. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
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
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.
2 of 4 in a stack reducing the web entry chunk. Based on #14565 — review that first, or use the "Files changed" view which shows only this PR's diff.
What
react-virtualizedis ~638 KB of source and was landing in the entry chunk for every visitor through two unrelated edges, neither of which needs it at first paint.1. FilterButton imported it statically
It only renders
VirtualizedOptionsListbehind the opt-invirtualizedprop — 3 call sites in the whole web app. Split into its own module, loaded on demand behind a Suspense boundary. The menu only renders while open, so the import starts when a virtualized filter menu is actually opened.FilterButton is reachable from the eager app shell via
PaymentMethod, which is why this landed in the entry chunk rather than a lazy page.2. A five-line predicate
TransactionDetailsContentimportedisChangePositive— a function that checks two enum values — fromAudioTransactionsTable. That module importscomponents/table, which importsreact-virtualized. Because the TransactionDetails modal is registered eagerly inregisterNiceModals, the entire virtualized table came along for this:Moved to its own module, re-exported from the table for backwards compatibility.
Verification
react-virtualizedconfirmed absent from the entry chunk via sourcemap attribution. Web tests pass (152), typecheck and lint clean.🤖 Generated with Claude Code