Perfilamento de código TypeScript: encontrando gargalos

Introdução: por que perfilar TypeScript?

TypeScript é uma ferramenta poderosa para desenvolver aplicações escaláveis, mas mesmo o código mais bem tipado pode sofrer de problemas ocultos de desempenho. Gargalos (bottlenecks) surgem devido a algoritmos ineficientes, operações de I/O excessivas, gerenciamento inadequado de memória ou cálculos lentos. A perfilagem permite identificar essas áreas e otimizá-las de forma direcionada.

Neste artigo, exploraremos métodos práticos de perfilagem de código TypeScript: desde ferramentas integradas do navegador até utilitários especializados para Node.js. Você aprenderá a encontrar funções lentas, analisar a pilha de chamadas e tomar decisões baseadas em dados.

Ferramentas de perfilagem TypeScript

A perfilagem de código TypeScript não difere da perfilagem de JavaScript, pois o TypeScript é compilado para JS. No entanto, é importante considerar que o código-fonte em TypeScript pode conter abstrações adicionais (genéricos, decoradores, interfaces) que, após a compilação, podem gerar padrões não óbvios.

1. Chrome DevTools Performance

Para aplicações frontend, a melhor escolha é a aba Performance no Chrome DevTools. Ela grava a atividade da página e mostra um gráfico de frames, tempo de execução de funções, eventos e uso de memória.

Como usar:

• Abra o DevTools (F12) → aba Performance.
• Pressione o botão de gravação (círculo), execute a ação desejada na página.
• Pare a gravação e estude o flame chart.

Exemplo: se você tem uma função de processamento de array que leva mais de 100 ms, ela aparecerá como um bloco largo no gráfico. Clique nela — o DevTools mostrará o código-fonte (se os source maps estiverem conectados) e o tempo de execução.

// Código TypeScript originalfunction processItems(items: number[]): number[] {  return items    .filter(x => x > 10)    .map(x => x * 2)    .reduce((acc, val) => acc + val, 0);}

Após a perfilagem, você pode perceber que filter e map criam arrays intermediários, o que desacelera a execução em grandes volumes de dados. A otimização é substituir a cadeia por uma única passagem com for ou reduce.

2. Profiler integrado do Node.js

Para código de servidor em Node.js, use o profiler integrado do V8. Ele coleta amostras da pilha de chamadas e permite analisar quais funções consomem mais tempo.

Execução:

node --prof your-compiled-file.js

Após a execução, um arquivo isolate-0x...-v8.log será gerado. Converta-o para um formato legível:

node --prof-process isolate-0x...-v8.log > profile.txt

No arquivo resultante, você verá uma tabela com colunas: ticks (número de amostras), total (tempo total), nonlib (tempo excluindo bibliotecas) e nome da função. Funções com o maior número de ticks são suas candidatas à otimização.

3. ts-node e source maps

Ao desenvolver em TypeScript, frequentemente usa-se ts-node para executar código sem compilação prévia. Para perfilagem, certifique-se de que os source maps estão habilitados no tsconfig.json:

{  "compilerOptions": {    "sourceMap": true,    "inlineSourceMap": true  }}

Em seguida, inicie a aplicação com a flag --inspect:

node --inspect -r ts-node/register src/app.ts

Abra o Chrome e vá para chrome://inspect. Você verá sua aplicação e poderá usar o DevTools para perfilagem, visualizando o código TypeScript original, não o JavaScript compilado.

Encontrando gargalos: exemplos práticos

Vamos considerar três cenários típicos onde a perfilagem ajuda a encontrar problemas.

1. Cálculos lentos em loop

Suponha que você tenha