Frontend Academy · Урок

Turbo: кэширование и конвейеры задач

Определите конвейер в turbo.json, настройте зависимости задач с помощью dependsOn и включите удалённое кэширование для обмена кэшированными результатами между машинами

Урок 4 из 417 шагов

«Turbo: кэширование и конвейеры задач» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Итоги Turborepo

Turborepo, который теперь называется просто Turbo, — высокопроизводительный оркестратор сборки для монорепозиториев на JavaScript. Он параллельно запускает задачи во всех пакетах, кэширует результаты по хэшу и пропускает работу, если входные данные не изменились.

Почему кэширование важно

В монорепозитории с 20 пакетами запуск «теста» при каждом отправлении изменений обходится дорого. Если изменился только один пакет, Turbo повторно запускает его тест и воспроизводит кэшированный результат для остальных 19, превращая минуты в секунды.

Как работает хеширование

Turbo хеширует исходные файлы (шаблон входных путей), зависимости (package.json и файл блокировки), объявленные вами переменные окружения и собственную конфигурацию задачи. Одинаковый хэш = идентичная работа = попадание в кэш.

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

Входные и выходные данные

входные данные: файлы, которые участвуют в формировании хэша. выходные данные: файлы, которые Turbo должен кэшировать и восстанавливать. Правильно укажите их — и доля попаданий в кэш вырастет до 90% и более.

dependsOn

['^build']: сначала собрать зависимости. ['lint']: запустить проверку стиля перед этой задачей в том же пакете. ['^build', 'lint']: объединить оба правила.

cache: false и persistent: true

Такие задачи, как dev, никогда не кэшируются (они интерактивные и долгосрочные) и сохраняются активными (Turbo не завершает их). Установите оба параметра для серверов разработки.

Запуск задач

Используйте 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

Расположение кэша

По умолчанию локальный кэш находится в node_modules/.cache/turbo. Каждый запуск создаёт журналы и сохраняет перехваченные выходные данные. При попадании в кэш выводится сообщение: «попадание в кэш, воспроизведение журналов».

Удалённое кэширование

Отправляйте кэш в удалённое хранилище, чтобы CI и коллеги могли совместно использовать результаты. Бесплатно зарегистрируйтесь с помощью turbo login (удалённый кэш Vercel) или разместите хранилище самостоятельно.

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) В CI не используется --frozen-lockfile, из-за чего изменение файла блокировки может изменить хэши.

Быстрая проверка

Какие два поля в конфигурации задачи Turbo определяют, можно ли воспроизвести выходные данные из кэша?

Ответь в интерактивном уроке

Итоги: Turbo

Локальное и удалённое кэширование задач монорепозитория на основе хэшей. В turbo.json задачи объявляются с помощью dependsOn, входных и выходных данных и переменных окружения. Для серверов разработки используйте cache: false и persistent: true. Фильтруйте задачи с помощью --filter=web... и changed-since=[origin/main]. Удалённый кэш (Vercel или собственный) позволяет CI и команде совместно использовать результаты. Профилируйте с помощью --profile. Правильно задавайте входные и выходные данные, чтобы добиться максимальной доли попаданий в кэш.

Можно начать бесплатно

Изучай HTML с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 41
Уроки: 163

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «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 включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Vite: система плагинов и режим SSR
esbuild: скорость и ограничения
Рабочие пространства pnpm для монорепозиториев
Turbo: кэширование и конвейеры задач

← Назад к Frontend Academy