Lentidão ao rodar o Vite dentro de container Docker em Mac Antigo
Tags: macboo, docker, node, vite
Published: 2023-09-07 11:33:17

Olá rede, tudo bem com vocês?

Recentemente escrevi um post sobre como ganhar desempenho em sua maquina de desenvolvimento MacOS com Docker.

Recapitulando, meu setup é um pouco mais antigo, então essa é a principal causa do problema.

> Meu setup: MacBook Pro 2017 (i5, 8Gb Ram, 120Gb SSD)
Tive a oportunidade de rodar esse mesmo projeto em um Macbook M2 Pro de um amigo e não tive nenhum desses problemas de desempenho, ou seja, o problema é o meu hardware mesmo.

Após muitas, muitas, muitas e muitas pesquisas, consegui chegar a uma solução. Mas primeiramente vamos tomar conhecimento do problema, para só então ir para a solução.

### O Problema
Tenho uma aplicação de finanças [demo aqui](http://my-finances-planner-demo.jhon.dev.br/login), onde rodo em máquina local com Docker, utilizo Laravel no back end e Vue.js gerenciado pelo Vite no front end. Para desenvolver nessa aplicação, temos o ritual básico:

- docker-compose start
- docker exec -it my_finances_planner_app bash
- npm run dev

Após esses passos tenho meu container iniciado, e o rot reload funcionando. Porém, ao rodar essa última etapa o desempenho da aplicação e da minha maquina despencava. Vamos aos números.

Rodando o npm run dev (Hot reload ativo):

- ~3 segundos para trazer um registro da API via Insomnia;
- ~24 segundos para o primeiro carregamento da aplicação;
- ~12 segundos para os demais recarregamentos (F5 ou Ctrl+R);
- ~5 segundos para aplicar alterações via hot reload;
- ~20% CPU ociosa.

Sem rodar o npm run dev (projeto com o front compilado):

- ~700ms para trazer um registro da API via Insomnia;
- ~10 segundos para o primeiro carregamento da aplicação;
- ~5 segundos para os demais recarregamentos (F5 ou Ctrl+R);
- ~2 segundos para aplicar alterações via hot reload;
- ~80% CPU ociosa.

Bem lento né? fica praticamente inviável desenvolver assim, e mais inviável ainda ficar compilando o projeto a cada alteração, concorda?

### O motivo
O código alterado se encontra fora do Docker, ou seja, cada alteração feita vai primeiramente refletir-se dentro do container, que por sua vez reflete na maquina virtual Linux que o Docker usa no MacOs, o Vite fica trabalhando dentro do container observando as alterações, assim que ele detectar a alteração, vai refletir no navegador.

![Motivo lentidão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dltn6banpyk71s6gqeir.png)

Como o Docker utiliza uma VM Linux, o desempenho dessa VM é bem menor que o da maquina real, e todas essas etapa demandam tempo e recurso.

Como o meu hardware é um pouco mais antigo, isso acaba demandando muito recurso.

### A Solução

Como a máquina local é mais rápida que a VM Linux, e a maquina local suporta o Node (Necessário para rodar o build e o hot reload), cheguei a conclusão de encurtar esse processo descrito acima.

No caso eu instalei o Node localmente, rodo o hot reload (npm run dev) no terminal local. Dessa forma, o hot reload roda na máquina mais rápida (Mac, a maquina de desenvolvimento) sem precisar de toda a virtualização do Linux e consegue fazer o seu serviço bem mais rápido.

![Solução Lentidão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixpj7zi7p4blbm6t2r71.png)

Neste caso o hot reload observa o código local, e não o refletido dentro da VM Linux. Sendo assim, muito mais rápido.

O Resultado em números foi muito próximo aos apresentados acima sem rodar o npm run dev, só que a diferença é que agora tenho o mesmo resultado rodando o npm run dev.

### Finalizando...
Alguns podem dizer que essa não é a forma certa, pois estou rodando o node fora do container. Pode até não ser, mas funciona, e melhor, com desempenho bem maior que anteriormente e para quem não tem como comprar um Mac de última geração, é uma ótima alternativa.

Por hoje é só pessoal, nos vemos em breve!