Frontend Academy · Lezione

Turbo: caching e pipeline di task

Definire una pipeline in turbo.json, configurare le dipendenze dei task con dependsOn e abilitare il caching remoto per condividere gli output memorizzati tra più macchine

Lezione 4 di 417 passaggi

Turbo: caching e pipeline di task è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 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 Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Riepilogo di Turborepo

Turborepo (ora semplicemente Turbo) è l'orchestratore di build ad alte prestazioni per i monorepo JavaScript. Esegue i task tra i pacchetti in parallelo, memorizza gli output nella cache in base all'hash e salta il lavoro quando gli input non sono cambiati.

Perché il caching è importante

In un monorepo con 20 pacchetti, eseguire 'test' a ogni push è costoso. Se è cambiato un solo pacchetto, Turbo riesegue il test relativo e riproduce l'output memorizzato nella cache per gli altri 19, trasformando i minuti in secondi.

Come funziona l'hashing

Turbo calcola l'hash di: file sorgente (input glob), dipendenze (package.json + lockfile), variabili d'ambiente dichiarate e configurazione propria del task. Stesso hash = lavoro identico = cache hit.

turbo.json — La pipeline

Dichiari i task e le loro relazioni 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 e outputs

inputs: file che contribuiscono all'hash. outputs: file che Turbo deve memorizzare nella cache e ripristinare. Se li imposta correttamente, la percentuale di cache hit sale oltre il 90%.

dependsOn

['^build']: prima esegue le build delle dipendenze. ['lint']: esegue il lint prima di questo task nello stesso pacchetto. ['^build', 'lint']: combina i due comportamenti.

cache: false e persistent: true

I task come dev non vengono mai memorizzati nella cache (sono interattivi e a esecuzione prolungata) e restano attivi (Turbo li mantiene in esecuzione). Imposti entrambi per i server di sviluppo.

Esecuzione dei task

Utilizzi la CLI di Turbo.

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

Posizioni della cache

La cache locale si trova per impostazione predefinita in node_modules/.cache/turbo. Ogni esecuzione produce log e gli output acquisiti. I cache hit mostrano: 'cache hit, replaying logs'.

Caching remoto

Invii la cache a uno store remoto, così la CI e i membri del team possono condividere i cache hit. Si registri gratuitamente con turbo login (Vercel Remote Cache) oppure utilizzi un'installazione self-hosted.

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

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

Cache remoto self-hosted

Alternative OSS: turborepo-remote-cache (Node), turbo-cache-server (Go). Lo distribuisca sulla sua infrastruttura e imposti la variabile d'ambiente TURBO_API.

Variabili d'ambiente come input

Dichiari quali variabili d'ambiente influenzano gli output: Turbo le considera input, quindi modificarle invalida la cache.

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

Filtri

Esegua un task per pacchetti specifici o per quelli interessati dalle modifiche.

# 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 e profilazione

--dry=json stampa il grafo dei task senza eseguirli. --profile genera una traccia nello stile di Chrome DevTools.

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

Errori comuni

1) Dimenticare di dichiarare gli output (Turbo non li memorizzerà nella cache). 2) Dimenticare una variabile d'ambiente che influisce sulla build. 3) Memorizzare nella cache i server di sviluppo (imposti cache: false). 4) Non utilizzare --frozen-lockfile nella CI (le variazioni del lockfile possono cambiare gli hash).

Verifica rapida

Quali due campi nella configurazione di un task Turbo determinano se gli output possono essere riprodotti dalla cache?

Rispondi nella lezione interattiva

Riepilogo: Turbo

Caching locale e remoto basato sugli hash per i task dei monorepo. turbo.json dichiara i task con dependsOn, inputs, outputs ed env. cache: false + persistent: true per i server di sviluppo. Filtri i task con --filter=web..., changed-since=[origin/main]. La cache remota (Vercel o self-hosted) condivide i cache hit tra la CI e il team. Esegua la profilazione con --profile. Configuri correttamente inputs e outputs per massimizzare la percentuale di cache hit.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 41
Lezioni: 163

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Turbo: caching e pipeline di task» è gratuita?

Sì — il testo completo di «Turbo: caching e pipeline di task» è 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 Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Turbo: caching e pipeline di task»?

Definire una pipeline in turbo.json, configurare le dipendenze dei task con dependsOn e abilitare il caching remoto per condividere gli output memorizzati tra più macchine Eserciti Frontend 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 Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend 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 4 di 4.

Quanto tempo richiede la lezione «Turbo: caching e pipeline di task»?

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

Sì. Ogni lezione Frontend 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

← Torna a Frontend Academy