Vite é uma ferramenta com o objetivo de criar um ambiente de desenvolvimento simples e super rápido. Fornece uma experiência de desenvolvimento enxuta para projetos modernos, e é composto por duas partes essenciais.
Um servidor de desenvolvimento que fornece recursos avançados, por exemplo, módulos ES nativos e Hot Module Replacement(HMR) extremamente rápido.
Segunda funcionalidade principal é a parte de compilação de código que agrupa todos os arquivos do projeto com Rollup.js, Vite é pre-configurado para gerar arquivos estáticos altamente otimizados para produção.
Quais as vantagens de se trabalhar com Vite
A ferramenta é opinativa e vem com padrões prontos das principais bibliotecas para uso, mas também permite alternativas extensíveis por meio de sua API de plugins como podemos ver com o plugin para PWAs.
Além disso, fornece código-fonte sobre o Módulos EcmaScript nativos. Isso basicamente permite que o navegador assuma parte do trabalho de um empacotador, por exemplo, Webpack. Assim reduzindo drasticamente o tempo de compilação no ambiente de desenvolvimento.
Vite só precisa transformar e servir o código-fonte sob demanda, conforme o navegador o solicita. O código por trás das importações dinâmicas condicionais só é processado se realmente usado na tela atual. Vite pré-empacotadas as dependências usando esbuild. O esbuild é escrito em Go e pré-empacota dependências 10 a 100 vezes mais rápido que os empacotadores baseados em JavaScript.
Ele também aproveita os cabeçalhos HTTP para acelerar os recarregamentos de página inteira (mais uma vez, deixe o navegador trabalhar mais para nós): as solicitações do módulo de código-fonte são condicionadas via 304 Not Modified, e as solicitações do módulo de dependência são fortemente armazenadas em cache via Cache-Control: max- age=31536000, imutável para que eles não atinjam o servidor novamente uma vez armazenados em cache.
Quais frameworks podemos trabalhar com Vite?
Vite possui pre-configurações para os principais frameworks do mercado, as opções estão disponíveis para JavaScript e TypeScript e estão disponíveis quando criamos um novo projeto.
As predefinições de modelo disponíveis são as seguintes:
| JavaScript | TypeScript |
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| preact | preact-ts |
| lit | lit-ts |
| svelte | svelte-ts |
Como criar um projeto?
Trabalha com a ferramenta requer o Node.js versão 14.18+, 16+. No entanto, alguns modelos requerem uma versão Node.js superior para funcionar. Uma vez que seu ambiente tem node com a última versão compatível, você está pronto para criar o seu primeiro projeto.
npm create vite@latestCode language: CSS (css)Uma vez que você roda o código acima no terminal é só seguir as instruções.
Mas claro também possível especificar diretamente o modelo a qual você deseja trabalhar, por meio de opções de linha de comando adicionais. Por exemplo, para estruturar um projeto Vite + Lit, execute:
npm create vite@latest my-lit-app --template litCode language: CSS (css)Consulte create-vite para obter mais detalhes sobre cada modelo suportado: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts.
Conclusão
Já tinha usa a ferramenta em pequenos projetos e economiza bastante o tempo de configuração e desenvolvimento com o tempo extra que nós ganhamos em cade teste do nosso código. Confira no blog mais posts relacionados sobre o assunto.
Deixe um comentário