perf(dashboard): lazy-load echarts implementations - #1016
janburzinski wants to merge 1 commit into
Conversation
Keep the four chart wrappers sync and load ECharts implementations on demand via LazyChartBoundary. Shared Brush and null-marker parts stay out of the initial JS so cartesian and pie charts split the same way. Co-authored-by: Cursor Agent <cursoragent@cursor.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
4 Skipped Deployments
|
github-actions
Bot
added
apps/dashboard
|
React Doctor found 1 new issue in 1 file · 1 error · score 73 / 100 (Needs work) · 1 fixed · vs Errors
Reviewed by React Doctor for commit |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| selectedSector, | ||
| selectSector, | ||
| }; | ||
| }, [live, pie?.isClickable, selectedSector, selectSector]); |
There was a problem hiding this comment.
React Doctor · react-hooks-js/refs (error)
This component misses React Compiler's automatic memoization & re-renders more than it should: Cannot access refs during render. Rewrite the flagged code so the compiler can optimize it.
Fix → React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the current property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
This branch had an error being deployed
1 participant
Description
Slice 5 of the PR 984 split: lazy-load ECharts implementations. Merge independently — do not wait for PostHog/Three/Cal/Kiwi (slice 6) or GEO server-scope (#1015).
Sync wrappers stay on the public import path. Each chart's
-implloads on demand throughReact.lazy+LazyChartBoundary(SSR placeholder, then Suspense). Declarative parts (Area,Brush, …) live in-parts/echarts-brush-partso compound-component children do not pull ECharts into the initial JS.In scope
LazyChartBoundaryuseLayoutEffect, skeleton placeholderFCleftover after moving markers into-partsOut of scope
?project=server-scope (perf(geo): resolve project scope on the server #1015)Success metric: Network —
echarts-*-impl(and the ECharts vendor they pull) not in the initial JS of/geoor Home. The impl chunk loads when the chart is needed. Measure this chunk's Initial-JS delta. Not/geoJS 4.67→3.95 MB (that is a checkpoint after this slice and slice 6 + editor lazy).Extracted from closed #984 @
15c45339onto currentmain(#1010/#1009). Not stacked on #1015.Review with copy/rename detection (
git diff -C20 origin/main); ~9k lines moved, not new. Cubic previously skipped the impls as "too large".Screenshot/Recording (if applicable)
N/A — no visual redesign. Charts still hydrate into the same layout via the
LazyChartBoundaryskeleton. No browser demo attached.Checklist
Summary by cubic
Lazy-loads ECharts chart implementations so ECharts is no longer in the initial JS of
/geoor Home. The four chart wrappers stay synchronous; each-implchunk loads on demand viaReact.lazyandLazyChartBoundary, which renders an SSR-safe skeleton until hydration.Notes for review
Area,Brush, etc.) moved to-partsmodules so compound-component children don't pull ECharts into the initial JS.useLayoutEffect, and the skeleton placeholder.git diff -C20 origin/main; ~9k lines moved, not new.Written for commit 41debf3. Summary will update on new commits.