Reduzindo o tempo da pipeline em x3 vezes
Tags: frontend, cicd, webpack, vite
Published: 2024-06-18 17:56:29

Nesse texto, tenho como objetivo compartilhar a nossa estratégia para diminuir o tempo que nossa pipeline de CI/CD demorava para ser executada, essa estratégia pode ser aplicada independente do framework ou biblioteca.

Esse artigo usará um projeto de front-end que demorava 15 minutos para ter sua pipeline concluída. Iremos considerar a pipeline com: Autenticação no NPM, Instalação de bibliotecas, Lint de arquivos e tipagem, Build, Deploy, Testes (E2E, Unitários e Integrados).

## O que você encontrará nesse artigo?

- Importância de reduzirmos o tempo de nossas pipelines
- Estratégia para redução de tempo de execução
- Referências a documentação de ferramentas que estamos utilizando

## Antes de começar

- O projeto front-end que vamos usar roda com React e Webpack inicialmente
- Essa estratégia não é uma bala de prata, só aplicamos ela depois de 3 anos no nosso monolito front-end, evite fazer otimizações prematuras em seu projeto
- Pode ser aplicado para projetos de diferentes contextos, porém é necessário analisar se a etapa de build faz sentido ser modificada

## Por que eu preciso me preocupar com o tempo da pipeline?

- **Impacto na entrega de valor** - Uma pipeline demorada afeta de maneira significativa a entrega de valor para o usuário, causando falta de eficiência em disponibilizar recursos ou correções para o usuário.
- **Escalabilidade** - Quanto mais o projeto cresce, mais a sua pipeline vai demorar para ser concluída. Em algum momento será mais custoso esperar a pipeline ser concluída do que desenvolver a solução.
- **Colaboração** - Em um time com muitos engenheiros, uma pipeline demorada vai causar um grande gargalo de entregas. Onde um engenheiro irá fazer o merge de uma Pull Request e os outros precisaram rodar a pipeline novamente por conta da mudança. Com a pipeline demorada, isso vai gerar um grande gargalo e vai ficar quase que impossível de se entregar novas soluções.
- **Otimização de custos** - A maioria das ferramentas cobram por tempo de execução da pipeline, quanto mais a sua pipeline demorar maior será o custo final.

## Encontrando os gargalos dentro da nossa pipeline

Com a imagem abaixo, podemos analisar o tempo que cada etapa leva para completar a execução de nossa pipeline.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4elxeph8dcstffe52in.png)

## Paralelizando nossa pipeline

Nesse projeto estamos usando o Cloud Build da GCP, com isso não conseguimos ter etapas paralelas dentro de um único trigger. Para isso vamos criar dois novos triggers, um para os testes unitários e outro para os testes integrados, dessa forma eles vão rodar de forma paralela e já irá causar uma redução considerável em nossa pipeline.

### Reduzindo o tempo de 15 minutos para 7 minutos.

É importante notar que não vamos conseguir paralelizar os testes E2E, por que eles dependem da etapa de deploy, que depende da etapa de build.

## Aprimorando os resultados

Uma forma de aprimorarmos o nosso resultado é melhorando o tempo de build, nesse projeto estávamos usando React com Webpack, com isso o tempo de build levava 3 minutos. Para solucionarmos isso, analisamos algumas ferramentas do mercado e optamos por usar o Vite. Você pode encontrar mais informações sobre o [Vite aqui](https://medium.com/r/?url=https%3A%2F%2Fvitejs.dev%2Fguide%2Fwhy.html).

Aplicando o Vite em nosso projeto, conseguimos obter esse resultado:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1st2bbs8gazxtrdefnv6.png)

## Referências

https://cloud.google.com/build?hl=en
https://vitejs.dev/guide/why.html