0Pricing
React Academy · Leçon

Commandes Nx Affected et mise en cache

Exécutez uniquement les tests et compilations concernés par une modification, et accélérez la CI grâce à la mise en cache distribuée de Nx Cloud.

Commandes Nx Affected et mise en cache est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Le concept des projets concernés

Nx suit le graphe des dépendances de votre dépôt monolithique. Lorsque vous modifiez un fichier, Nx calcule quels projets sont concernés (modifiés directement ou dépendant de projets modifiés), puis exécute uniquement leurs tâches.

Exécuter les tests des projets concernés

Exécutez les tests uniquement pour les projets concernés par les modifications effectuées depuis la branche 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

Compiler les projets concernés

Compilez uniquement les projets concernés : c’est essentiel pour l’intégration continue afin d’éviter de recompiler tout le dépôt monolithique à chaque demande de fusion.

npx nx affected --target=build

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

Analyse statique et tests E2E concernés

Appliquez le même principe à l’analyse statique et aux tests E2E.

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

Comment Nx détermine les projets concernés

Nx calcule une empreinte pour tous les fichiers source, les fichiers package.json et les fichiers de configuration. Un projet est concerné si l’un de ses propres fichiers a été modifié ou si un projet depuis lequel il importe des éléments a été modifié.

Cache local des calculs

Nx met en cache les résultats des tâches (artefacts de compilation et résultats des tests) dans .nx/cache. L’exécution d’une même tâche avec des entrées inchangées restaure instantanément le résultat depuis le cache : les sorties, y compris les journaux du terminal, sont rejouées.

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

Nx Cloud partage le cache entre les membres de l’équipe et l’intégration continue. Si un collègue a déjà compilé un projet avec les mêmes entrées, votre intégration continue utilise le cache distant au lieu de tout recompiler, même sur une machine vierge.

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

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

Configuration des entrées du cache

Configurez dans project.json les fichiers qui servent d’entrées du cache pour une cible. Excluez les fichiers qui n’affectent pas le résultat de la compilation (par exemple, README et les données de test) afin de maximiser les correspondances avec le cache.

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

Répartition des tâches (agents Nx)

Les agents Nx Cloud répartissent les tâches concernées entre plusieurs machines d’intégration continue en parallèle, ce qui réduit considérablement le temps réel d’exécution pour les grands dépôts monolithiques.

Extension Nx Console pour VS Code

L’extension Nx Console fournit une interface graphique pour exécuter les commandes Nx, visualiser le graphe des projets et générer du code, sans devoir mémoriser les options de la CLI.

Visualiser le graphe des tâches

nx graph --task=build affiche le graphe des dépendances entre les tâches, notamment les tâches dont dépendent les autres, ce qui aide à comprendre l’ordre de compilation.

npx nx graph --task=build

Vérification rapide

Qu’est-ce qui détermine si le résultat d’une tâche Nx se trouve dans le cache ?

Récapitulatif

nx affected --target=X exécute les tâches uniquement pour les projets modifiés et ceux qui en dépendent. Nx met les résultats en cache en calculant une empreinte des entrées, puis rejoue instantanément les résultats. Nx Cloud étend ce fonctionnement à un cache distant partagé entre les machines. Utilisez --parallel=N pour exécuter les tâches simultanément et accélérer l’intégration continue.

Questions Fréquemment Posées

La leçon « Commandes Nx Affected et mise en cache » est-elle gratuite ?

Oui — le texte complet de « Commandes Nx Affected et mise en cache » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Commandes Nx Affected et mise en cache » ?

Exécutez uniquement les tests et compilations concernés par une modification, et accélérez la CI grâce à la mise en cache distribuée de Nx Cloud. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Commandes Nx Affected et mise en cache » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Créer un monorepo Nx avec des applications React
  2. Bibliothèques partagées et paquets internes
  3. Commandes Nx Affected et mise en cache
  4. Générateurs de code et automatisation de l’espace de travail
← Retour à React Academy