Frontend Academy · Lekcja

Turbo: buforowanie i potoki zadań

Zdefiniuje Pan/Pani potok w turbo.json, skonfiguruje zależności zadań za pomocą dependsOn i włączy zdalne buforowanie, aby współdzielić wyniki między maszynami.

Turbo: buforowanie i potoki zadań to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Podsumowanie Turborepo

Turborepo (obecnie po prostu Turbo) to wysokowydajny orkiestrator budowania dla monorepo JavaScript. Uruchamia zadania równolegle w wielu pakietach, buforuje wyniki na podstawie hasha i pomija pracę, gdy dane wejściowe się nie zmieniły.

Dlaczego buforowanie ma znaczenie

W monorepo z 20 pakietami uruchamianie testu przy każdym pushu jest kosztowne. Jeśli zmienił się tylko jeden pakiet, Turbo ponownie uruchamia jego test i odtwarza z bufora wynik dla pozostałych 19 — skracając czas z minut do sekund.

Jak działa haszowanie

Turbo haszuje: pliki źródłowe (glob wejściowy), zależności (package.json i lockfile), zadeklarowane zmienne środowiskowe oraz własną konfigurację zadania. Ten sam hash oznacza identyczną pracę, czyli trafienie do bufora.

turbo.json — potok

Zadeklaruj zadania i zależności między nimi w pliku 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 i outputs

inputs: pliki, które wpływają na hash. outputs: pliki, które Turbo powinno buforować i przywracać. Poprawne ich skonfigurowanie może zwiększyć współczynnik trafień do bufora do ponad 90%.

dependsOn

['^build']: najpierw zbuduj zależności. ['lint']: uruchom lint przed tym zadaniem w tym samym pakiecie. ['^build', 'lint']: połącz oba ustawienia.

cache: false i persistent: true

Zadania takie jak dev nigdy nie są buforowane (są interaktywne i długotrwałe), a ponadto pozostają aktywne (Turbo utrzymuje je przy życiu). Ustaw obie opcje dla serwerów deweloperskich.

Uruchamianie zadań

Użyj CLI Turbo.

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

Lokalizacje bufora

Lokalny bufor domyślnie znajduje się w node_modules/.cache/turbo. Każde uruchomienie tworzy dzienniki i przechwycone wyniki. Trafienia do bufora są oznaczane komunikatem: 'cache hit, replaying logs'.

Buforowanie zdalne

Przesyłaj bufor do zdalnego magazynu, aby CI i członkowie zespołu mogli współdzielić trafienia. Zarejestruj się bezpłatnie za pomocą turbo login (Vercel Remote Cache) albo hostuj rozwiązanie samodzielnie.

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

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

Samodzielnie hostowany zdalny bufor

Alternatywy open source: turborepo-remote-cache (Node), turbo-cache-server (Go). Wdróż je w swojej infrastrukturze i ustaw zmienną środowiskową TURBO_API.

Zmienne środowiskowe jako dane wejściowe

Zadeklaruj, które zmienne środowiskowe wpływają na wyniki — Turbo traktuje je jako dane wejściowe, więc ich zmiana unieważnia bufor.

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

Filtrowanie

Uruchom zadanie dla określonych pakietów lub dla pakietów dotkniętych zmianami.

# 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 i profilowanie

--dry=json wyświetla graf zadań bez ich uruchamiania. --profile generuje ślad w stylu Chrome DevTools.

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

Częste pułapki

1) Pominięcie deklaracji outputs (Turbo nie będzie ich buforować). 2) Pominięcie zmiennej środowiskowej wpływającej na budowanie. 3) Buforowanie serwerów deweloperskich (ustaw cache: false). 4) Nieużywanie --frozen-lockfile w CI (rozjechanie lockfile może zmienić hashe).

Szybki test

Jakie dwa pola w konfiguracji zadania Turbo decydują o tym, czy wyniki mogą zostać odtworzone z bufora?

Podsumowanie: Turbo

Lokalne i zdalne buforowanie zadań monorepo na podstawie hashy. Plik turbo.json definiuje zadania za pomocą dependsOn, inputs, outputs i env. Dla serwerów deweloperskich użyj cache: false i persistent: true. Filtruj zadania za pomocą --filter=web... oraz changed-since=[origin/main]. Zdalny bufor (Vercel lub rozwiązanie hostowane samodzielnie) współdzieli trafienia między CI i zespołem. Profiluj za pomocą --profile. Poprawnie skonfiguruj inputs i outputs, aby uzyskać maksymalny współczynnik trafień.

Często zadawane pytania

Czy lekcja „Turbo: buforowanie i potoki zadań” jest bezpłatna?

Tak — pełny tekst „Turbo: buforowanie i potoki zadań” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Turbo: buforowanie i potoki zadań”?

Zdefiniuje Pan/Pani potok w turbo.json, skonfiguruje zależności zadań za pomocą dependsOn i włączy zdalne buforowanie, aby współdzielić wyniki między maszynami. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Turbo: buforowanie i potoki zadań”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy