Frontend Academy · Lektion

Turbo: Caching und Task-Pipelines

Lektion 4 von 417 Schritte

Turbo: Caching und Task-Pipelines ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Zusammenfassung zu Turborepo

Turborepo (jetzt einfach Turbo) ist der leistungsstarke Build-Orchestrator für JavaScript-Monorepos. Es führt Aufgaben paketübergreifend parallel aus, cached Ausgaben anhand eines Hashes und überspringt Arbeit, wenn sich die Eingaben nicht geändert haben.

Warum Caching wichtig ist

In einem Monorepo mit 20 Paketen ist es aufwendig, bei jedem Push 'test' für jedes Paket auszuführen. Wenn sich nur ein Paket geändert hat, führt Turbo dessen Tests erneut aus und gibt die gecachten Ausgaben der anderen 19 wieder — so werden aus Minuten Sekunden.

So funktioniert das Hashing

Turbo hasht: Quelldateien (Input-Glob), Abhängigkeiten (package.json + Lockfile), von Ihnen deklarierte Umgebungsvariablen und die Konfiguration der Aufgabe selbst. Derselbe Hash = identische Arbeit = Cache-Treffer.

turbo.json — die Pipeline

Deklarieren Sie Aufgaben und ihre Beziehungen in 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 }
  }
}

inputs und outputs

inputs: Dateien, die zum Hash beitragen. outputs: Dateien, die Turbo cachen und wiederherstellen soll. Wenn Sie diese korrekt festlegen, steigt die Cache-Trefferquote auf über 90 %.

dependsOn

['^build']: Bauen Sie zuerst die Abhängigkeiten. ['lint']: Führen Sie lint vor dieser Aufgabe im selben Paket aus. ['^build', 'lint']: Kombinieren Sie beides.

cache: false und persistent: true

Aufgaben wie dev werden nie gecacht (interaktiv und langlebig) und bleiben aktiv (Turbo hält sie am Laufen). Setzen Sie beide Optionen für Dev-Server.

Aufgaben ausführen

Verwenden Sie die Turbo-CLI.

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

Cache-Speicherorte

Der lokale Cache befindet sich standardmäßig in node_modules/.cache/turbo. Jeder Lauf erzeugt Logs und die aufgezeichneten Ausgaben. Cache-Treffer geben Folgendes aus: 'cache hit, replaying logs'.

Remote-Caching

Übertragen Sie den Cache in einen Remote-Store, damit CI und Teammitglieder Cache-Treffer gemeinsam nutzen können. Registrieren Sie sich kostenlos über turbo login (Vercel Remote Cache) oder hosten Sie den Cache selbst.

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

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

Self-hosted Remote Cache

Open-Source-Alternativen: turborepo-remote-cache (Node), turbo-cache-server (Go). Stellen Sie sie auf Ihrer Infrastruktur bereit und setzen Sie die Umgebungsvariable TURBO_API.

Umgebungsvariablen als Eingaben

Deklarieren Sie, welche Umgebungsvariablen die Ausgaben beeinflussen — Turbo behandelt sie als Eingaben, sodass Änderungen daran den Cache ungültig machen.

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

Filtern

Führen Sie eine Aufgabe für bestimmte Pakete oder für Pakete aus, die von Änderungen betroffen sind.

# 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 und Profiling

--dry=json gibt den Aufgaben-Graphen aus, ohne ihn auszuführen. --profile erzeugt eine Trace-Datei im Stil der Chrome DevTools.

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

Häufige Fehler

1) Ausgaben nicht deklarieren (Turbo cached sie nicht). 2) Eine Umgebungsvariable vergessen, die den Build beeinflusst. 3) Dev-Server cachen (cache: false setzen). 4) In CI nicht --frozen-lockfile verwenden (Abweichungen im Lockfile können die Hashes ändern).

Schnelltest

Welche zwei Felder in der Konfiguration einer Turbo-Aufgabe bestimmen, ob Ausgaben aus dem Cache wiedergegeben werden können?

Beantworte es in der interaktiven Lektion

Zusammenfassung: Turbo

Hash-basiertes lokales und Remote-Caching für Monorepo-Aufgaben. turbo.json deklariert Aufgaben mit dependsOn, inputs, outputs und env. cache: false + persistent: true für Dev-Server. Filtern Sie Aufgaben mit --filter=web..., changed-since=[origin/main]. Der Remote-Cache (Vercel oder selbst gehostet) teilt Cache-Treffer zwischen CI und dem Team. Erstellen Sie mit --profile ein Profil. Legen Sie inputs und outputs korrekt fest, um die Trefferquote zu maximieren.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 41
Lektionen: 163

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Turbo: Caching und Task-Pipelines“ kostenlos?

Ja — der vollständige Text von „Turbo: Caching und Task-Pipelines“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Turbo: Caching und Task-Pipelines“?

Definieren Sie eine turbo.json-Pipeline, konfigurieren Sie Aufgabenabhängigkeiten mit dependsOn und aktivieren Sie Remote-Caching, um zwischengespeicherte Ausgaben über mehrere Rechner hinweg zu teil… Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Turbo: Caching und Task-Pipelines“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Vite: Plugin-System und SSR-Modus
esbuild: Geschwindigkeit und Einschränkungen
pnpm Workspaces für Monorepos
Turbo: Caching und Task-Pipelines

← Zurück zu Frontend Academy