Como desenvolver otimização e performance em angular em Angular
Prompt gerado automaticamente para Otimização e performance em Angular em Angular
"Você é um especialista em otimização de performance para aplicações Angular de grande escala. Desenvolva um guia detalhado e prático, focado em cenários reais, sobre como identificar e resolver gargalos de performance causados por renderização excessiva de componentes (especialmente em listas longas ou tabelas complexas) em aplicações Angular. O guia deve abordar:
1. **Ferramentas e Métricas:** Quais ferramentas (nativas do navegador, Angular DevTools, etc.) e métricas (FPS, tempo de CPU, uso de memória) são mais eficazes para diagnosticar problemas de renderização.
2. **Estratégias de Otimização:**
* **`ChangeDetectionStrategy.OnPush`:** Explique com exemplos práticos como e quando aplicar corretamente, e como lidar com cenários onde dados imutáveis não são viáveis.
* **Virtual Scrolling (`@angular/cdk/scrolling`):** Detalhe a implementação, vantagens e limitações, e como otimizar seu uso para diferentes tipos de dados.
* **`trackBy`:** Demonstre o impacto e a importância do `trackBy` em `*ngFor`, com exemplos de cenários onde sua ausência causa problemas.
* **Otimização de Ciclo de Vida:** Como usar `ngOnChanges`, `ngDoCheck` e `ngAfterViewChecked` de forma eficiente para evitar re-renderizações desnecessárias.
* **`Pure Pipes` e `Pure Functions`:** A importância de funções puras na prevenção de re-renderizações.
* **Lazy Loading de Módulos e Componentes:** Como o carregamento sob demanda impacta a performance inicial e de navegação.
* **Otimizações de CSS e DOM:** Dicas para evitar reflows e repaints caros.
3. **Padrões de Projeto e Arquitetura:** Como uma boa arquitetura (ex: componentes burros/inteligentes) pode prevenir problemas de performance desde o início.
4. **Boas Práticas e Anti-padrões:** Uma lista clara de o que fazer e o que evitar.
O guia deve ser didático, com exemplos de código concisos em TypeScript e HTML, e focado em resultados práticos para desenvolvedores que buscam otimizar aplicações Angular em produção."
Tags relacionadas
Como Usar este Prompt
Clique no botão "Copiar Prompt" para copiar o conteúdo completo.
Abra sua ferramenta de IA de preferência (ChatGPT e etc.).
Cole o prompt e substitua as variáveis (se houver) com suas informações.
Outros prompts de Angular
Continue explorando prompts nesta categoria.
Melhores práticas de padrões de design em angular para Angular
Prompt gerado automaticamente para Padrões de design em Angular em Angular
Melhores práticas de ferramentas para angular para Angular
Prompt gerado automaticamente para Ferramentas para Angular em Angular
Melhores práticas de melhores práticas em angular para Angular
Prompt gerado automaticamente para Melhores práticas em Angular em Angular