Skip to content

perf(desktop): code-split the four drawable panels via React.lazy#3116

Open
HUQIANTAO wants to merge 1 commit into
esengine:main-v2from
HUQIANTAO:perf/lazy-panels
Open

perf(desktop): code-split the four drawable panels via React.lazy#3116
HUQIANTAO wants to merge 1 commit into
esengine:main-v2from
HUQIANTAO:perf/lazy-panels

Conversation

@HUQIANTAO
Copy link
Copy Markdown
Contributor

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).

@github-actions github-actions Bot added the v2 Go rewrite (1.x) — main-v2 branch, active development label Jun 4, 2026
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).
@HUQIANTAO HUQIANTAO requested a review from SivanCola as a code owner June 5, 2026 01:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v2 Go rewrite (1.x) — main-v2 branch, active development

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant