Frontend Academy · Ders

Turbo: Önbelleğe Alma ve Görev İşlem Hatları

4. ders / 417 adım

Turbo: Önbelleğe Alma ve Görev İşlem Hatları, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Turborepo Özeti

Turborepo (artık yalnızca Turbo), JavaScript monorepo'ları için yüksek performanslı bir derleme düzenleyicisidir. Paketler arasındaki görevleri paralel olarak çalıştırır, çıktıları karma değerine göre önbelleğe alır ve girdiler değişmediğinde işi atlar.

Önbellekleme Neden Önemlidir

20 pakete sahip bir monorepo'da her gönderimde her paketi sınamak pahalıdır. Yalnızca bir paket değiştiyse Turbo, onun sınamasını yeniden çalıştırır ve diğer 19 paket için önbelleğe alınmış çıktıyı yeniden oynatır — dakikaları saniyelere dönüştürür.

Karma Oluşturma Nasıl Çalışır

Turbo şunların karmasını oluşturur: kaynak dosyaları (girdi glob'u), bağımlılıklar (package.json + kilit dosyası), bildirdiğiniz ortam değişkenleri ve görevin kendi yapılandırması. Aynı karma = aynı iş = önbellek isabeti.

turbo.json — İşlem Hattı

Görevleri ve aralarındaki ilişkileri turbo.json içinde bildirin.

// 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 }
  }
}

Girdiler ve Çıktılar

inputs: karmaya katkıda bulunan dosyalar. outputs: Turbo'nun önbelleğe alıp geri yüklemesi gereken dosyalar. Bunları doğru ayarladığınızda önbellek isabet oranınız %90'ın üzerine çıkar.

dependsOn

['^build']: önce bağımlılıkları derleyin. ['lint']: aynı pakette bu görevden önce lint çalıştırın. ['^build', 'lint']: ikisini birleştirir.

cache: false ve persistent: true

dev gibi görevler (etkileşimli ve uzun süre çalıştıkları için) hiçbir zaman önbelleğe alınmaz ve kalıcıdır (Turbo onları çalışır durumda tutar). Geliştirme sunucuları için her iki seçeneği de ayarlayın.

Görevleri Çalıştırma

Turbo CLI'sını kullanın.

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

Önbellek Konumları

Yerel önbellek varsayılan olarak node_modules/.cache/turbo konumunda bulunur. Her çalıştırma, günlükler ve yakalanan çıktılar üretir. Önbellek isabetlerinde şu ileti yazdırılır: 'önbellek isabeti, günlükler yeniden oynatılıyor'.

Uzak Önbellekleme

CI ve ekip arkadaşlarının aynı isabetleri paylaşabilmesi için önbelleği uzak bir depoya gönderin. turbo login (Vercel Remote Cache) aracılığıyla ücretsiz kaydolun veya kendi sunucunuzu barındırın.

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

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

Kendi Sunucunuzda Barındırılan Uzak Önbellek

OSS alternatifleri: turborepo-remote-cache (Node), turbo-cache-server (Go). Kendi altyapınıza dağıtın ve TURBO_API ortam değişkenini ayarlayın.

Ortam Değişkeni Girdileri

Çıktıları hangi ortam değişkenlerinin etkilediğini bildirin — Turbo, ortam değişkenlerini girdi olarak değerlendirir; böylece değişmeleri önbelleği geçersiz kılar.

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

Filtreleme

Bir görevi belirli paketler için veya değişikliklerden etkilenen paketlerde çalıştırın.

# 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 ve Profil Oluşturma

--dry=json, çalıştırmadan görev grafiğini yazdırır. --profile, Chrome-DevTools tarzı bir iz oluşturur.

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

Yaygın Tuzaklar

1) Çıktıları bildirmeyi unutmak (Turbo bunları önbelleğe almaz). 2) Derlemeyi etkileyen bir ortam değişkenini unutmak. 3) Geliştirme sunucularını önbelleğe almak (cache: false olarak ayarlayın). 4) CI'da --frozen-lockfile kullanmamak (kilit dosyasındaki kaymalar karmaları değiştirebilir).

Hızlı Kontrol

Bir Turbo görevi yapılandırmasında hangi iki alan, çıktıların önbellekten yeniden oynatılıp oynatılamayacağını belirler?

İnteraktif derste cevapla

Özet: Turbo

Monorepo görevleri için karma tabanlı yerel ve uzak önbellekleme. turbo.json, dependsOn, inputs, outputs ve env ile görevleri bildirir. Geliştirme sunucuları için cache: false ve persistent: true kullanın. Görevleri --filter=web... ve changed-since=[origin/main] ile filtreleyin. Uzak önbellek (Vercel veya kendi sunucunuzda barındırılan) CI ve ekip genelinde isabetleri paylaşır. --profile ile profil oluşturun. En yüksek isabet oranı için girdileri ve çıktıları doğru ayarlayın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 41
Dersler: 163

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Turbo: Önbelleğe Alma ve Görev İşlem Hatları” dersi ücretsiz mi?

Evet — “Turbo: Önbelleğe Alma ve Görev İşlem Hatları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Turbo: Önbelleğe Alma ve Görev İşlem Hatları” dersinde ne öğreneceğim?

Bir turbo.json işlem hattı tanımlamayı, görev bağımlılıklarını dependsOn ile yapılandırmayı ve önbelleğe alınmış çıktıları makineler arasında paylaşmak için uzak önbelleğe almayı etkinleştirmeyi öğre… Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Turbo: Önbelleğe Alma ve Görev İşlem Hatları” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Vite: Eklenti Sistemi ve SSR Modu
esbuild: Hız ve Sınırlamalar
Monorepo'lar için pnpm Workspaces
Turbo: Önbelleğe Alma ve Görev İşlem Hatları

← Frontend Academy Sayfasına Dön