PricingLoginStart free
Frontend Academy · Lección

Turbo: caché y pipelines de tareas

Defina un pipeline en turbo.json, configure las dependencias de tareas con dependsOn y habilite la caché remota para compartir resultados almacenados entre máquinas.

Lección 4 de 417 pasos

Turbo: caché y pipelines de tareas es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Repaso de Turborepo

Turborepo (ahora simplemente Turbo) es el orquestador de compilación de alto rendimiento para monorepos de JavaScript. Ejecuta tareas en paralelo entre los paquetes, almacena los resultados en caché mediante hashes y omite el trabajo cuando las entradas no han cambiado.

Por qué importa la caché

En un monorepo con 20 paquetes, ejecutar 'test' en cada push es costoso. Si solo ha cambiado un paquete, Turbo vuelve a ejecutar su prueba y reproduce el resultado almacenado en caché para los otros 19, convirtiendo minutos en segundos.

Cómo funciona el hashing

Turbo calcula hashes de: los archivos fuente (glob de entradas), las dependencias (package.json + lockfile), las variables de entorno que declare y la propia configuración de la tarea. Mismo hash = trabajo idéntico = acierto de caché.

turbo.json — La canalización

Declare las tareas y sus relaciones en 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 y outputs

inputs: archivos que contribuyen al hash. outputs: archivos que Turbo debe almacenar y restaurar en la caché. Si los configura correctamente, el porcentaje de aciertos de caché puede superar el 90 %.

dependsOn

['^build']: compila primero las dependencias. ['lint']: ejecuta lint antes de esta tarea en el mismo paquete. ['^build', 'lint']: combina ambas opciones.

cache: false y persistent: true

Las tareas como dev nunca se almacenan en caché (son interactivas y de larga duración) y persisten (Turbo las mantiene activas). Establezca ambas opciones para los servidores de desarrollo.

Ejecución de tareas

Use la CLI de Turbo.

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

Ubicaciones de la caché

De forma predeterminada, la caché local se encuentra en node_modules/.cache/turbo. Cada ejecución produce registros y los resultados capturados. Los aciertos de caché muestran: 'cache hit, replaying logs'.

Caché remota

Envíe la caché a un almacén remoto para que la CI y su equipo compartan los aciertos. Regístrese gratis mediante turbo login (Vercel Remote Cache) o aloje la caché por su cuenta.

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

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

Caché remota autogestionada

Alternativas de código abierto: turborepo-remote-cache (Node), turbo-cache-server (Go). Despliéguelas en su infraestructura y establezca la variable de entorno TURBO_API.

Entradas de variables de entorno

Declare qué variables de entorno afectan a los resultados; Turbo las trata como entradas, de modo que cambiarlas invalida la caché.

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

Filtrado

Ejecute una tarea para paquetes específicos o para los afectados por cambios.

# 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 y perfilado

--dry=json muestra el grafo de tareas sin ejecutarlas. --profile genera un registro de trazas con un formato similar al de Chrome DevTools.

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

Errores habituales

1) Olvidar declarar los outputs (Turbo no los almacenará en caché). 2) Olvidar una variable de entorno que afecta a la compilación. 3) Almacenar en caché los servidores de desarrollo (establezca cache: false). 4) No usar --frozen-lockfile en la CI (los cambios en el lockfile pueden modificar los hashes).

Comprobación rápida

¿Qué dos campos de la configuración de una tarea de Turbo determinan si los resultados pueden reproducirse desde la caché?

Responde en la lección interactiva

Repaso: Turbo

Caché local y remota basada en hashes para tareas de monorepos. turbo.json declara tareas con dependsOn, inputs, outputs y env. Use cache: false + persistent: true para los servidores de desarrollo. Filtre tareas con --filter=web... y changed-since=[origin/main]. La caché remota (de Vercel o autogestionada) comparte aciertos entre la CI y el equipo. Genere perfiles con --profile. Configure correctamente inputs y outputs para maximizar el porcentaje de aciertos.

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
41
Lecciones
163
Empezar a aprender gratisVer el curso completo

Preguntas frecuentes

¿La lección «Turbo: caché y pipelines de tareas» es gratis?

Sí — el texto completo de «Turbo: caché y pipelines de tareas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Turbo: caché y pipelines de tareas»?

Defina un pipeline en turbo.json, configure las dependencias de tareas con dependsOn y habilite la caché remota para compartir resultados almacenados entre máquinas. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Turbo: caché y pipelines de tareas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Vite: sistema de plugins y modo SSR
  2. esbuild: velocidad y limitaciones
  3. pnpm Workspaces para monorepos
  4. Turbo: caché y pipelines de tareas
← Volver a Frontend Academy