Vite.js - O build tool que vai facilitar a sua vida

#vite #javascript #tutorial

O que é ViteJS?

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, já começaria a desanimar um pouco né? Você 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, o tempo que você precisa configurar coisas até a hora que você efetivamente vai programar aumenta.

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

A 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-100 x 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 à 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.
Removi a feature de HTM transforms da lista pois não achei fontes para explicar sobre o que é

Features	Tem?
Templates pra diversos frameworks front-end	✅ Tem
Servidor de desenvolvimento com HMR	✅ Tem
Streaming imports	❌ Não tem
Build de produção pré-configurado	✅ Tem
Conversão automática pra PostCSS e preprocessadores	✅ Tem
Suporte pra plugins Rollup	✅ Tem
Tamanho em disco (Instalação Padrão)	18M

Pontos negativos

Os contras dessa nova ferramenta são três:

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 tem.

💡 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, pra esse exemplo vou usar o yarn como package manager.

Primeiro iniciamos um projeto com um template de React



yarn create @vitejs/app my-react-app --template react

Em seguida instalamos Sass:



yarn add 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:



yarn add -D vite react react-dom sass

Criar um arquivo .jsx



touch main.jsx

Pra fins de teste, vamos só criar um Hello World



import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

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, você pode encontrar a documentação em inglês 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.

Ficou com dúvidas, achou um erro, discorda de mim? Deixa ai no comentário, bora conversar?

Gostou do artigo? Compartilha com quem você acha que vai se beneficiar do conteúdo.

Qualquer coisa só dar um salve no meu twitter, @lixeletto.