Introdução: Desempenho é um recurso Em um mercado onde 53% dos usuários móveis abandonam uma página que demora mais de 3 segundos para carregar (fonte: Google/SOASTA), o desempenho não é uma otimização opcional: é um requisito do produto. Para aplicações Angular, isso se traduz em escolhas arquitetônicas precisas, ferramentas de criação de perfil integradas e estratégias de renderização inteligentes. Neste guia, exploramos as técnicas mais eficazes para otimizar um aplicativo Angular — da compilação ao empacotamento, da detecção de alterações ao cache HTTP — com exemplos de código reais e métricas de benchmark. Tópicos: #Angular #Performance #LazyLoading #ChangeDetection #WebDevelopment Seção 1: Compilação AOT e compilação de compilação antecipada otimizada (AOT) O Angular compila modelos HTML em código JavaScript já durante a fase de construção, não em tempo de execução no navegador. Desde Angular 9, a compilação AOT é habilitada por padrão na produção e traz três benefícios mensuráveis: Pacote menor: O compilador Angular ( @angular/compiler ) não está incluído no pacote final. Renderização mais rápida: o navegador recebe JavaScript pré-compilado. Erros precoces: os problemas são descobertos durante a construção. # Produção Build ng build --configuration produção Tree Shaking e Bundle Analysis // ❌ Importação completa importação * as _ de 'lodash'; // ✅ Importação específica de import chunk de 'lodash/chunk'; // ✅ Sem dependências const result = [[1, 2], [3, 4]]; Seção 2: Carregamento lento - carregue apenas o que você precisa // app.routes.ts import { Routes } from '@angular/router'; export const APP_ROUTES: Rotas = [ { caminho: '', loadComponent: () => import('./features/home/home.component').then(c => c.HomeComponent), }, { caminho: 'admin', loadChildren: () => import('./features/admin/admin.routes').then(m => m.ADMIN_ROUTES), }, { caminho: 'blog', loadChildren: () => import('./features/blog/blog.routes').then(m => m.
BLOG_ROUTES), }, { caminho: 'projetos', loadComponent: () => import('./features/projects/projects.component').then(c => c.ProjectsComponent), }, ]; Estratégia de pré-carregamento // app.config.ts import { ApplicationConfig } from '@angular/core'; importar { provideRouter, withPreloading, PreloadAllModules } de '@angular/router'; importar {APP_ROUTES} de './app.routes'; exportar const appConfig: ApplicationConfig = {provedores: [forneceRouter(APP_ROUTES, withPreloading(PreloadAllModules)), ], }; Seção 3: Detecção de Mudanças // Estratégia OnPush changeDetection: ChangeDetectionStrategy.OnPush; // ❌ Mutação this.post.title = 'Novo Título'; // ✅ Nova referência this.post = { ...this.post, title: 'Novo Título' }; Sinais importam {sinal, computado} de '@angular/core'; contagem const = sinal (0); const duplicado = computado(() => contagem() * 2); Seção 4: Otimização HTTP // Interceptador de cache const cache = new Map(); if (cache.has(req.url)) { retorno de(cache.get(req.url)); } Seção 5: Otimização de imagem Seção 6: Dependências de terceiros // ❌ Momento de importação pesada de biblioteca de 'moment'; // ✅ Alternativa nativa new Intl.DateTimeFormat('it-IT').format(new Date()); Seção 7: Farol das ferramentas de criação de perfil https://tuo-sito.com Resumo ✅ Construir produção ✅ Carregamento lento ✅ OnPush ✅ Cache HTTP Conclusão Otimizar um aplicativo Angular é um processo contínuo que combina arquitetura, boas práticas de desenvolvimento e monitoramento constante de desempenho. O primeiro passo é sempre medir: ferramentas como Lighthouse e Angular DevTools ajudam a identificar os verdadeiros gargalos.