feat: biblioteca inteligente libs/ + 5 novas skills (20 skills total)
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)
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user