perf(desktop): code-split the four drawable panels via React.lazy#3116
Open
HUQIANTAO wants to merge 1 commit into
Open
perf(desktop): code-split the four drawable panels via React.lazy#3116HUQIANTAO wants to merge 1 commit into
HUQIANTAO wants to merge 1 commit into
Conversation
Memory, History, Settings, and the Update banner are all opened via
state toggles and are mutually exclusive in practice. They each pull
in their own transitive deps (e.g. the history drawer imports the
session-row subcomponent; the settings panel imports the dict-derived
section components; the memory panel imports the remember/saveDoc
actions). On a cold start with a brand-new model the chat was paying
for all four at first paint.
Convert each import to React.lazy() with a Suspense boundary. Each
panel's JS chunk is fetched on first render (the first time the user
clicks the corresponding topbar chip), so the initial bundle loses
those four trees and any of their imports.
The fallback is null because the panels themselves are modal drawers
with their own loading state; a Suspense spinner would be a second
spinner stacked on top of whatever the panel renders.
The .then(m => ({ default: m.X })) adapter handles modules whose
named export is the public surface (every component file in this
repo, per CodeViewer's 'editor seam' pattern).
437626a to
ab87754
Compare
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.
Memory, History, Settings, and the Update banner are opened via state toggles and are mutually exclusive in practice. They each pull in their own transitive deps. Convert each import to
React.lazy()with a Suspense boundary. Each panel's JS chunk is fetched on first render (the first time the user clicks the corresponding topbar chip), so the initial bundle loses those four trees and any of their imports.The fallback is null because the panels themselves are modal drawers with their own loading state. The
.then(m => ({ default: m.X }))adapter handles modules whose named export is the public surface (per CodeViewer's 'editor seam' pattern).