Você ainda usa CREATE-REACT-APP em 2023?
Se você ainda usa CRA para criar suas aplicações React, eu tenho uma alternativa que pode ser melhor!
E a alternativa é ninguém menos que:
O que é VITE?
VITE é uma ferramenta de construção que visa fornecer uma experiência de desenvolvimento mais rápida e enxuta para projetos web. É composto por duas partes principais:
- Um servidor de desenvolvimento que fornece aprimoramentos de recursos avançados em módulos ES nativos , por exemplo, Hot Module Replacement (HMR) extremamente rápido .
- Um comando de compilação que agrupa seu código com Rollup , pré-configurado para gerar ativos estáticos altamente otimizados para produção.
Você pode ler mais sobre ele aqui: https://vitejs.dev/guide/
Qual o problema que ele soluciona?
Antes de existir os ES Modules nos navegadores, nós desenvolvedores(as) não tínhamos mecanismos nativos para desenvolver códigos JS de forma modular. É por isso que estamos todos familiarizados com o conceito de “agregação”, usando ferramentas que rastreiam, processam e concatenam nossos módulos em arquivos que podem ser executados pelo navegador.
Ferramentas como webpack , Rollup e Parcel , que melhoraram muito a experiência de desenvolvimento 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 e o surgimento de ferramentas JavaScript escritas em linguagens de compile-to-native.
Dividindo primeiro os módulos em duas categorias: dependências e código-fonte.
- As dependências são principalmente JavaScript simples que não mudam com frequência durante o desenvolvimento. Algumas grandes dependências (por exemplo, bibliotecas de componentes com centenas de módulos) também são muito caras para processar. As dependências também podem ser enviadas em vários formatos de módulo (por exemplo, ESM ou CommonJS). Dependências pré-empacotadas do VITE usando esbuild. Esbuild dependências de pré-pacotes 10 a 100 vezes mais rápido do que os empacotadores baseados em JavaScript.
- O código-fonte geralmente contém JavaScript não simples que precisa ser transformado (por exemplo, componentes JSX, CSS) e será editado com muita frequência. Além disso, nem todo código-fonte precisa ser carregado ao mesmo tempo (por exemplo, com divisão de código baseada em rota).
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.
Isso significa essencialmente que não há tempo gasto em empacotar seu código antes que o servidor possa ser iniciado.
Como era feito com Webpack:
Como é feito no VITE:
Então vamos criar uma aplicação simples utilizando o VITE?
Para esse post estamos usando React como exemplo, mas o VITE tem suporte para vários outros frameworks e libs:
Compatibilidade: VITE requer a versão do Node.js >=12.2.0.
Para iniciar vamos criar o nosso projeto utilizando a CLI do VITE rodando o comando:
Com NPM:
$ npm create vite@latest nome_do_projeto --template react-tsCom Yarn:
$ yarn create vite nome_do_projeto --template react-ts
E em questões de segundos, nosso projeto foi criado!
Com uma estrutura de arquivos super simples
Agora vamos rodar a nossa aplicação com o comando:
$ yarn dev
E pronto, já temos nosso projeto em VITE iniciado, simples né?!
Agora você pode fazer as instalações das suas libs, e aproveitar a velocidade que o VITE proporciona!
Subi o projeto nesse repositório do GitHub.
Referências para o POST:
Documentação do VITE, Post do Gaurav Beher sobre VITE
Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe ai nos comentários 💬
Se gostou, dê 1 ou 50 claps 👏
Obrigado pela leitura!
Me acompanhe por ai! 😜
- Portfólio: vinniciusgomes.dev
- GitHub: @vinniciusgomes
- LinkedIn: @vinniciusgomes
