Pulse
ae39e45460
NOVAS SKILLS: - next-best-practices v0.1.0 (CLEAN) — Next.js App Router, RSC, caching, data - nextjs-patterns v1.0.0 (CLEAN) — Next.js 15: Server Actions, route handlers - vite v1.0.0 (CLEAN) — env vars, aliases, proxy, CJS compat - uncle-bob v1.0.0 (CLEAN) — Clean Code, SOLID, Clean Architecture - clean-code-review v1.0.0 (CLEAN) — naming, guard clauses, anti-patterns, refactoring - vue v1.0.0 (CLEAN) — Vue framework - vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos): - typescript/ — TS safe + generics gotchas - react/ — Next.js App Router + Vite config - vue/ — Composition API + Pinia - linux/ — System diagnostic cheatsheet - database/ — PostgreSQL + MySQL patterns - browser/ — Chromium CLI + E2E testing - security/ — SAST audit (OWASP Top 10) - best-practices/ — Clean Code + SOLID + Clean Architecture - deploy/ — Docker multi-stack + OpenClaw ops - + INDEX.md como guia de navegacao .learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)
65 lines
2.4 KiB
Markdown
65 lines
2.4 KiB
Markdown
# Performance Optimization
|
|
|
|
## Render Performance
|
|
|
|
- Vue tracks dependencies automatically—only re-renders what changes
|
|
- Keys on `v-for` are critical—use stable, unique ID, not array index
|
|
- `v-if` vs `v-show`: if unmounts, show toggles CSS—show better for frequent toggle
|
|
- `v-once` for static content—renders once, never updates
|
|
|
|
## Computed Optimization
|
|
|
|
- Computed values are cached—use for expensive derivations
|
|
- Computed only recalculates when dependencies change
|
|
- Avoid side effects in computed—can't rely on when they run
|
|
- Chain computed values—each caches independently
|
|
|
|
## Component Optimization
|
|
|
|
- Define components outside `<script setup>`—or use `defineComponent`
|
|
- Avoid inline handlers creating new functions: `:click="() => handle(item)"`
|
|
- For large lists, use virtual scrolling—vue-virtual-scroller
|
|
- Code split with `defineAsyncComponent`—load on demand
|
|
|
|
## Props Stability
|
|
|
|
- Object/array props create new reference each render
|
|
- Use `computed` or `toRef` for derived props—stable references
|
|
- `shallowRef` for large objects not deeply reactive
|
|
- `v-memo` for memoizing parts of template
|
|
|
|
## v-memo
|
|
|
|
- `v-memo="[dependency]"` caches template fragment
|
|
- Re-renders only when dependency changes
|
|
- Useful for large lists with selectable items
|
|
- More granular than component-level memoization
|
|
|
|
## List Optimization
|
|
|
|
- `key` must be stable and unique—not array index if list reorders
|
|
- `key` change triggers full component recreation—use for forced re-render
|
|
- Virtual scrolling for 1000+ items—don't render off-screen
|
|
- Paginate if possible—show 50, load more on demand
|
|
|
|
## Async Components
|
|
|
|
- `defineAsyncComponent` for lazy loading—reduces initial bundle
|
|
- Route-level code splitting—each route loads its components
|
|
- `<Suspense>` for coordinated async loading—show loading state
|
|
- Prefetch likely-needed components—on hover or visibility
|
|
|
|
## DevTools Profiling
|
|
|
|
- Vue DevTools has component inspector—see props, state
|
|
- Performance timeline shows render time
|
|
- Highlight updates option—visualize what re-renders
|
|
- Production build for accurate performance—dev mode adds overhead
|
|
|
|
## Build Optimization
|
|
|
|
- Tree-shaking removes unused code—don't import entire libraries
|
|
- `vue` runtime only build—smaller if not using template compiler
|
|
- `vite build` handles most optimizations automatically
|
|
- Analyze bundle: `vite-plugin-visualizer`—find heavy dependencies
|