Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

perf: split client bundle to reduce large initial JS chunk

Aperta
  • Qualcosa non va?
#73 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
58/100
Tipo di issue
Refactoring
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
bun, d3, typescript, vite
Ambito
build-system, frontend, performance

Direzione di ricerca

Inizia da client/src/App.tsx e client/src/components/blocks/BlockRenderer.tsx per tracciare gli import eager attuali, poi esamina client/vite.config.ts e l'output di build esistente. Usa bun run build per confrontare le dimensioni dei chunk e verificare le transizioni tra le route e il rendering dei blocchi chart e trace; il lavoro è concluso quando il chunk di ingresso principale è sensibilmente più piccolo e l'avviso di Vite è scomparso o è giustificato.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement

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
Lingua principale
HTML
Stelle
6
Fork
0
Merge medio
4h 31m
PR unite (30g)
40

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di labstack/fanout

Tutte le issue di labstack/fanout

Issue simili

Altre issue su Build System

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.