0Pricing
Frontend Academy · Pelajaran

Turbo: Tembolok dan Pipeline Tugas

Definisikan pipeline turbo.json, konfigurasikan dependensi tugas dengan dependsOn, dan aktifkan tembolok jarak jauh untuk berbagi output bertembolok antar mesin.

Turbo: Tembolok dan Pipeline Tugas adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Ringkasan Turborepo

Turborepo (sekarang hanya disebut Turbo) adalah pengatur build berperforma tinggi untuk monorepo JavaScript. Turbo menjalankan tugas di seluruh paket secara paralel, menyimpan keluaran berdasarkan hash, dan melewati pekerjaan ketika input tidak berubah.

Mengapa Caching Penting

Dalam monorepo dengan 20 paket, menjalankan 'test' pada setiap push membutuhkan biaya besar. Jika hanya satu paket yang berubah, Turbo menjalankan ulang pengujiannya dan memutar ulang keluaran yang tersimpan di cache untuk 19 paket lainnya — mengubah waktu beberapa menit menjadi beberapa detik.

Cara Kerja Hashing

Turbo membuat hash dari: file sumber (glob input), dependensi (package.json + lockfile), variabel lingkungan yang Anda deklarasikan, dan konfigurasi tugas itu sendiri. Hash yang sama = pekerjaan identik = cache hit.

turbo.json — Alur Tugas

Deklarasikan tugas dan hubungannya dalam 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 dan outputs

inputs: file yang berkontribusi pada hash. outputs: file yang harus disimpan dan dipulihkan oleh Turbo melalui cache. Jika keduanya ditentukan dengan benar, tingkat cache hit Anda dapat melonjak hingga lebih dari 90%.

dependsOn

['^build']: bangun dependensi terlebih dahulu. ['lint']: jalankan lint sebelum tugas ini dalam paket yang sama. ['^build', 'lint']: gabungkan keduanya.

cache: false dan persistent: true

Tugas seperti dev tidak pernah disimpan di cache (bersifat interaktif dan berjalan lama) serta tetap aktif (Turbo mempertahankannya agar terus berjalan). Tetapkan keduanya untuk server pengembangan.

Menjalankan Tugas

Gunakan 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

Lokasi Cache

Secara bawaan, cache lokal berada di node_modules/.cache/turbo. Setiap proses menghasilkan log + keluaran yang ditangkap. Cache hit mencetak: 'cache hit, memutar ulang log'.

Caching Jarak Jauh

Kirim cache ke penyimpanan jarak jauh agar CI dan rekan satu tim dapat berbagi cache hit. Daftar gratis melalui turbo login (Vercel Remote Cache) atau kelola sendiri.

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

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

Cache Jarak Jauh yang Dikelola Sendiri

Alternatif OSS: turborepo-remote-cache (Node), turbo-cache-server (Go). Terapkan di infrastruktur Anda, lalu tetapkan variabel lingkungan TURBO_API.

Input Variabel Lingkungan

Deklarasikan variabel lingkungan mana yang memengaruhi keluaran — Turbo memperlakukannya sebagai input sehingga perubahan pada variabel tersebut membatalkan cache.

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

Penyaringan

Jalankan tugas untuk paket tertentu atau paket yang terdampak oleh perubahan.

# 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 dan Pembuatan Profil

--dry=json mencetak graf tugas tanpa menjalankannya. --profile menghasilkan jejak bergaya Chrome-DevTools.

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

Kesalahan Umum

1) Lupa mendeklarasikan keluaran (Turbo tidak akan menyimpannya di cache). 2) Lupa mencantumkan variabel lingkungan yang memengaruhi build. 3) Menyimpan server pengembangan di cache (tetapkan cache: false). 4) Tidak menggunakan --frozen-lockfile di CI (perubahan lockfile dapat mengubah hash).

Pemeriksaan Singkat

Dua bidang apa dalam konfigurasi tugas Turbo yang menentukan apakah keluaran dapat diputar ulang dari cache?

Ringkasan: Turbo

Caching lokal + jarak jauh berbasis hash untuk tugas monorepo. turbo.json mendeklarasikan tugas dengan dependsOn, inputs, outputs, env. cache: false + persistent: true untuk server pengembangan. Saring tugas dengan --filter=web..., changed-since=[origin/main]. Cache jarak jauh (Vercel atau yang dikelola sendiri) berbagi cache hit di antara CI dan tim. Buat profil dengan --profile. Tentukan inputs/outputs dengan benar untuk mendapatkan tingkat cache hit maksimum.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Turbo: Tembolok dan Pipeline Tugas” gratis?

Ya — teks lengkap “Turbo: Tembolok dan Pipeline Tugas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Turbo: Tembolok dan Pipeline Tugas”?

Definisikan pipeline turbo.json, konfigurasikan dependensi tugas dengan dependsOn, dan aktifkan tembolok jarak jauh untuk berbagi output bertembolok antar mesin. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Turbo: Tembolok dan Pipeline Tugas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Vite: Sistem Plugin dan Mode SSR
  2. esbuild: Kecepatan dan Keterbatasan
  3. Workspace pnpm untuk Monorepo
  4. Turbo: Tembolok dan Pipeline Tugas
← Kembali ke Frontend Academy