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:
parent
851fc5f7cd
commit
85dce15d8b
10 changed files with 251 additions and 210 deletions
72
static/v2/assets/DashboardView-BORJmSpV.js
Normal file
72
static/v2/assets/DashboardView-BORJmSpV.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
49
static/v2/assets/index-BfimcakA.js
Normal file
49
static/v2/assets/index-BfimcakA.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue