0Pricing
React Academy · Lección

Comandos Affected y caché de Nx

Ejecute únicamente las pruebas y compilaciones afectadas por un cambio y acelere la CI con la caché distribuida de Nx Cloud.

Comandos Affected y caché de Nx es una lección gratuita de React Academy en CoddyKit. Esta es la lección 3 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

El concepto de proyectos afectados

Nx realiza el seguimiento del grafo de dependencias de su monorepo. Cuando cambia un archivo, Nx calcula qué proyectos están afectados (modificados directamente o dependientes de proyectos modificados) y ejecuta las tareas únicamente para esos proyectos.

Ejecución de pruebas de proyectos afectados

Ejecute las pruebas únicamente para los proyectos afectados por los cambios realizados desde la rama principal.

# Compare to main branch:
npx nx affected --target=test --base=origin/main --head=HEAD

# Shorthand (uses nx.json defaultBase):
npx nx affected --target=test

Ejecución de compilaciones de proyectos afectados

Compile únicamente los proyectos afectados; esto es esencial en CI para evitar recompilar todo el monorepo en cada PR.

npx nx affected --target=build

# With parallel workers:
npx nx affected --target=build --parallel=3

Lint y E2E de proyectos afectados

Aplique el mismo patrón al lint y a las pruebas E2E.

npx nx affected --target=lint
npx nx affected --target=e2e

Cómo determina Nx qué está afectado

Nx calcula un hash de todos los archivos de código fuente, los archivos package.json y los archivos de configuración. Un proyecto está afectado si cambió cualquiera de sus propios archivos o si cambió algún proyecto del que importa.

Caché de computación local

Nx almacena en caché los resultados de las tareas (artefactos de compilación y resultados de pruebas) en .nx/cache. Al ejecutar la misma tarea con entradas sin cambios, el resultado se restaura al instante desde la caché; incluso se reproducen las salidas de la terminal.

# First run (builds):
$ npx nx build web  → Builds in 28s, cached

# Second run (no changes):
$ npx nx build web  → Cache hit! [existing outputs match] 0ms

# Clear cache if needed:
$ npx nx reset

Caché remota de Nx Cloud

Nx Cloud comparte la caché entre los miembros del equipo y CI. Si un compañero ya compiló un proyecto con las mismas entradas, CI utiliza la caché remota en lugar de recompilarlo, incluso en una máquina nueva.

# Connect workspace to Nx Cloud:
npx nx connect-to-nx-cloud

# Set CI environment variable:
# NX_CLOUD_ACCESS_TOKEN=<token>

Configuración de las entradas de la caché

Configure qué archivos son entradas de la caché para un destino en project.json. Excluya los archivos que no afectan al resultado de la compilación (por ejemplo, README y archivos de prueba) para maximizar los aciertos de caché.

// project.json
{
  "targets": {
    "build": {
      "inputs": [
        "default",  // source files
        "^default"  // upstream dependency source files
      ],
      "outputs": ["{workspaceRoot}/dist/apps/web"]
    }
  }
}

Distribución de tareas (Nx Agents)

Nx Cloud Agents distribuye las tareas afectadas entre varias máquinas de CI en paralelo, lo que reduce considerablemente el tiempo de ejecución de CI en monorepos grandes.

Extensión Nx Console para VS Code

La extensión Nx Console proporciona una interfaz gráfica para ejecutar comandos de Nx, visualizar el grafo de proyectos y generar código, sin necesidad de memorizar las opciones de la CLI.

Visualización del grafo de tareas

nx graph --task=build muestra el grafo de dependencias de las tareas, incluidos los vínculos de dependencia entre ellas; resulta útil para comprender el orden de compilación.

npx nx graph --task=build

Comprobación rápida

¿Qué determina si una tarea de Nx es un acierto de caché?

Repaso

nx affected --target=X ejecuta tareas únicamente para los proyectos modificados y sus dependientes. Nx almacena los resultados en caché calculando un hash de las entradas y los reproduce al instante. Nx Cloud amplía esta capacidad con una caché remota compartida entre máquinas. Use --parallel=N para ejecutar tareas simultáneamente y acelerar CI.

Preguntas frecuentes

¿La lección «Comandos Affected y caché de Nx» es gratis?

Sí — el texto completo de «Comandos Affected y caché de Nx» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Comandos Affected y caché de Nx»?

Ejecute únicamente las pruebas y compilaciones afectadas por un cambio y acelere la CI con la caché distribuida de Nx Cloud. Practicas React 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 React Academy?

No se requiere experiencia previa. React 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 3 de 4.

¿Cuánto tiempo toma la lección «Comandos Affected y caché de Nx»?

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 React Academy?

Sí. Cada lección de React 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. Crear un monorepo Nx con aplicaciones React
  2. Bibliotecas compartidas y paquetes internos
  3. Comandos Affected y caché de Nx
  4. Generadores de código y automatización del workspace
← Volver a React Academy