Frontend Academy · Lektion

Turbo: cachning och uppgiftspipelines

Definiera en pipeline i turbo.json, konfigurera uppgiftsberoenden med dependsOn och aktivera fjärrcachning för att dela cachade resultat mellan datorer.

Lektion 4 av 417 steg

Turbo: cachning och uppgiftspipelines är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Sammanfattning: Turborepo

Turborepo (numera bara Turbo) är en högpresterande byggorkestrerare för JavaScript-monorepon. Den kör uppgifter parallellt mellan paketen, cachar resultat baserat på hashvärden och hoppar över arbete när indata inte har ändrats.

Varför cachning är viktigt

I ett monorepo med 20 paket är det dyrt att köra 'test' vid varje push. Om bara ett paket har ändrats kör Turbo om testet för det paketet och spelar upp cachade resultat för de övriga 19 — vilket omvandlar minuter till sekunder.

Så fungerar hashning

Turbo beräknar hashvärden för: källfiler (input glob), beroenden (package.json + lockfile), miljövariabler som ni deklarerar och uppgiftens egen konfiguration. Samma hash = identiskt arbete = cacheträff.

turbo.json — pipelinen

Deklarera uppgifter och deras relationer i 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 och outputs

inputs: filer som bidrar till hashvärdet. outputs: filer som Turbo ska cacha och återställa. Om dessa anges korrekt ökar cacheträffsfrekvensen till över 90 %.

dependsOn

['^build']: bygg beroenden först. ['lint']: kör lint före den här uppgiften i samma paket. ['^build', 'lint']: kombinera.

cache: false och persistent: true

Uppgifter som dev cachas aldrig (de är interaktiva och långkörande) och är beständiga (Turbo håller dem igång). Ange båda för utvecklingsservrar.

Köra uppgifter

Använd 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

Cacheplatser

Det lokala cachen finns som standard i node_modules/.cache/turbo. Varje körning skapar loggar och sparar de fångade resultaten. Cacheträffar skriver ut: 'cache hit, replaying logs'.

Fjärrcachning

Skicka cachen till ett fjärrlager så att CI och teammedlemmar kan dela cacheträffar. Registrera ett gratiskonto med turbo login (Vercel Remote Cache) eller driftssätt en egen lösning.

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

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

Egen fjärrcache

Alternativ med öppen källkod: turborepo-remote-cache (Node), turbo-cache-server (Go). Driftsätt på er egen infrastruktur och ange miljövariabeln TURBO_API.

Indata från miljövariabler

Deklarera vilka miljövariabler som påverkar resultaten — Turbo behandlar dem som indata, så ändringar i dem ogiltigförklarar cachen.

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

Filtrering

Kör en uppgift för specifika paket eller för paket som påverkas av ändringar.

# 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 och profilering

--dry=json skriver ut uppgiftsgrafen utan att köra den. --profile genererar en spårning i stil med Chrome DevTools.

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

Vanliga fallgropar

1) Glömma att deklarera outputs (Turbo cachar dem inte). 2) Glömma en miljövariabel som påverkar bygget. 3) Cacha utvecklingsservrar (ange cache: false). 4) Inte använda --frozen-lockfile i CI (skillnader i lockfilen kan ändra hashvärden).

Snabb kontroll

Vilka två fält i en Turbo-uppgiftskonfiguration avgör om resultat kan spelas upp från cachen?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Turbo

Hashbaserad lokal cachning och fjärrcachning för monorepo-uppgifter. turbo.json deklarerar uppgifter med dependsOn, inputs, outputs och env. cache: false + persistent: true för utvecklingsservrar. Filtrera uppgifter med --filter=web... och changed-since=[origin/main]. Fjärrcache (Vercel eller egen drift) delar cacheträffar mellan CI och teamet. Profilera med --profile. Ange inputs och outputs korrekt för maximal träffsfrekvens.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Turbo: cachning och uppgiftspipelines” gratis?

Ja – hela texten till ”Turbo: cachning och uppgiftspipelines” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Turbo: cachning och uppgiftspipelines”?

Definiera en pipeline i turbo.json, konfigurera uppgiftsberoenden med dependsOn och aktivera fjärrcachning för att dela cachade resultat mellan datorer. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Turbo: cachning och uppgiftspipelines”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Frontend Academy