Pensar na escalabilidade é importante antes de iniciar um projeto novo, durante o projeto não podemos ignorar a importância de ter um projeto performático, o vite irá nos ajudar nesses pontos.
Imagine o cenário que criamos o projeto utilizando o CRA padrão (Create React app), à medida que nosso projeto vai aumentando e temos mais componentes, páginas, hooks, etc, o javascript que lidamos também vai aumentando, isso causará um gargalo de desempenho: demora excessiva para instalar as dependências, rodar o aplicativo local e fazer o build do aplicativo. Poderemos esperar até minutos para finalizar os processos citados e com certeza isso irá impactar negativamente no projeto.
O vite não usa o webpack e sim o rollup (mais rápido) para gerar o build. E dentro do ambiente de desenvolvimento o vite usa o ES build, outra ferramenta mais performática com o conceito de módulo (import e export) nativo do navegador.
Vamos ver um comparativo da criação de um projeto React com CRA e Vite:
Com o CRA tivemos exatos 1 minuto para criar o projeto e instalar suas dependências.
O mesmo processo com o vite foi realizado em 10 segundos.
Mas essa não é sua principal vantagem em relação ao CRA, conforme o projeto for ficando maior essa distância de tempo vai aumentando entre os dois, enquanto o CRA poderá levar minutos para rodar ou buildar a aplicação, o vite levará segundos para realizar a mesma tarefa.
Agora um comparativo entre CRA e Vite durante o desenvolvimento:
Utilizando um bundler como webpack ou rollup, quando um módulo sofre uma alteração ele acaba compilando todos os módulos e assim gerando o bundle para vermos em tela as alterações no navegador.
Agora utilizando o ESM ao alterar um módulo ele faz o fluxo contrário e não compila os módulos que não foram utilizados, tornando o processo muito mais rápido e leve.
O vite está disponível em diversas bibliotecas:
Além do javascript podemos ter um template typescript do projeto, não precisamos mais fazer qualquer configuração manual do typescript, apenas começar a escrever os códigos.
Um ponto negativo que encontrei foi o fato de certas configurações terem de ser feitas manualmente, como a configuração do Jest, por exemplo. Mas, temos uma solução para isso, pois, existe um repositório no github que traz vários templates para projetos com setup pronto: https://github.com/vitejs/awesome-vite.
Recomendo sempre utilizar o vite, seja em pequenos ou grandes projetos.
Referências: https://vitejs.dev/guide/why.html