Como reduzir o tempo de carregamento do aplicativo React em 70%
Etapas para diminuir o tempo de carregamento inicial do aplicativo React usando a divisão de código.
Se você apoia esse conteúdo por favor siga o autor original e leia o conteúdo original:
https://javascript.plainenglish.io/speed-up-your-react-app-initial-load-using-code-splitting-f2de58c01ed2
Foto de NordWood Themes no Unsplash
Construímos aplicativos em grande escala usando React . Ao construir esses aplicativos, o principal problema que enfrentamos é o desempenho do aplicativo. Quando o aplicativo fica cada vez maior, o desempenho pode piorar. Particularmente, o tempo de carregamento inicial do aplicativo será mais afetado. O carregamento inicial do aplicativo precisa ser rápido, sem mostrar uma tela em branco por alguns segundos para o usuário. Como leva mais tempo para carregar, isso criará uma má impressão para o usuário.
A principal causa desse problema é adicionar muitos componentes em um único arquivo de pacote, portanto, o carregamento desse arquivo de pacote pode demorar mais. Para evitar esse tipo de problema, precisamos estruturar nossos componentes de forma otimizada. Para resolver isso, o próprio reage tem uma solução nativa, que é divisão de código e carregamento lento. O que permite dividir os arquivos do pacote em um tamanho menor.
O melhor lugar para introduzir a divisão de código é nas rotas. A divisão de código baseada em rota resolve metade dos problemas. Mas a maioria dos aplicativos está utilizando apenas 50% das vantagens da divisão de código.
Estamos estruturando os componentes corretamente ao usar a divisão de código? Podemos ver por que e como corrigi-lo usando alguns exemplos de código. Para isso, usaremos um aplicativo React de amostra com alguns componentes de IU.
Na captura de tela abaixo, podemos ver um componente do painel, que possui várias guias. Cada guia possui vários componentes.
O componente Dashboard usa divisão de código baseada em rota como o código abaixo.
O componente Dashboard contém alguns subcomponentes como Vendas, Lucro, Gráfico, Ladrilhos e Tendências como o código abaixo
Dividimos o código em rotas. então, quando o aplicativo é empacotado, obtemos um arquivo de compilação separado para cada rota, conforme abaixo
Na imagem acima, o arquivo com tamanho 405,1 KB é o componente do painel e os outros arquivos são para o cabeçalho, barra lateral, outros componentes e CSS.
Hospedei o aplicativo no Netlify para testar o desempenho. Como se testássemos o aplicativo localmente, não conseguiríamos encontrar a diferença. Quando testei o aplicativo hospedado com GTmetrix , a tela do painel levou 2,9 segundos para carregar. Verifique a imagem abaixo para carregamento quadro a quadro.
O componente do painel é a página inicial deste aplicativo, portanto, quando atingirmos a URL do aplicativo, o arquivo de 405,1 KB será carregado junto com o cabeçalho e a barra lateral.
Inicialmente, o usuário visualizará apenas a guia Vendas , mas nosso componente de painel do aplicativo de amostra possui várias guias. O navegador está baixando o código de outras guias também, por isso está atrasando a primeira pintura para o usuário. Para diminuir o tempo de carregamento inicial, precisamos fazer algumas alterações no componente do painel conforme abaixo
Aqui, importei cada componente da guia com carregamento lento e envolvi o componente com suspense. Aqui eu adicionei vários suspense para melhor compreensão, mas você pode usar um único suspense para todos os componentes.
Não fiz nenhuma alteração na divisão de código de nível de rota. Quando construímos o aplicativo, alguns arquivos extras são adicionados à medida que carregamos lentamente cada guia no componente do painel. Verifique a imagem abaixo para separação de arquivos de compilação.
Criar registros
Agora vamos testar o aplicativo com GTmetrix novamente com as alterações acima. Veja o desempenho do aplicativo na imagem abaixo
Como você pode ver, agora nosso componente do painel é carregado em 1 segundo . Como o código da guia Vendas só foi carregado agora. Reduzimos quase 2 segundos fazendo algumas alterações. Vamos ver a comparação de divisão de código baseada em rota e rota baseada em componente nas imagens abaixo.
Divisão de código baseada em rota
Rota e divisão de código baseada em componente
Como você pode ver, essa é uma grande melhoria na carga inicial do aplicativo. Agora, reduzimos o tempo de carregamento inicial do aplicativo React em 70% com alguns ajustes, usando a divisão de código de forma eficaz no componente do painel.
Referência
Conclusão
Estruturar componentes de maneira otimizada e usar APIs React de maneira eficaz aumentará o desempenho de aplicativos em grande escala.
Obrigado por ler.
