TypeScript no máximo: como acelerar o código em 10 vezes

Seu código TypeScript está lento? Hora de olhar sob o capô

Você escreveu um código TypeScript perfeito. Os tipos estão definidos, as abstrações são bonitas, os testes estão verdes. Mas o servidor de produção está "travando" e os componentes React estão sendo renderizados com atraso. Familiar? Muitas vezes o problema não está na lógica, mas no desempenho do TypeScript, que não notamos até que a carga se torne real.

Neste artigo, não falaremos sobre velocidade de compilação — esse é um tópico para outra conversa. Vamos nos concentrar no desempenho em tempo de execução: como criar perfil do código pronto, encontrar "gargalos" e otimizar o TypeScript para que a aplicação voe. Você descobrirá por que o map é 10 vezes mais rápido que o forEach, como o GC mata o FPS e quais ferramentas de criação de perfil você deve ter em mãos.

Ferramentas de criação de perfil TypeScript: do Chrome ao Node.js

Antes de otimizar qualquer coisa, você precisa entender exatamente onde os milissegundos estão sendo perdidos. Para isso, existem três abordagens principais para criação de perfil no TypeScript.

1. Aba Performance do Chrome DevTools

Se você escreve frontend, seu melhor amigo é a aba Performance no Chrome DevTools. Gravar um perfil mostrará a imagem completa: qual JavaScript está demorando mais, quanto tempo a coleta de lixo está levando e onde estão ocorrendo as "quedas" de FPS. O TypeScript após a compilação é JavaScript puro, então o criador de perfil vê exatamente o que está sendo executado.

// Exemplo: criando perfil de um cálculo "pesado" no navegador\nfunction processLargeArray(items: number[]): number[] {\n  const result: number[] = [];\n  for (let i = 0; i < items.length; i++) {\n    // Simulação de trabalho 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 a aba Performance, clique em Record, execute este código — e você verá o tempo exato de execução, bem como a pilha de chamadas. Se a função levar mais de 100ms, é motivo para pensar em otimizar o código TypeScript.

2. Criador de perfil do Node.js (--prof e --inspect)

Para backend em Node.js com TypeScript, use o criador de perfil integrado. Execute a aplicação com a flag --prof:

node --prof dist/server.js\n

Após a conclusão, um arquivo isolate-*.log é criado. Converta-o para um formato legível:

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

No arquivo, você verá quais funções (incluindo as do TypeScript compilado) consomem mais CPU. Esta é uma ferramenta indispensável para criação de perfil TypeScript em produção.

3. Criador de perfil de CPU V8 via Clinic.js

Para uma análise mais visual, use o Clinic.js. Ele gera belos flame charts e mostra onde o código TypeScript está "travando".

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

Após o teste, abra o relatório HTML — você verá quais funções ocupam 90% do tempo. Muitas vezes são lugares inesperados: por exemplo, chamadas frequentes a JSON.parse ou loops não otimizados.

Top 5 técnicas de otimização de código TypeScript

Quando o criador de perfil mostrar os "pontos críticos", é hora de começar a otimizar. Aqui estão cinco maneiras comprovadas de acelerar o TypeScript que uso em meus projetos.

1. Evite map se precisar de forEach

Parece estranho, mas map cria um novo array, mesmo que você não o utilize. Se você só precisa executar uma ação, use forEach ou o clássico for.

// Lento — cria um array desnecessário\nconst ids = users.map(user => {\n  sendEmail(user.email);\n  return user.id;\n});\n\n// Rápido