Frontend Academy · 课时

Turbo：缓存与任务流水线

定义 turbo.json 流水线，使用 dependsOn 配置任务依赖，并启用远程缓存以在多台机器之间共享缓存输出。

第 4 / 4 课17 个步骤

Turbo：缓存与任务流水线 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

Turborepo 回顾

Turborepo（现在简称 Turbo）是面向 JavaScript 单体仓库的高性能构建编排工具。它会并行运行各个包中的任务，根据哈希缓存输出，并在输入未发生变化时跳过工作。

缓存为何重要

在包含 20 个包的单体仓库中，每次推送都对所有包运行“测试”成本很高。如果只有一个包发生变化，Turbo 会重新运行它的测试，并重放其他 19 个包的缓存输出——将几分钟缩短到几秒钟。

哈希如何工作

Turbo 会对以下内容进行哈希：源文件（输入 glob）、依赖（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 会让它们保持活动状态）。为开发服务器同时设置这两项。

运行任务

使用 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'。

远程缓存

将缓存推送到远程存储，以便持续集成环境和团队成员共享缓存命中结果。通过 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

自托管远程缓存

OSS 替代方案：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（锁定文件漂移可能改变哈希）。

快速检查

Turbo 任务配置中的哪两个字段决定了输出是否可以从缓存中重放？

在交互式课程中回答

回顾：Turbo

基于哈希的本地和远程缓存，用于单体仓库中的任务。turbo.json 使用 dependsOn、输入、输出和环境声明任务。开发服务器使用 cache: false 和 persistent: true。使用 --filter=web...、changed-since=[origin/main] 筛选任务。远程缓存（Vercel 或自托管）可让持续集成环境和团队共享缓存命中结果。使用 --profile 进行性能分析。正确配置输入和输出，以获得最高的缓存命中率。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「Turbo：缓存与任务流水线」课时是免费的吗？

是的 — 「Turbo：缓存与任务流水线」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Turbo：缓存与任务流水线」这节课中我会学到什么？

定义 turbo.json 流水线，使用 dependsOn 配置任务依赖，并启用远程缓存以在多台机器之间共享缓存输出。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「Turbo：缓存与任务流水线」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy