Processo de build da aplicação React
O processo de build em um projeto React criado com a Ferramenta create-react-app é uma etapa crucial para transformar o código-fonte legível e de fácil desenvolvimento em algo otimizado para produção, com arquivos comprimidos e prontos para serem servidos em um ambiente de produção. O comando responsável por acionar esse processo é
$ npm run buildAo executar o comando npm run build, o create-react-app inicia uma sequência de processos automatizados que transformam os arquivos do projeto em uma versão otimizada para produção. Isso inclui a Minificação de código, remoção de comentários, eliminação de código não utilizado e a criação de arquivos estáticos prontos para serem distribuídos.
Duas ferramentas fundamentais para que esse processo aconteça são
Babel
- Durante o processo de build, o Babel é utilizado para transpilar o código React escrito em JSX para JavaScript puro o qual o navegador possa interpretar.
- Além disso, o Babel pode ser configurado para realizar outras transformações necessárias para otimização e compatibilidade.
Webpack
- O Webpack é usado para agrupar e empacotar todos os recursos do projeto, incluindo JavaScript, CSS, imagens e outros ativos.
- Ele também realiza a minificação e a criação de bundles separados para otimizar o carregamento da aplicação no navegador.
- O Webpack facilita o uso de módulos, permitindo uma estrutura modular no código-fonte.
Após executar todos esses processos, o React cria um diretório chamado build onde é armazenado o código otimizado para produção a partir dele é possível implantar o site em qualquer serviço de hospedagem.