Dorian
c28e6dd811
Foundation for the next-generation AI content surface UI: - 16 Cursor rules files covering philosophy, Vue conventions, design system, content surfaces, plugin system, AI integration, renderers, security, Bitcoin-only policy, dev/prod modes, accessibility, performance, animation, mobile UX, and git workflow - pnpm workspaces + Turborepo monorepo (@aiui/core, @aiui/app) - Vue 3 + Vite + TypeScript + Tailwind CSS 4 - Core type system: plugins, renderers, messages, content blocks - Plugin registry with renderer registration - 50 mock film fixtures with search/filter utilities - App shell with chat page layout - Environment config templates Made-with: Cursor
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
|