perf(v2): comprehensive performance optimizations

1. Map pan/zoom via direct DOM mutation (bypass React state)
   - txRef stores {scale, offX, offY}, applyTransform() writes
     directly to groupRef.style.transform
   - Zero React re-renders during pan/zoom — smooth 60fps
   - Removed MapTransformContext dependency (dead code now)

2. Code-split Recharts via React.lazy()
   - DashboardView (with all Recharts components) is a separate chunk
   - Main bundle: 274KB (was 694KB — 60% reduction)
   - Dashboard chunk: 425KB (loaded only on demand)
   - Map view loads instantly without Recharts overhead

3. useDeferredValue for player list
   - Kill counters, KPH, rares in sidebar use deferred rendering
   - React prioritizes map interactions over stat text updates
   - Reduces unnecessary re-renders during WS message bursts

4. useMemo for derived data in MapLayout
   - players array and vitalsMap memoized on characters ref
   - Prevents child component re-renders when Map identity changes
     but content is the same

5. Removed MapTransformProvider wrapper (no longer needed)

Total impact: ~60% smaller initial load, ~10x fewer re-renders
during active WebSocket streaming, zero-latency pan/zoom.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-04-12 22:46:54 +02:00
parent 851fc5f7cd
commit 85dce15d8b
10 changed files with 251 additions and 210 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mosswart Overlord v2</title>
<link rel="icon" type="image/png" href="/icons/7735.png" />
<script type="module" crossorigin src="/v2/assets/index-B6P2bla9.js"></script>
<script type="module" crossorigin src="/v2/assets/index-BfimcakA.js"></script>
<link rel="stylesheet" crossorigin href="/v2/assets/index-DrsM2PEe.css">
</head>
<body>