Você ainda usa create-react-app para configurar seu projeto React? Mude para o Vite para obter melhor desempenho e velocidade de desenvolvimento mais rápida.

Ao iniciar um novo projeto React, muitos desenvolvedores recorrem a criar-reagir-aplicativo como sua ferramenta de comando para instalação e configuração de projetos. No entanto, Vite é uma alternativa melhor. Oferece tempos de desenvolvimento mais rápidos e melhor desempenho.

O que é Vite?

Vite é uma ferramenta de construção e servidor de desenvolvimento projetado para melhorar o processo de desenvolvimento de aplicações web modernas. Ele faz isso dividindo os módulos do aplicativo em dependências e código-fonte. As dependências são módulos que não mudam com frequência, enquanto o código-fonte é normalmente editado com frequência durante o desenvolvimento.

Vite usa construir, um bundler baseado em Go que é significativamente mais rápido do que os bundlers tradicionais baseados em JavaScript para acelerar o processo de construção do código-fonte. Ele também pré-empacota as dependências do seu aplicativo e fornece o código-fonte sobre o ESM nativo, permitindo que os navegadores otimizem o carregamento de módulos para uma aplicação mais eficiente e rápida desempenho. Quando chega a hora de implantar seu aplicativo para produção, o Vite possui um comando de compilação integrado que otimiza automaticamente seu aplicativo para implantação, garantindo que seu aplicativo seja executado sem problemas.

instagram viewer

Criando um Projeto Vite

Antes de criar um projeto Vite, observe que o Vite requer Node.js versão 14.18+ ou 16+. Você pode consultar esses artigos para instalar o Node em sua máquina Windows ou Ubuntu.

  • Como instalar Node.js no Windows.
  • Aprender como instalar Npm e Node.js no Ubuntu

Crie um projeto Vite executando este comando no terminal.

npm criar vite@latest

Assim que o comando começar a ser executado, você será solicitado a fornecer um nome de projeto. Digite o nome do seu projeto e clique em Enter.

Em seguida, o Vite solicitará que você selecione uma estrutura. Selecione Reagir.

O Vite também solicitará que você selecione uma variante. Selecione JavaScript.

Quando o Vite concluir o scaffolding do projeto, navegue pelo diretório criado e instale as dependências via npm.

npm instalar

Para executar o projeto, use este comando:

npm run dev

Esta deve ser a página inicial.

Você pode começar a editar seu projeto e suas alterações serão refletidas no navegador.

Use o Vite para velocidade de desenvolvimento rápida

CRA (create-react-app) geralmente é a ferramenta padrão para definir a estrutura do projeto e a configuração de um aplicativo React. É conveniente porque tudo está configurado para você, mas pode ser lento para construir e recarregar durante o desenvolvimento.

O Vite, por outro lado, usa módulos ES nativos no navegador para fornecer tempos de compilação mais rápidos. Se você não quiser usar o Vite, pode optar por um metaframework do React como o Next.js, pois ele também foi projetado para ter alto desempenho.