On agosto 27, 2024

Acelerando Builds no Angular com isolatedModules: O que Você Precisa Saber

Imagine que você está construindo uma cidade. Cada prédio representa um arquivo de código, e para que tudo funcione em harmonia, cada prédio deve ser construído de forma independente, sem depender de informações detalhadas dos outros. Isso é o que a funcionalidade isolatedModules do TypeScript faz com o seu código: cada arquivo é tratado como uma unidade isolada. E agora, com o Angular 18.2, essa técnica está disponível para otimizar seus projetos e aumentar a eficiência dos builds. Neste artigo, vamos explorar o que é o isolatedModules, como ele funciona, e como você pode usar essa abordagem para acelerar suas aplicações Angular.

O que é `isolatedModules`?

Imagine o TypeScript como um engenheiro que cuida de cada detalhe do projeto, assegurando que todas as peças do código funcionem juntas de forma perfeita. Entretanto, em muitos casos, esse engenheiro não está presente em cada fase da construção. Em vez disso, ferramentas como Babel ou esbuild, que são como robôs trabalhadores, fazem o trabalho pesado de transpilar o código TypeScript em JavaScript. Esses robôs só olham para um prédio (arquivo) por vez, e por isso, não podem ver o quadro geral da cidade (projeto).

O isolatedModules foi criado para garantir que esses robôs possam trabalhar de maneira eficiente, sem precisar do engenheiro supervisionando todo o tempo. Quando essa opção é ativada, o TypeScript avisa se o seu código estiver fazendo algo que não pode ser compreendido por esses robôs trabalhadores. Esse é o primeiro passo para garantir que o código que você escreve pode ser processado de forma segura, mesmo em um ambiente onde cada arquivo é tratado isoladamente.

Impacto no Código

Mas, como toda boa construção, existem algumas regras a serem seguidas para garantir que tudo corra bem. Vamos examinar as principais restrições que o isolatedModules impõe ao seu código, assim como um mestre de obras que impõe regras para garantir a estabilidade de cada estrutura.

Exportação de Identificadores que Não Produzem Valores Em um projeto TypeScript, é comum importar e exportar tanto tipos quanto valores. No entanto, quando você está utilizando isolatedModules, há uma regra importante: você não pode exportar algo que não produza um valor real em JavaScript. Pense nisso como tentar exportar uma planta de construção ao invés do prédio real. A planta pode ser útil, mas o robô trabalhador só entende o prédio físico.

Exemplo:

import { someType, someFunction } from "someModule";
someFunction();
export { someType, someFunction };  // Erro com `isolatedModules` habilitado

Aqui, someType é um tipo e não um valor. O transpilador, que trabalha em um arquivo por vez, não pode lidar com isso, resultando em um erro.

2. Namespaces em Arquivos que Não São Módulos Imagine os namespaces como grandes áreas dentro de sua cidade que agrupam vários prédios relacionados. Com isolatedModules habilitado, você só pode usar esses namespaces em arquivos que sejam claramente módulos, ou seja, arquivos que tenham importações ou exportações. Se tentar usar namespaces em um arquivo global (um arquivo que não seja um módulo), é como tentar construir uma nova área da cidade sem planejamento, e isso resultará em problemas.

Exemplo:

namespace ExampleNamespace {
  export const value = 1;
}
// Erro: Namespaces não são permitidos em arquivos globais quando `isolatedModules` está habilitado.

3. Referências a const enums Const enums no TypeScript são como etiquetas que substituem números em seu código. Quando você usa um const enum, o TypeScript substitui essa etiqueta pelo número correspondente no código JavaScript final. No entanto, se você está usando transpiladores de arquivo único, como o Babel, esses robôs não têm como substituir essas etiquetas, porque eles só enxergam o arquivo atual. Com isolatedModules habilitado, o uso de const enums resulta em erros, pois o robô não tem como resolver essas referências.

Exemplo:

declare const enum Colors {
  Red = 0,
  Blue = 1,
}
console.log(Colors.Red + Colors.Blue);  // Erro com `isolatedModules` habilitado

Como o `isolatedModules` Melhora o Desempenho no Angular

Agora, vamos imaginar a cidade funcionando com máxima eficiência. Ao ativar isolatedModules no Angular 18.2, o processo de transpiração do TypeScript é delegado diretamente ao robô trabalhador (como o esbuild), que tem um entendimento profundo de como otimizar o código. Esse robô consegue fazer mais do que apenas construir prédios, ele otimiza cada detalhe da construção, removendo tarefas desnecessárias e garantindo que tudo seja feito no menor tempo possível.

O resultado? Uma cidade (ou aplicação) que é construída muito mais rapidamente. A equipe do Angular observou uma melhoria de até 10% no tempo de build em produção ao utilizar essa abordagem. Isso significa que, ao invés de esperar horas para que sua aplicação esteja pronta para ser lançada, você economiza tempo e ganha em produtividade.

Habilitando o `isolatedModules` no Angular

Agora que você entende os benefícios, vamos falar sobre como aplicar isso no seu projeto. Para habilitar essa funcionalidade e aproveitar todas as vantagens, você precisa ajustar o arquivo tsconfig.json do seu projeto Angular. É como fazer uma pequena mudança no plano da cidade para que ela seja construída de forma mais eficiente.

{
  "compilerOptions": {
    ...
    "isolatedModules": true
  }
}

Além disso, há outro detalhe importante: o comportamento de campos de classe no TypeScript. Para garantir que o código gerado siga os padrões modernos do ECMAScript, você deve ajustar ou remover a opção useDefineForClassFields. Isso garante que a definição de campos de classe seja otimizada e compatível com as melhores práticas atuais.

Considerações Importantes

Como qualquer bom projeto de construção, você precisa seguir algumas regras para garantir que tudo funcione perfeitamente:

Evite exportar tipos, pois eles não geram valores em JavaScript. Isso é como tentar exportar uma planta ao invés do prédio real.
Não use namespaces em arquivos que não sejam módulos. Isso mantém o planejamento da cidade organizado.
Evite o uso de const enums, optando por enums regulares. Isso garante que os robôs trabalhadores consigam lidar com as substituições necessárias.

Seguindo essas diretrizes, você poderá aproveitar ao máximo o isolatedModules sem encontrar erros indesejados.

Conclusão

Ao habilitar o isolatedModules no Angular 18.2, você está dando um passo importante para otimizar o processo de build da sua aplicação. Com a eficiência de um robô trabalhador que entende as melhores práticas de construção, o seu projeto será construído mais rapidamente e de forma mais eficiente. Essa é uma oportunidade para levar o desempenho do seu projeto Angular a um novo patamar, garantindo que cada linha de código seja processada da maneira mais eficiente possível.

Se você está utilizando o Angular 18.2 ou superior, considere habilitar o isolatedModules em seu projeto. Essa pequena mudança pode trazer grandes ganhos de performance e produtividade. Como um arquiteto que planeja sua cidade para o futuro, você estará preparando seu projeto para ser mais ágil e eficiente.