perf: split client bundle to reduce large initial JS chunk
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 4
- Forks
- 0
- Avg merge
- 4h 4m
- Merged PRs (30d)
- 57
Description
Summary
The production client build currently emits a large main JavaScript chunk:
dist/assets/index-DtXPVynI.js 1,449.28 kB | gzip: 454.26 kB
Vite warns that the main chunk exceeds the default size threshold. The app still builds and works, but the current bundle shape increases initial download, parse, and execution cost.
Current state
client/src/App.tsxeagerly imports every routeclient/src/components/blocks/BlockRenderer.tsxeagerly imports every block type- heavy visualization dependencies are pulled into the main path:
echartsviaclient/src/lib/echarts.tsd3viaFlameGraphBlockandTraceWaterfallBlock- markdown/rendering helpers through chat rendering
DemoPageis bundled into the main app even though it is only a showcase route
Goal
Reduce initial client JS without making the codebase harder to follow.
Proposed work
- Add route-level lazy loading in
client/src/App.tsx- lazy load
HomePage,ServicePage,AlertsPage,ChatPage, andDemoPage - keep a simple
Suspensefallback
- lazy load
- Split heavy block rendering in
client/src/components/blocks/BlockRenderer.tsx- lazy load the expensive visualization blocks:
TimeseriesBlockBarBlockHeatmapBlockTopologyBlockSankeyBlockCorrelationBlockFlameGraphBlockTraceWaterfallBlock
- keep lightweight blocks eager
- lazy load the expensive visualization blocks:
- Isolate
DemoPagecompletely from the main application chunk - Rebuild and measure the new chunk layout
- Only if needed after real lazy loading, add
manualChunksinclient/vite.config.tsfor large vendor groups such asecharts,d3, and markdown-related packages
Non-goal
Do not silence the warning by only increasing chunkSizeWarningLimit. The fix should be actual code-splitting.
Acceptance criteria
- the main entry chunk is materially smaller than the current ~1.45 MB minified output
- route transitions still work correctly
- chart and trace blocks still render correctly when loaded lazily
bun run buildpasses- the remaining Vite warning is gone or clearly reduced to a justified vendor split
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with client/src/App.tsx and client/src/components/blocks/BlockRenderer.tsx to trace the current eager imports, then inspect client/vite.config.ts and the existing build output. Use bun run build to compare chunk sizes and verify route transitions plus chart and trace block rendering; done means the main entry chunk is materially smaller and the Vite warning is gone or justified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- bun, d3, typescript, vite
- Domain
- build-system, frontend, performance
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 58/100