61 lines
1.9 KiB
Plaintext
61 lines
1.9 KiB
Plaintext
|
---
|
||
|
|
description: Performance optimization - bundle budget, lazy loading, virtual scrolling
|
||
|
|
globs: "**/*"
|
||
|
|
alwaysApply: false
|
||
|
|
---
|
||
|
|
|
||
|
|
# Performance
|
||
|
|
|
||
|
|
## Bundle Budget
|
||
|
|
- Initial load: **< 250KB gzipped**
|
||
|
|
- Core (Vue + Tailwind + Pinia + Router + chat UI): ~150KB
|
||
|
|
- First renderer batch (markdown, streaming text): ~50KB
|
||
|
|
- Everything else: lazy-loaded on demand
|
||
|
|
|
||
|
|
## Lazy Loading Strategy
|
||
|
|
- Route-based code splitting via Vue Router `() => import(...)`
|
||
|
|
- Renderer components via `defineAsyncComponent`
|
||
|
|
- Heavy libraries loaded only when their renderer is activated:
|
||
|
|
- CodeMirror 6: ~300KB (on code edit)
|
||
|
|
- Monaco: ~5MB (on IDE panel open)
|
||
|
|
- pdf.js: ~400KB (on PDF view)
|
||
|
|
- KaTeX: ~300KB (on math render)
|
||
|
|
- Mermaid: ~200KB (on diagram render)
|
||
|
|
- Leaflet: ~40KB (on map render)
|
||
|
|
- Whisper WASM: ~50MB (on STT activation, cached)
|
||
|
|
- Piper TTS: ~100MB (on TTS activation, cached)
|
||
|
|
|
||
|
|
## Virtual Scrolling
|
||
|
|
- Chat message list uses TanStack Virtual
|
||
|
|
- Dynamic row heights (messages vary in size)
|
||
|
|
- Inverted scroll (newest at bottom, load older on scroll up)
|
||
|
|
- Buffer: render 5 items above and below viewport
|
||
|
|
- Recycle DOM nodes for off-screen messages
|
||
|
|
|
||
|
|
## GPU Acceleration
|
||
|
|
Only animate `transform` and `opacity` — never `width`, `height`, `top`, `left`.
|
||
|
|
Use `will-change` sparingly and remove after animation.
|
||
|
|
|
||
|
|
## Image Optimization
|
||
|
|
- Use `loading="lazy"` on all non-critical images
|
||
|
|
- Provide `srcset` with multiple sizes
|
||
|
|
- Use WebP/AVIF where supported
|
||
|
|
- Skeleton placeholders while loading
|
||
|
|
|
||
|
|
## Network
|
||
|
|
- Preconnect to known API hosts
|
||
|
|
- Preload critical resources
|
||
|
|
- Debounce scroll and resize handlers (100ms)
|
||
|
|
- Batch API requests where possible
|
||
|
|
|
||
|
|
## Memory
|
||
|
|
- Clean up event listeners in `onUnmounted`
|
||
|
|
- Use `shallowRef` for large data sets
|
||
|
|
- Dispose heavy library instances when panel closes
|
||
|
|
- Monitor memory with browser DevTools
|
||
|
|
|
||
|
|
## Core Web Vitals Targets
|
||
|
|
- LCP (Largest Contentful Paint): < 2.5s
|
||
|
|
- FID (First Input Delay): < 100ms
|
||
|
|
- CLS (Cumulative Layout Shift): < 0.1
|