labstack / labstack/fanout

perf: split client bundle to reduce large initial JS chunk

Open
#73 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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.tsx eagerly imports every route
  • client/src/components/blocks/BlockRenderer.tsx eagerly imports every block type
  • heavy visualization dependencies are pulled into the main path:
    • echarts via client/src/lib/echarts.ts
    • d3 via FlameGraphBlock and TraceWaterfallBlock
    • markdown/rendering helpers through chat rendering
  • DemoPage is 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

  1. Add route-level lazy loading in client/src/App.tsx
    • lazy load HomePage, ServicePage, AlertsPage, ChatPage, and DemoPage
    • keep a simple Suspense fallback
  2. Split heavy block rendering in client/src/components/blocks/BlockRenderer.tsx
    • lazy load the expensive visualization blocks:
      • TimeseriesBlock
      • BarBlock
      • HeatmapBlock
      • TopologyBlock
      • SankeyBlock
      • CorrelationBlock
      • FlameGraphBlock
      • TraceWaterfallBlock
    • keep lightweight blocks eager
  3. Isolate DemoPage completely from the main application chunk
  4. Rebuild and measure the new chunk layout
  5. Only if needed after real lazy loading, add manualChunks in client/vite.config.ts for large vendor groups such as echarts, 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 build passes
  • the remaining Vite warning is gone or clearly reduced to a justified vendor split

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.