React performance: identificando gargalos, reduzindo o bundlesize, e melhorando o render

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.

Primeiros passos 🏁

Clone o repositório.

gh repo clone rocketseat-experts-club/React-performance-gargalos-bundlesize-render-2021-05-01  react-performance

cd no diretório.

cd react-performance

Instale as dependências do projeto:

yarn install

# ou

npm install

Inicie o servidor de desenvolvimento:

yarn start

# ou

npm run start

Finalmente, 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.

Ferramentas 🧰

• 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

Estrutura do Projeto 🏗

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 workshop
• Components /: componentes reutilizados nas páginas
• Hooks /: que contem nossos hooks costumizaveis,
• Pages/ : onde vamos ter as paginas referente as rotas da aplicão
• Utils : que contem algums arquivos utilitarios para a aplicão

Expert

Vitor Alencar

Licença

Projetado com ♥ por vitormalencar. Licenciado sob a Licença MIT.