Prompt completo
"Atuando como um arquiteto sênior de software com vasta experiência em desenvolvimento front-end, especialmente com Vue.js, e um profundo conhecimento em padrões de design e otimização de performance, elabore um guia detalhado e prático sobre 'Melhores Práticas para Otimização de Performance em Aplicações Vue.js'. O guia deve cobrir as seguintes áreas, com exemplos de código concisos e claros (Vue 3 com Composition API e TypeScript): 1. **Reatividade e Renderização:** * Como minimizar re-renderizações desnecessárias (ex: `v-once`, `shallowRef`, `markRaw`). * Estratégias para otimizar listas grandes (`v-for` com `key` eficaz, virtualização de listas - mencionar bibliotecas ou abordagens). * Uso inteligente de `computed` e `watch` para evitar cálculos redundantes. 2. **Componentização e Carregamento:** * Lazy loading de componentes e rotas (`defineAsyncComponent`, `Vue Router` lazy loading). * Tree-shaking: como garantir que o código não utilizado seja removido. * Otimização da hierarquia de componentes (evitar 'props drilling' excessivo, uso de `provide/inject` com moderação e consciência de performance). 3. **Gerenciamento de Estado:** * Impacto de soluções de gerenciamento de estado (Pinia, Vuex) na performance e como usá-las eficientemente. * Como evitar reatividade excessiva em grandes objetos de estado. 4. **Otimização de Assets e Construção:** * Minificação de código (JS, CSS, HTML). * Compressão (Gzip, Brotli) no servidor. * Otimização de imagens e outros assets estáticos. * Análise de bundle (ferramentas como `webpack-bundle-analyzer` ou similares para Vite). 5. **Boas Práticas Gerais:** * Uso eficiente de diretivas (`v-if` vs `v-show`). * Gerenciamento de eventos (event delegation). * Limpeza de `watchers`, `event listeners` e `timers`
Tags relacionadas
Vue
Melhores práticas em Vue
gerado-automaticamente
Como usar este prompt
1
Clique no botão "Copiar" para copiar o prompt para sua área de transferência
2
Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)
3
Cole o prompt e adapte conforme necessário para seu contexto específico
Outros prompts de Vue
ChatGPT
Melhores práticas de padrões de design em vue para Vue
Prompt gerado automaticamente para Padrões de design em Vue em Vue
5 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
4 usos
ChatGPT
Melhores práticas de otimização e performance em vue para Vue
Prompt gerado automaticamente para Otimização e performance em Vue em Vue
2 usos