Frontend Academy · درس

Turbo: التخزين المؤقت ومسارات المهام

حدّد مسارًا في turbo.json، واضبط اعتماديات المهام باستخدام dependsOn، وفعّل التخزين المؤقت البعيد لمشاركة المخرجات المخزنة مؤقتًا بين الأجهزة

Turbo: التخزين المؤقت ومسارات المهام درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

مراجعة سريعة: Turborepo

Turborepo (المسمى الآن Turbo فقط) هو منسّق عالي الأداء للبناء في مستودعات JavaScript الأحادية. يشغّل المهام بالتوازي عبر الحزم، ويخزّن النواتج مؤقتًا اعتمادًا على تجزئتها، ويتجاوز العمل عندما لا تتغير المدخلات.

أهمية التخزين المؤقت

في مستودع أحادي يضم 20 حزمة، يكون تشغيل 'test' عند كل عملية دفع مكلفًا. فإذا تغيرت حزمة واحدة فقط، يعيد Turbo تشغيل اختبارها ويعيد تشغيل الناتج المخزّن مؤقتًا للحزم التسع عشرة الأخرى — محولًا الدقائق إلى ثوانٍ.

آلية عمل التجزئة

يُجزّئ Turbo ما يلي: ملفات المصدر (نمط glob للمدخلات)، والتبعيات (package.json وlockfile)، ومتغيرات البيئة التي تصرّحون بها، وإعدادات المهمة نفسها. التجزئة نفسها = العمل نفسه = إصابة في ذاكرة التخزين المؤقت.

turbo.json — مسار المهام

صرّحوا بالمهام والعلاقات بينها في 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 and outputs

inputs: الملفات التي تسهم في التجزئة. outputs: الملفات التي ينبغي لـ Turbo تخزينها مؤقتًا واستعادتها. اضبطوا هذه القيم بشكل صحيح، وسيرتفع معدل إصابات ذاكرة التخزين المؤقت إلى أكثر من 90%.

dependsOn

['^build']: ابنوا التبعيات أولًا. ['lint']: شغّلوا lint قبل هذه المهمة في الحزمة نفسها. ['^build', 'lint']: ادمجوا بينهما.

cache: false and persistent: true

المهام مثل dev لا تُخزَّن مؤقتًا أبدًا (لأنها تفاعلية وطويلة التشغيل)، وتبقى مستمرة (إذ يُبقيها Turbo قيد التشغيل). اضبطوا القيمتين معًا لخوادم التطوير.

تشغيل المهام

استخدموا 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

مواقع التخزين المؤقت

يوجد التخزين المؤقت المحلي افتراضيًا في node_modules/.cache/turbo. وينتج عن كل تشغيل سجلات ونواتج ملتقطة. وتطبع إصابات ذاكرة التخزين المؤقت الرسالة: 'cache hit, replaying logs'.

التخزين المؤقت عن بُعد

ادفعوا ذاكرة التخزين المؤقت إلى مخزن بعيد حتى تتمكن CI وأعضاء الفريق من مشاركة الإصابات. سجّلوا حسابًا مجانيًا باستخدام turbo login (Vercel Remote Cache)، أو استضيفوه ذاتيًا.

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

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

ذاكرة تخزين مؤقت بعيدة مستضافة ذاتيًا

من البدائل مفتوحة المصدر: turborepo-remote-cache (Node) وturbo-cache-server (Go). انشروها على بنيتكم التحتية، واضبطوا متغير البيئة TURBO_API.

مدخلات متغيرات البيئة

صرّحوا بمتغيرات البيئة التي تؤثر في النواتج — إذ يتعامل Turbo معها كمدخلات، ولذلك يؤدي تغييرها إلى إبطال ذاكرة التخزين المؤقت.

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

التصفية

شغّلوا مهمة لحزم محددة أو للحزم المتأثرة بالتغييرات.

# 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 وتحليل الأداء

يطبع --dry=json مخطط المهام من دون تشغيلها. وينشئ --profile أثرًا بأسلوب Chrome DevTools.

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

الأخطاء الشائعة

1) نسيان التصريح بالنواتج (فلن يخزّنها Turbo مؤقتًا). 2) نسيان متغير بيئة يؤثر في البناء. 3) تخزين خوادم التطوير مؤقتًا (اضبطوا cache: false). 4) عدم استخدام --frozen-lockfile في CI (فقد يؤدي اختلاف ملف القفل إلى تغيير التجزئات).

تحقق سريع

ما الحقلان في إعداد مهمة Turbo اللذان يحددان إمكانية إعادة تشغيل النواتج من ذاكرة التخزين المؤقت؟

مراجعة سريعة: Turbo

تخزين مؤقت محلي وعن بُعد قائم على التجزئة لمهام المستودعات الأحادية. يصرّح turbo.json بالمهام باستخدام dependsOn وinputs وoutputs وenv. استخدموا cache: false مع persistent: true لخوادم التطوير. صفّوا المهام باستخدام --filter=web... وchanged-since=[origin/main]. وتتيح ذاكرة التخزين المؤقت البعيدة (Vercel أو الاستضافة الذاتية) مشاركة الإصابات بين CI والفريق. حلّلوا الأداء باستخدام --profile. اضبطوا inputs وoutputs بشكل صحيح لتحقيق أعلى معدل إصابات.

الأسئلة الشائعة

هل درس «Turbo: التخزين المؤقت ومسارات المهام» مجاني؟

نعم — نص درس «Turbo: التخزين المؤقت ومسارات المهام» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «Turbo: التخزين المؤقت ومسارات المهام»؟

حدّد مسارًا في turbo.json، واضبط اعتماديات المهام باستخدام dependsOn، وفعّل التخزين المؤقت البعيد لمشاركة المخرجات المخزنة مؤقتًا بين الأجهزة تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «Turbo: التخزين المؤقت ومسارات المهام»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy