0Pricing
TypeScript Academy · Lección

Perfilado de compilaciones lentas de TypeScript

Utilice --extendedDiagnostics y --generateTrace para encontrar cuellos de botella.

Perfilado de compilaciones lentas de TypeScript es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 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 TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Por qué TypeScript puede ser lento

Los tipos condicionales complejos, las distribuciones de uniones grandes y los tipos mapeados profundamente recursivos pueden ralentizar considerablemente el comprobador de tipos de TypeScript en proyectos grandes.

// Expensive: distributive conditional on large union
type Slow = LargeUnion extends infer T ? T extends string ? T : never : never;

Indicador --extendedDiagnostics

Ejecute tsc --extendedDiagnostics para ver un desglose del tiempo de compilación: fases de análisis sintáctico, vinculación, comprobación de tipos y emisión.

tsc --extendedDiagnostics 2>&1 | head -40
# Output:
# Files:             212
# Lines:            48320
# Check time:       8.23s  ← focus here

Indicador --generateTrace

tsc --generateTrace ./trace genera un archivo de trazas compatible con Chrome DevTools que puede cargar en la pestaña Performance para ver qué tipos son costosos.

tsc --generateTrace ./trace-output
# Open trace-output/trace.json in Chrome DevTools > Performance

Análisis de la traza

En la traza, busque barras horizontales largas que representen instanciaciones de tipos costosas. El nombre del tipo y la ubicación en el código fuente indican qué debe optimizar.

# Common culprits in traces:
# - Recursive mapped types with large inputs
# - Distributive conditionals over 50+ member unions
# - Deep infer chains on complex generics

Indicador --listFiles

tsc --listFiles muestra todos los archivos incluidos en la compilación. La inclusión accidental de directorios grandes de node_modules es una causa frecuente de problemas de rendimiento.

tsc --listFiles 2>&1 | grep node_modules | wc -l
# If this is large, check your include/exclude settings

Reducción de la inclusión de archivos

Use include y exclude en tsconfig para limitar los archivos que procesa TypeScript.

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "**/*.test.ts"]
}

skipLibCheck para mejoras rápidas

skipLibCheck: true omite la comprobación de tipos de todos los archivos de declaración .d.ts, lo que puede acelerar considerablemente la compilación en proyectos con muchas dependencias.

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

Aislamiento de tipos costosos

Extraiga los cálculos de tipos costosos a tipos intermedios con nombre para que TypeScript pueda almacenarlos en caché en lugar de recalcularlos en cada lugar donde se usan.

// Slow: recomputed at each usage
type Result = ComplexUnion extends string ? ComplexUnion : never;

// Fast: cached
type FilteredUnion = ComplexUnion extends string ? ComplexUnion : never;
type Result = FilteredUnion;

Comprobación con transpileOnly

Durante el desarrollo, use ts-jest o esbuild con transpileOnly: true para omitir la comprobación de tipos y acelerar la iteración. Ejecute las comprobaciones completas de tipos por separado en CI.

// jest.config.js with ts-jest
{
  transform: {
    "^.+\.tsx?$": ["ts-jest", { diagnostics: false }]
  }
}

Rendimiento del editor

Las ralentizaciones del servidor de lenguaje de TypeScript en VS Code suelen deberse a los mismos tipos costosos. Compruebe TypeScript: Restart TS Server y el registro de seguimiento de TS del servidor de lenguaje.

// VS Code settings.json to enable detailed TS server log:
// "typescript.tsserver.log": "verbose"

Resumen: creación de perfiles de la compilación

Utilice --extendedDiagnostics para obtener tiempos generales, --generateTrace para analizar cada tipo y reduzca la inclusión de archivos, las condicionales profundas y las distribuciones de uniones grandes para acelerar la compilación.

Comprobación rápida

¿Qué opción genera un archivo de seguimiento compatible con Chrome DevTools?

Lo que ha aprendido

Perfile la compilación de TypeScript con --extendedDiagnostics y --generateTrace. Reduzca el tiempo de compilación limitando la inclusión de archivos, utilizando skipLibCheck, almacenando en caché los tipos intermedios y evitando operaciones de tipos profundamente recursivas o distributivas.

Preguntas frecuentes

¿La lección «Perfilado de compilaciones lentas de TypeScript» es gratis?

Sí — el texto completo de «Perfilado de compilaciones lentas de TypeScript» 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 TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Perfilado de compilaciones lentas de TypeScript»?

Utilice --extendedDiagnostics y --generateTrace para encontrar cuellos de botella. Practicas TypeScript 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 TypeScript Academy?

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

¿Cuánto tiempo toma la lección «Perfilado de compilaciones lentas de TypeScript»?

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

Sí. Cada lección de TypeScript 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. Perfilado de compilaciones lentas de TypeScript
  2. Cómo evitar operaciones de tipos costosas
  3. skipLibCheck y declaraciones aisladas
  4. Comprobación de tipos en CI: estrategias y herramientas
← Volver a TypeScript Academy