Cliente e contexto
Uma plataforma de marketplace em crescimento tinha um backend em Laravel com um front-end baseado em Vue. Com o tempo, o desempenho e a manutenibilidade degradaram-se:
- A arquitetura inicial e as dependências tinham vários anos.
- As builds do front-end tornaram-se enormes e lentas.
- Os tempos de carregamento das páginas eram fracos e o SEO estava a sofrer.
O cliente queria continuar a adicionar funcionalidades, mas a plataforma precisava de uma atualização técnica séria.
Desafios
- Front-end lento: o carregamento completo da página demorava cerca de 6,5 segundos, afetando a experiência do utilizador e as conversões.
- Bundle sobredimensionado: o bundle de JavaScript tinha crescido para cerca de 1,6 GB, com um tempo de build longo e muitas dependências desatualizadas.
- Stack legacy: o projeto estava preso em Vue 2 com uma toolchain baseada em Webpack.
- Background jobs pesados: alguns jobs de base de dados agendados estavam a demorar minutos a concluir.
- Segurança e manutenção: as vulnerabilidades de dependências npm acumularam-se ao longo do tempo.
O que fiz
1. Migração de Vue 2 → Vue 3 e modernização do pipeline de build
- Planeei e implementei uma migração incremental de Vue 2 para Vue 3, mantendo a aplicação funcional durante todo o processo.
- Substituí a build antiga baseada em Webpack por uma toolchain moderna baseada em esbuild.
- Removi dependências não utilizadas e dividi bundles quando apropriado.
Impacto:
- O tamanho do bundle foi reduzido de ~1,6 GB para ~300 MB.
- O tempo de build melhorou aproximadamente 3×.
- O número de vulnerabilidades npm desceu para zero após a atualização e limpeza das dependências.
2. Melhorias de performance e PageSpeed
- Fiz profiling do front-end e do backend para identificar os principais bottlenecks que afetavam os tempos de carregamento.
- Otimizei critical rendering paths, reduzi pedidos desnecessários e melhorei o caching.
- Resolvi CLS (Cumulative Layout Shift) e outros problemas de Web Vitals.
- Corrigi problemas de SSR (server-side rendering) que estavam a prejudicar o SEO e a performance do render inicial.
Impacto:
- O tempo de carregamento completo da página melhorou de ~6,5 segundos para cerca de 1 segundo nas vistas principais.
- As pontuações de PageSpeed aumentaram substancialmente, melhorando tanto o SEO como a experiência do utilizador.
3. Otimização do backend e da base de dados
- Analisei jobs SQL pesados e tarefas agendadas de longa duração.
- Reescrevi queries, adicionei índices e melhorei o desenho dos jobs para reduzir carga e contenção.
Impacto:
- Alguns jobs passaram de correr durante minutos para concluírem em segundos, libertando recursos e reduzindo o risco operacional.
4. Trabalho de funcionalidades: pagamentos, auth, streaming
Enquanto melhorava a performance, também implementei e estendi funcionalidades-chave do marketplace:
- Configuração e integração de Stripe Connect para pagamentos multi-parte.
- Social logins e melhorias de autenticação.
- Funcionalidades relacionadas com interações live/streaming (chat/comunicação) na plataforma.
Isto garantiu que a modernização técnica não foi apenas um exercício interno de refactoring, mas também entregou valor de produto visível.
Resultados
- O marketplace tornou-se significativamente mais rápido e mais agradável de utilizar.
- O stack de front-end foi trazido para um estado moderno e manutenível com Vue 3 e um pipeline de build eficiente.
- O risco de segurança e manutenção devido a dependências desatualizadas e vulnerabilidades foi drasticamente reduzido.
- A equipa pôde avançar com novas funcionalidades sobre uma base técnica sólida, em vez de estar a lutar contra a plataforma.
Tecnologias e responsabilidades
- Função: Senior full-stack engineer / responsável pela modernização
- Tecnologias: Laravel, Vue 2→3, esbuild, npm, SQL, Stripe Connect, SSR, Web Vitals, background jobs
- Âmbito: Arquitetura, implementação hands-on, afinação de performance, refactoring, desenvolvimento de funcionalidades e orientação técnica
Se o seu produto Laravel/Vue/React é lento, frágil e difícil de evoluir, posso ajudá-lo a modernizá-lo passo a passo, continuando a entregar novas funcionalidades.
Voltar a todos os estudos de caso
