TypeScript al máximo: cómo acelerar el código 10 veces

¿Su código TypeScript funciona lento? Es hora de mirar bajo el capó

Escribió un código perfecto en TypeScript. Los tipos están establecidos, las abstracciones son bonitas, las pruebas están en verde. Pero el servidor de producción «se ralentiza» y los componentes de React se vuelven a renderizar con retraso. ¿Le suena familiar? A menudo el problema no está en la lógica, sino en el rendimiento de TypeScript, que no notamos hasta que la carga se vuelve real.

En este artículo no hablaremos de la velocidad de compilación, ese es un tema para otra conversación. Nos centraremos en el rendimiento en tiempo de ejecución: cómo perfilar el código terminado, encontrar los «cuellos de botella» y optimizar TypeScript para que la aplicación vuele. Descubrirá por qué map es 10 veces más rápido que forEach, cómo el GC mata los FPS y qué herramientas de perfilado debería llevar siempre consigo.

Herramientas de perfilado de TypeScript: desde Chrome hasta Node.js

Antes de optimizar algo, hay que entender dónde se pierden los milisegundos. Para ello, en TypeScript existen tres enfoques principales para el perfilado.

1. Pestaña de Rendimiento de Chrome DevTools

Si escribe frontend, su mejor amigo es la pestaña Performance en Chrome DevTools. Grabar un perfil le mostrará una imagen completa: qué JavaScript se ejecuta durante más tiempo, cuánto tiempo lleva la recolección de basura y dónde se producen las «caídas» de FPS. TypeScript después de la compilación es JavaScript puro, por lo que el perfilador ve exactamente lo que se está ejecutando.

// Ejemplo: perfilamos un cálculo "pesado" en el navegador\nfunction processLargeArray(items: number[]): number[] {\n  const result: number[] = [];\n  for (let i = 0; i < items.length; i++) {\n    // Simulación de trabajo pesado\n    result.push(items[i] * Math.sqrt(items[i]));\n  }\n  return result;\n}\n\nconsole.time('processLargeArray');\nconst data = Array.from({ length: 100000 }, (_, i) => i);\nprocessLargeArray(data);\nconsole.timeEnd('processLargeArray');\n

Abra la pestaña Performance, presione Record, ejecute este código — y verá el tiempo exacto de ejecución, así como la pila de llamadas. Si la función tarda más de 100ms, es motivo para pensar en optimizar el código TypeScript.

2. Perfilador de Node.js (--prof y --inspect)

Para el backend en Node.js con TypeScript, use el perfilador integrado. Ejecute la aplicación con la bandera --prof:

node --prof dist/server.js\n

Después de que termine el trabajo, se crea un archivo isolate-*.log. Conviértalo a un formato legible:

node --prof-process isolate-*.log > processed.txt\n

En el archivo verá qué funciones (incluidas las de TypeScript compilado) consumen más CPU. Esta es una herramienta indispensable para el perfilado de TypeScript en producción.

3. Perfilador de CPU V8 a través de Clinic.js

Para un análisis más visual, use Clinic.js. Dibuja hermosos gráficos de llama y muestra dónde el código TypeScript «se ralentiza».

npm install -g clinic\nclinic doctor -- node dist/server.js\n

Después de las pruebas, abra el informe HTML — verá qué funciones ocupan el 90% del tiempo. A menudo son lugares inesperados: por ejemplo, llamadas frecuentes a JSON.parse o bucles no optimizados.

Las 5 mejores técnicas de optimización de código TypeScript

Cuando el perfilador haya mostrado los «puntos calientes», es hora de ponerse manos a la obra con la optimización. Aquí hay cinco formas probadas de acelerar TypeScript que uso en mis proyectos.

1. Evite map si necesita forEach

Suena extraño, pero map crea un nuevo array, incluso si no lo usa. Si solo necesita realizar una acción, use forEach o el clásico for.

// Lento — crea un array innecesario\nconst ids = users.map(user => {\n  sendEmail(user.email);\n  return user.id;\n});\n\n// Rápido