Nesta aula vamos cobrir um passo a passo das técnicas de melhoria de desempenho que uso ao criar aplicativos com react, vamos aprender a identificar gargalos, aplicar técnicas para dividir nosso código em pedaços menores, analisar a renderização de nossos componentes e aplicar técnicas de memoização para evitar re-renderizar componentes. Usaremos webworkers para liberar o processamento da thread principal tornando nosso aplicativo mais rápido e ágil. Ao final desta aula, você será capaz de aplicar esses conceitos para analisar e melhorar o desempenho de seus aplicativos.
Clone o repositório.
gh repo clone rocketseat-experts-club/React-performance-gargalos-bundlesize-render-2021-05-01 react-performancecd no diretório.
cd react-performanceInstale as dependências do projeto:
yarn install
# ou
npm installInicie o servidor de desenvolvimento:
yarn start
# ou
npm run startFinalmente, vá para localhost: 3000 no navegador de sua escolha e você está pronto para ir 🚀.
💡 Dica profissional use o branch final como guia de referência final, este branch contém o projeto final para que você possa acompanhar.
- React como uma linguagem de IU
- Prettier como formatador de código
- TailwindCss UI como nosso kit de ferramentas de design
- Cra-bundle-analyzer para analize do bundle
- Workerize-loader para a criação dos webworkers
O projeto segue um esqueleto regular create-react-app com pouquíssimas modificações.
Na pasta src, temos dois diretórios principais:
App.js: o lugar onde está a lógica principal para este workshopComponents /: componentes reutilizados nas páginasHooks /: que contem nossos hooks costumizaveis,Pages/: onde vamos ter as paginas referente as rotas da aplicãoUtils: que contem algums arquivos utilitarios para a aplicão
 |
|---|
| Vitor Alencar |
Projetado com ♥ por vitormalencar. Licenciado sob a Licença MIT.