0Pricing
React Academy · Aula

Comandos Nx Affected e armazenamento em cache

Execute apenas testes e compilações afetados por uma alteração e acelere a CI com o armazenamento distribuído em cache do Nx Cloud.

Comandos Nx Affected e armazenamento em cache é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

O conceito de projetos afetados

O Nx acompanha o grafo de dependências do seu monorrepositório. Quando você altera um arquivo, o Nx calcula quais projetos são afetados (modificados diretamente ou dependentes de projetos modificados) e executa tarefas somente para eles.

Executando testes afetados

Execute testes somente para os projetos afetados pelas alterações desde a ramificação principal.

# Compare to main branch:
npx nx affected --target=test --base=origin/main --head=HEAD

# Shorthand (uses nx.json defaultBase):
npx nx affected --target=test

Executando compilações afetadas

Compile somente os projetos afetados — isso é essencial na integração contínua para evitar recompilar todo o monorrepositório a cada PR.

npx nx affected --target=build

# With parallel workers:
npx nx affected --target=build --parallel=3

Análise de código e testes de ponta a ponta afetados

Aplique o mesmo padrão à análise de código e aos testes de ponta a ponta.

npx nx affected --target=lint
npx nx affected --target=e2e

Como o Nx determina o que foi afetado

O Nx calcula o hash de todos os arquivos de código-fonte, arquivos package.json e arquivos de configuração. Um projeto é afetado se algum de seus próprios arquivos foi alterado ou se algum projeto do qual ele importa foi alterado.

Cache de computação local

O Nx armazena em cache as saídas das tarefas (artefatos de compilação e resultados de testes) em .nx/cache. Ao executar a mesma tarefa com entradas inalteradas, o Nx restaura os resultados do cache instantaneamente — até mesmo os registros do terminal são reproduzidos.

# First run (builds):
$ npx nx build web  → Builds in 28s, cached

# Second run (no changes):
$ npx nx build web  → Cache hit! [existing outputs match] 0ms

# Clear cache if needed:
$ npx nx reset

Cache remoto do Nx Cloud

O Nx Cloud compartilha o cache entre os membros da equipe e a integração contínua. Se um colega já compilou um projeto com as mesmas entradas, sua integração contínua usa o cache remoto em vez de recompilar, mesmo em uma máquina nova.

# Connect workspace to Nx Cloud:
npx nx connect-to-nx-cloud

# Set CI environment variable:
# NX_CLOUD_ACCESS_TOKEN=<token>

Configuração das entradas do cache

Configure quais arquivos são entradas do cache de um destino em project.json. Exclua arquivos que não afetam a saída da compilação (por exemplo, README e recursos de teste) para maximizar os acertos no cache.

// project.json
{
  "targets": {
    "build": {
      "inputs": [
        "default",  // source files
        "^default"  // upstream dependency source files
      ],
      "outputs": ["{workspaceRoot}/dist/apps/web"]
    }
  }
}

Distribuição de tarefas (agentes do Nx)

Os agentes do Nx Cloud distribuem as tarefas afetadas entre várias máquinas de integração contínua em paralelo, reduzindo drasticamente o tempo total de execução em monorrepositórios grandes.

Extensão do Nx Console para VS Code

A extensão Nx Console fornece uma GUI para executar comandos do Nx, visualizar o grafo de projetos e gerar código, sem precisar memorizar opções da CLI.

Visualizando o grafo de tarefas

nx graph --task=build mostra o grafo de dependências das tarefas, incluindo quais tarefas dependem de quais outras, o que ajuda a entender a ordem de compilação.

npx nx graph --task=build

Verificação rápida

O que determina se uma tarefa do Nx é um acerto no cache?

Recapitulação

nx affected --target=X executa tarefas somente para os projetos alterados e seus dependentes. O Nx armazena as saídas em cache calculando o hash das entradas e reproduz os resultados instantaneamente. O Nx Cloud amplia esse recurso com um cache remoto compartilhado entre máquinas. Use --parallel=N para executar tarefas simultaneamente e acelerar a integração contínua.

Perguntas Frequentes

A aula “Comandos Nx Affected e armazenamento em cache” é grátis?

Sim — o texto completo de “Comandos Nx Affected e armazenamento em cache” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Comandos Nx Affected e armazenamento em cache”?

Execute apenas testes e compilações afetados por uma alteração e acelere a CI com o armazenamento distribuído em cache do Nx Cloud. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar React Academy?

Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Comandos Nx Affected e armazenamento em cache”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de React Academy?

Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Criando um monorepositório Nx com aplicativos React
  2. Bibliotecas compartilhadas e pacotes internos
  3. Comandos Nx Affected e armazenamento em cache
  4. Geradores de código e automação do espaço de trabalho
← Voltar para React Academy