Desenho do meu rosto em formato cartoon.
tech lead @ Getrak
desenvolvimento de software, tecnologia, games e coisas LGBT

In english: Vite is awesome.

O Vite é incrível

25/07/2022

Imagem ilustrativa do post.

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.

Continue lendo...

<< Corrigindo o problema das IDEs Jetbrains não listando PRs do Github

Corrigindo as prévias do OpenGraph ao compartilhar links no LinkedIn >>