Prompt completo
"Atuando como um especialista sênior em otimização de performance para aplicações Vue.js, sua tarefa é elaborar um guia prático e detalhado para desenvolvedores que buscam identificar e resolver gargalos de performance em grandes aplicações Vue (SPA ou SSR). O guia deve cobrir as principais estratégias de otimização no nível do componente e da aplicação, incluindo: 1. **Lazy Loading (Carregamento Preguiçoso):** Como implementar e quando usar lazy loading de componentes e rotas (code splitting) para reduzir o tempo de carregamento inicial. Inclua exemplos de `import()` dinâmico e integração com Vue Router. 2. **Virtual Scrolling e Listas Grandes:** Técnicas para renderizar eficientemente listas com milhares de itens, minimizando o impacto no DOM e na performance. Aborde o conceito e a aplicação de bibliotecas comuns. 3. **Otimização de Re-renderizações de Componentes:** Estratégias para evitar re-renderizações desnecessárias de componentes, como o uso de `v-once`, `shouldComponentUpdate` (ou sua equivalência em Vue 3 com `shallowRef`/`markRaw`), e `memoization` de props e computadas. 4. **Performance de Imagens e Mídias:** Melhores práticas para carregamento e exibição de imagens (otimização de tamanho, formatos modernos como WebP/AVIF, lazy loading de imagens) e vídeos. 5. **Análise e Ferramentas de Profiling:** Como utilizar as ferramentas de desenvolvedor do navegador (Lighthouse, aba Performance) e o Vue Devtools para identificar gargalos de performance, analisar o tempo de renderização e o uso de memória. 6. **Gerenciamento de Estado e Reatividade:** Dicas para otimizar a reatividade e o gerenciamento de estado em Vuex/Pinia, evitando atualizações excessivas e garantindo que apenas o necessário seja reativo. 7. **Server-Side Rendering (SSR) e Hydration:** Desafios de performance específicos do SSR e como otimizar o processo de hidratação para melhorar o First Contentful Paint (FCP) e o Time To Interactive (TTI). Para cada tópico, forneça: * **Explicação clara do problema** que a técnica resolve. * **Exempl
Tags relacionadas
Vue
Otimização e performance 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
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
3 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