Não é segredo que tenho muito interesse em performance na web, tanto no front quanto no back end das aplicações. Estou revisitando lentamente alguns projetos antigos e os ajustando para modernizá-los implementando algumas técnicas de otimização que aprendi com o tempo.
Um desses projetos é a landing page do EGPM, que desenvolvi juntamente com meu amigo e colega de trabalho Lucas em 2019. Originalemnte desenvolvido em Vue 2 e recentemente atualizado para o Vue 3, senti que era o momento certo para migrá-lo do Vue CLI para o Vite - a nova ferramenta recomendada para criação de projetos Vue.
Para esse projeto, foi bem fácil escolher migrar para o Vite: a ferramenta tem tudo o que eu precisava e, em teoria, deveria ser extremamente rápida e eficiente. Você pode ler sobre as funcionalidades sensacionais do Vite como hot module replacement e otimizações no processo de building no site oficial do projeto (em inglês).
Com alguns ajustes aqui e ali, em menos de uma hora migrei o projeto. Os benefícios foram instantâneos para desenvolvimento e geração de build de produção.
Pra desenvolvimento, o servidor web local se iniciou consideravelemnte mais rápido e as mudanças nos componentes de UI se tornaram instantâneas. Nada de recarregar a página e esperar alguns segundos depois de alterar o código.
Falando de criação de build para produção, o processo foi consideravelmente mais rápido e a pasta dist ficou bem menor do que o de costume.
Iniciar servidor de desenvolvimento
Vue CLI: 3639ms
Vite: 504ms
Refletir alterações em componentes
Vue CLI: alguns segundos
Vite: instantâneo
Criar build de produção
Vue CLI: 19.19s
Vite: 5.83s
Tamanho dos assets de produção
Vue CLI: 3.7mb
Vite: 982kb
O Vite é agnóstico de framework e pode aproveitá-lo em basicamente qualquer projeto de front-end moderno — incluindo React. Não é uma bala de prata, mas eu recomendo fortemente ler a documentação do Vite para avaliar se o seu uso se encaixa nas necessidades do seu projeto.
