0Pricing
React Academy · Lezione

Comandi Nx Affected e caching

Esegua solo i test e le build interessati da una modifica e velocizzi la CI con il caching distribuito di Nx Cloud.

Comandi Nx Affected e caching è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Il concetto di affected

Nx tiene traccia del grafo delle dipendenze del monorepo. Quando modifica un file, Nx calcola quali progetti sono affected (modificati direttamente o dipendenti da progetti modificati) ed esegue le attività solo per questi progetti.

Esecuzione dei test affected

Esegua i test solo per i progetti interessati dalle modifiche rispetto al branch principale.

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

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

Esecuzione delle build affected

Compili solo i progetti interessati, una pratica essenziale nella CI per evitare di ricompilare l'intero monorepo a ogni pull request.

npx nx affected --target=build

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

Lint e test E2E affected

Applichi lo stesso approccio al linting e ai test E2E.

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

Come Nx determina ciò che è affected

Nx calcola gli hash di tutti i file sorgente, dei file package.json e dei file di configurazione. Un progetto è affected se è cambiato uno dei suoi file o se è cambiato un progetto da cui importa.

Cache locale dei calcoli

Nx memorizza nella cache gli output delle attività (artefatti di build e risultati dei test) in .nx/cache. Eseguendo la stessa attività con input invariati, il risultato viene ripristinato immediatamente dalla cache: vengono riprodotti anche gli output, inclusi i log del terminale.

# 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 remota Nx Cloud

Nx Cloud condivide la cache tra i membri del team e la CI. Se un collega ha già compilato un progetto con gli stessi input, la CI utilizza la cache remota invece di ricompilarlo, anche su una macchina appena configurata.

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

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

Configurazione degli input della cache

Configuri quali file sono gli input della cache per un target in project.json. Escluda i file che non influiscono sull'output della build (ad esempio README e fixture dei test) per massimizzare i cache hit.

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

Distribuzione delle attività (Nx Agents)

Gli agenti Nx Cloud distribuiscono le attività affected su più macchine CI in parallelo, riducendo drasticamente il tempo reale di esecuzione della CI nei monorepo di grandi dimensioni.

Estensione Nx Console per VS Code

L'estensione Nx Console offre un'interfaccia grafica per eseguire i comandi Nx, visualizzare il grafo dei progetti e generare codice, senza dover memorizzare i flag della CLI.

Visualizzazione del grafo delle attività

nx graph --task=build mostra il grafo delle dipendenze delle attività, incluso quali attività dipendono da altre, ed è utile per comprendere l'ordine della build.

npx nx graph --task=build

Verifica rapida

Che cosa determina se un'attività Nx è un cache hit?

Riepilogo

nx affected --target=X esegue le attività solo per i progetti modificati e per i relativi dipendenti. Nx memorizza gli output nella cache calcolando gli hash degli input e riproducendo istantaneamente i risultati. Nx Cloud estende questa funzionalità con una cache remota condivisa tra le macchine. Utilizzi --parallel=N per eseguire le attività contemporaneamente e velocizzare la CI.

Domande Frequenti

La lezione «Comandi Nx Affected e caching» è gratuita?

Sì — il testo completo di «Comandi Nx Affected e caching» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Comandi Nx Affected e caching»?

Esegua solo i test e le build interessati da una modifica e velocizzi la CI con il caching distribuito di Nx Cloud. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Comandi Nx Affected e caching»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Creazione di un monorepo Nx con app React
  2. Librerie condivise e package interni
  3. Comandi Nx Affected e caching
  4. Code generator e automazione del workspace
← Torna a React Academy