Sobre o Vite.js
O build tool que vai vitaminar sua experiência de desenvolvimento
Vamos supor que você esteja começando um projeto de HTML, CSS e Javascript e queira dar uma apimentada instalando um processador de CSS como Sass ou Less. Você já começaria a desanimar um pouco, né? Teria que escolher um bundler¹ como Webpack ou Parcel, talvez uma automatização com Gulp. Com todas essas opções e configurações, além do seu projeto aumentar em tamanho e dependências, também aumenta o tempo que você precisa para configurar coisas até a hora que você efetivamente vai programar.
O Vite (pronuncia-se /vit/ em francês, significa rápido) surgiu levando essas dores em conta, sendo um bundler e um dev-server que você consegue usar compiladores e frameworks direto da caixa, com zero configuração.
💡 Bundlers¹ combinam os diferentes módulos da sua aplicação em um arquivo que você consiga usar em ambiente de produção. Antes da chegada dos JS Modules para os browsers, você só conseguia trabalhar com arquivos contendo módulos importados (ex: import React from ‘react’ com a ajuda de um bundler como Webpack ou Parcel)
Características principais
Rapidez
Quando você inicia um projeto em Vite a primeira coisa que ele faz é dividir seu código em duas partes: código fonte e dependências. As dependências geralmente são arquivos de Javascript que não sofrerão alterações, então elas são pré-compiladas usando o ESBuild, que é escrito em Go e é de 10–100x mais rápido do que bundlers feitos com Javascript.
Já o código fonte, que geralmente vai ser um código que vai precisar sofrer alguma alteração (JSX, Typescript, etc) são servidos como módulos javascript nativos, deixando que o browser auxilie no trabalho do bundler. Quando você faz uma alteração em um arquivo, o browser faz a requisição apenas dele, tornando muito mais rápidas as operações de Hot Module Replacement².
💡 Hot Module Replacement ² ou HMR é uma tecnologia que permite que suas mudanças em ambiente de desenvolvimento reflitam no navegador em tempo real.
Com essas features e o cacheamento de dependências que o Vite faz por padrão, após o primeiro build da aplicação em desenvolvimento, todos os builds subsequentes não levam mais do que 300ms.
Experiência de desenvolvimento
Isso significa que, por exemplo, você pode criar um projeto de HTML, Sass e Typescript, incluir seu arquivo .ts direto em uma tag <script type=”module”> e ele será compilado pelo ESBuild de 20 a 30 vezes mais rápido que o TSC e atualizado no front com uma latência de 230 a 300ms, independente do tamanho do projeto.
Isso resolve o problema de bundlers como Webpack, que pelo fato de terem que recompilar toda a aplicação pra fazer o build e seu HMR ainda não utiliza ESModules, conforme a aplicação vai crescendo, o tempo de build e atualização em tempo real vão ficando cada vez maiores.
Build e Produção
O build tool do Vite é construído em cima do Rollup, pois o suporte do ESBuild pra code-splitting e CSS ainda é bem fraco, mas há planos para a migração total. O build ja é pré-configurado com minificação, tree shaking (remove dependências não utilizadas), code-splitting e carregamento assíncrono e pré-optimizado de módulos.
Por último, o Vite é agnóstico de plataformas e frameworks, podendo ser usado com a maioria dos frameworks modernos conhecidos, tanto a partir de um projeto Vite como utilizando a sua API de Javascript.
Em relação a outros toolings de front-end, Vite possui a grande maioria das características. Os frameworks usados na comparação foram ESbuild, Snowpack e WMR, o artigo mais completo do comparativo pode ser encontrado no site CSS Tricks, em inglês.
Pontos negativos
São três os contras dessa nova ferramenta:
- O Vite até o presente momento ainda possui alguns bugs, então deve ser usado em produção por sua conta e risco.
- O suporte ‘direto da caixa’ conta que você esteja escrevendo Javascript moderno, não oferecendo suporte legado pra IE por padrão.
- Vite ainda não possui um bom suporte SSR (Server Side Rendering), ainda é mais recomendado usar meta-frameworks como Next ou Nuxt até um release mais estável.
- Não tem suporte pra streaming imports³ como Snowpack e WMR.
💡 Streaming Imports³ é a capacidade de importar pacotes ou livrarias sem o npm | yarn install , essas dependências requisitadas diretamente de onde elas estão hospedadas e incorporadas no processo de build. Mais detalhes no site do Snowpack, em inglês.
Como começar a usar?
Vamos supor que você queira iniciar um projeto usando React e Sass. Para esse exemplo, vou usar o yarn como package manager. Primeiro iniciamos um projeto com um template de React:
Em seguida instalamos Sass:
E bem… é isso, você pode usar todas as features que usaria com create-react-app, só que MUITO mais rápido.
Outro jeito de fazer seria apenas instalar Vite, Sass e React:
Criar um arquivo .jsx
Pra fins de teste, vamos só criar um Hello World
E pronto, uma aplicação React direto da caixa!
Se quiser saber mais sobre Vite, a documentação é ótima e tem um bom passo-a-passo pra usuários iniciantes. A documentação em inglês está aqui.
Boa parte do material sobre Vite que escrevi veio desse episódio de Open Source Friday. do canal do Github com bDougie (Brian Douglas) com Evan You, criador do Vite e do Vue.js. Pra ficar a par das informações e novidades do Vite.js, sigam eles no Twitter.
E se você tiver alguma dúvida ou tem algo a dizer, é só aproveitar os campos de comentários. Quer fazer parte de um time que está sempre atualizado e buscando aprender junto? Clique aqui e se candidate a uma de nossas vagas. Até a próxima!
