Frontend Academy · Leçon

Turbo : mise en cache et pipelines de tâches

Définissez un pipeline dans turbo.json, configurez les dépendances entre tâches avec dependsOn et activez la mise en cache distante pour partager les sorties mises en cache entre machines.

Leçon 4 sur 417 étapes

Turbo : mise en cache et pipelines de tâches est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Récapitulatif de Turborepo

Turborepo (désormais simplement Turbo) est l'orchestrateur de compilation haute performance pour les monodépôts JavaScript. Il exécute les tâches en parallèle dans les paquets, met les sorties en cache à partir de leur hachage et évite le travail lorsque les entrées n'ont pas changé.

Pourquoi la mise en cache est importante

Dans un monodépôt de 20 paquets, exécuter les tests à chaque envoi est coûteux. Si un seul paquet a changé, Turbo relance ses tests et rejoue la sortie mise en cache pour les 19 autres — les minutes deviennent des secondes.

Fonctionnement du hachage

Turbo hache : les fichiers source (motif glob d'entrée), les dépendances (package.json + lockfile), les variables d'environnement que vous déclarez et la configuration propre à la tâche. Même hachage = travail identique = réutilisation du cache.

turbo.json — La chaîne de tâches

Déclarez les tâches et leurs relations dans turbo.json.

// turbo.json
{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "package.json"],
      "outputs": ["dist/**", ".next/**"]
    },
    "test": {
      "dependsOn": ["^build"],
      "inputs": ["src/**", "test/**", "package.json"]
    },
    "lint": { "inputs": ["**/*.{ts,tsx,js,jsx}", ".eslintrc*"] },
    "dev": { "cache": false, "persistent": true }
  }
}

Entrées et sorties

Entrées : fichiers qui contribuent au hachage. Sorties : fichiers que Turbo doit mettre en cache et restaurer. Définissez-les correctement et votre taux de réutilisation du cache dépassera 90 %.

dependsOn

['^build'] : compiler d'abord les dépendances. ['lint'] : exécuter la vérification avant cette tâche dans le même paquet. ['^build', 'lint'] : combiner les deux.

cache: false et persistent: true

Les tâches comme dev ne sont jamais mises en cache (elles sont interactives et s'exécutent longtemps) et persistent (Turbo les maintient actives). Définissez ces deux options pour les serveurs de développement.

Exécuter des tâches

Utilisez la CLI de Turbo.

npx turbo run build
npx turbo run test lint
npx turbo run build --filter=web
npx turbo run build --filter=web... --concurrency=10

Emplacements du cache

Par défaut, le cache local se trouve dans node_modules/.cache/turbo. Chaque exécution produit des journaux ainsi que les sorties capturées. Les correspondances dans le cache affichent : « cache trouvé, relecture des journaux ».

Mise en cache distante

Envoyez le cache vers un magasin distant afin que la CI et vos coéquipiers puissent partager les correspondances. Inscrivez-vous gratuitement via turbo login (Vercel Remote Cache) ou hébergez votre propre service.

npx turbo login
npx turbo link    # link to a Vercel remote cache

# In CI:
env:
  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
  TURBO_TEAM: yourteam

Cache distant autohébergé

Alternatives OSS : turborepo-remote-cache (Node), turbo-cache-server (Go). Déployez-les sur votre infrastructure et définissez la variable d'environnement TURBO_API.

Entrées des variables d'environnement

Déclarez les variables d'environnement qui influencent les sorties — Turbo les traite comme des entrées, de sorte que leur modification invalide le cache.

// turbo.json
{
  "tasks": {
    "build": {
      "env": ["NODE_ENV", "VITE_API_URL"],
      "outputs": ["dist/**"]
    }
  },
  "globalEnv": ["GITHUB_SHA"]
}

Filtrage

Exécutez une tâche pour des paquets précis ou pour ceux concernés par des modifications.

# Specific package and its dependencies:
turbo run build --filter=web...

# Packages that depend on shared/ui:
turbo run test --filter='...@repo/ui'

# Changed since main:
turbo run lint --filter='[origin/main]'

# Combine:
turbo run build --filter=web...[origin/main]

DRY_RUN et profilage

--dry=json affiche le graphe des tâches sans les exécuter. --profile génère une trace au format de Chrome-DevTools.

turbo run build --dry=json | jq
turbo run build --profile=trace.json
# open chrome://tracing and load trace.json

Pièges courants

1) Oublier de déclarer les sorties (Turbo ne les mettra pas en cache). 2) Oublier une variable d'environnement qui influence la compilation. 3) Mettre en cache les serveurs de développement (définissez cache: false). 4) Ne pas utiliser --frozen-lockfile dans la CI (la dérive du lockfile peut modifier les hachages).

Vérification rapide

Quels sont les deux champs d'une configuration de tâche Turbo qui déterminent si les sorties peuvent être rejouées depuis le cache ?

Réponds-y dans la leçon interactive

Récapitulatif : Turbo

Mise en cache locale et distante basée sur le hachage pour les tâches des monodépôts. turbo.json déclare les tâches avec dependsOn, inputs, outputs et env. Utilisez cache: false + persistent: true pour les serveurs de développement. Filtrez les tâches avec --filter=web... et changed-since=[origin/main]. Le cache distant (Vercel ou autohébergé) partage les correspondances entre la CI et l'équipe. Établissez un profil avec --profile. Définissez correctement les entrées et les sorties pour maximiser le taux de réutilisation.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 41
Leçons: 163

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Turbo : mise en cache et pipelines de tâches » est-elle gratuite ?

Oui — le texte complet de « Turbo : mise en cache et pipelines de tâches » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Turbo : mise en cache et pipelines de tâches » ?

Définissez un pipeline dans turbo.json, configurez les dépendances entre tâches avec dependsOn et activez la mise en cache distante pour partager les sorties mises en cache entre machines. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 4 sur 4.

Combien de temps prend la leçon « Turbo : mise en cache et pipelines de tâches » ?

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 Frontend Academy ?

Oui. Chaque leçon Frontend 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

Vite : système de plugins et mode SSR
esbuild : rapidité et limites
Espaces de travail pnpm pour les monorepos
Turbo : mise en cache et pipelines de tâches

← Retour à Frontend Academy