Como é comum entre todos programadores do ecossistema JavaScript com foco no front-end, uma hora ou outra teremos que nos deparar com libs que facilitam nosso processo na hora de escrever código.
Hoje venho falar sobre a lib que mais utilizo atualmente, o React, mas mais especificamente sobre como é dado o processo de criação de um react app.
Atualmente tem duas formas de criar uma aplicação em react que eu mais utilizo, o famos Create React App, desenvolvido pelo Facebook que cria para nós um boilerplate pronto para colocarmos a mão na massa e codar. A segunda opção que eu utilizo para criação de um react app é o Vite, que também tem a mesma função do CRA.
Aqui quero apresentar algumas das diferenças entre esses dois tipos de criadores de boilerplate, mas antes, vamos a como criar cada um dos tipos de projeto.
Instalação:
Create React App
npx create-react-app my-app
Vite
npm create vite@latest my-app -- --template react
Diferenças:
- No processo de criação e instalação de dependências:
O Vite em comparação ao CRA cria e instala todas dependências necessárias para uso em questão de segundos, tendo uma grande diferença em relação ao CRA, que demora certa de 1~2 minutos.
- Ao iniciar a aplicação:
Enquanto o Vite inicia sua aplicação em menos de 1 segundo, o CRA costuma demorar de 3~15 para executar a mesma ação.
- No tamanho da pasta do projeto (peso em memória):
Abaixo segue a comparação entre os dois.
Equanto o CRA ocupa 233.4 MB, o Vite ocupa 32.1MB.
- Server Side Rendering:
O Vite ainda não possui um bom suporte mais estável ao SSR, o CRA possui.
Conclusão
Depois de muita comparação entre os dois métodos de criar uma aplicação react, pela velocidade nos processos, pelo tamanho de uma pasta base e outros fatores, atualmente eu prefiro utilizar o Vite em detrimento do CRA. Porém, isso de forma alguma quer dizer que o Vite é melhor, é apenas a minha opinião com base na experiência que tive utilizando os dois.
Espero que tenham gostado, esse é meu primeiro post na comunidade. Abraço e até a próxima.
Top comments (0)