Pular para conteúdo

Aula 15: Build, Deploy e Performance 🚀

Nesta aula, vamos aprender como preparar nossa aplicação para o mundo real, otimizando o tamanho do código e publicando o site na internet.

🏗️ O Processo de Build

Quando desenvolvemos, usamos o ng serve. Para produção, precisamos gerar arquivos estáticos (HTML/JS/CSS) otimizados usando o comando build.

# Gerar arquivos para produção
$ ng build

Os arquivos serão gerados na pasta dist/nome-do-projeto.

🌍 Gerenciando Ambientes

Você pode ter configurações diferentes para desenvolvimento e produção (ex: URLs de API). No Angular moderno, usamos as configurações de fileReplacements no angular.json ou arquivos de variáveis de ambiente.

Exemplo de Uso

environment.ts (Dev) vs environment.prod.ts (Produção).

🚀 Deploy no GitHub Pages

Uma das formas mais fáceis de hospedar seu projeto Angular gratuitamente.

# 1. Instale o utilitário
$ npm install -g angular-cli-ghpages

# 2. Faça o build
$ ng build --base-href "https://seu-usuario.github.io/nome-do-repo/"

# 3. Publique
$ npx angular-cli-ghpages --dir=dist/nome-do-projeto

⚡ Performance: Lighthouse

Devemos sempre verificar se nosso site está rápido e acessível. O Lighthouse (no Chrome DevTools) analisa: * Performance (tempo de carregamento). * Acessibilidade (uso de leitores de tela). * Melhores Práticas. * SEO.

🌟 Estratégias de Otimização

  1. Lazy Loading: Já vimos que carregar por demanda reduz o bundle inicial.
  2. Budget: O Angular permite definir alertas se o arquivo JS ficar grande demais.
  3. Images: Use formatos modernos (WebP) e carregamento ocioso (lazy).

🚀 Prática: Deploy da Nossa App

Vamos realizar o ciclo completo: 1. Criar os arquivos de ambiente. 2. Executar o build de produção. 3. Publicar no GitHub Pages (ou simular com um servidor local). 4. Rodar um relatório do Lighthouse e ajustar o que for necessário.

🏁 Mini-Projeto da Aula

Configure as "budgets" no seu arquivo angular.json para emitir um aviso se o pacote principal (main bundle) ultrapassar 1MB. Tente identificar qual parte da sua aplicação (ex: ícones ou bibliotecas pesadas) está consumindo mais espaço.