Antes que os módulos ES estivessem disponíveis nos navegadores, os desenvolvedores não tinham mecanismos nativos para codificar JavaScript de forma modularizada. É por isso que estamos todos familiarizados com o conceito de "bundling": usar ferramentas que rastreiam, processam e concatenam nossos módulos de origem em arquivos que podem ser executados no navegador.

Ao longo do tempo vimos ferramentas como webpack, Rollup e Parcel, que melhoraram muito a experiência de desenvolvimento para desenvolvedores frontend.

No entanto, à medida que começamos a construir aplicativos cada vez mais ambiciosos, a quantidade de JavaScript com que estamos lidando também aumentou exponencialmente. Não é incomum que projetos de grande escala contenham milhares de módulos. Estamos começando a atingir um gargalo de desempenho para ferramentas baseadas em JavaScript: muitas vezes pode levar uma espera excessivamente longa (às vezes até minutos!) no navegador. O ciclo de feedback lento pode afetar muito a produtividade e a felicidade dos desenvolvedores.

O Vite visa resolver esses problemas aproveitando novos avanços no ecossistema: a disponibilidade de módulos ES nativos no navegador e o surgimento de ferramentas JavaScript escritas em linguagens de compilação para nativas.

O Vite fornece código-fonte sobre o ESM nativo. Isso basicamente permite que o navegador assuma parte do trabalho de um empacotador: o 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.

O ViteJS faz tudo que o Babel faz ajuda no processo de criação do bundle do projeto.

Instalando o ViteJS

Considerando que você possui o NodeJS na versão mais atualizada execute os seguintes comandos abaixo para instalar o ViteJS:

npm create [email protected]

Depois de instalado execute o comando Yarn ou NPM i para instalar as dependências dos projeto, conforme o screenshot abaixo

Criando o primeiro projeto com o ViteJS

Com o ViteJs você pode criar projetos com Javascript Vanilla, React, React+TS,
Svelt, Vue entre outros. Para nosso exemplo vamos optar pela opção de React+TS.

Para criar o projeto abra o terminal e execute o comando:

yarn create [email protected]

Depois de criado o projeto você deve executar o comando Yarn ou NPM I para instalar todas as dependências de desenvolvimento.

Referências:

- Site do projeto
https://vitejs.dev

- Documentação
https://vitejs.dev/guide/