Quase 60% dos visitantes do site o deixam se demorar mais de 3 segundos para carregar. 80% desses visitantes não estão mais retornando ao site. Isso sugere que o sucesso de um projeto da web não depende menos de sua velocidade. O autor do material, cuja tradução estamos publicando hoje, quer falar sobre técnicas para melhorar o desempenho dos aplicativos React.
Resultados de otimização de aplicativosBenchmarks
Antes de falar sobre como acelerei o aplicativo, quero mostrar alguns números. Aqui, as medições são realizadas na expectativa de que elas funcionem com o aplicativo usando uma conexão bastante lenta para os padrões modernos. Mas deve-se notar que, na realidade, a maioria dos usuários terá conexões mais rápidas.
- Durante as medições feitas na guia Rede das ferramentas de desenvolvedor do Chrome, a taxa de transferência de dados foi limitada à força ao nível de uma conexão 3G rápida.
- Primeira métrica de carregamento obtida com o cache desativado.
- O indicador 2nd Load indica a hora de recarregar o aplicativo quando o cache está ativado.
Como você pode ver, a diferença entre um aplicativo otimizado e não otimizado é bastante grande. Isso é especialmente visível em redes lentas.
O tamanho do pacote de aplicativos foi examinado usando o source-map-explorer. Essa ferramenta também permite saber quanto espaço várias bibliotecas ocupam. Os indicadores que podem ser vistos na parte superior da figura são medidos usando o Google Lighthouse.
Agora vou falar sobre como otimizei o aplicativo.
1. Usando CSS em vez de CSS-JS
Na versão antiga do aplicativo, usei a biblioteca de componentes com estilo. Por que isso é ruim? O problema é que o CSS simples é mais rápido e ocupa menos espaço. Navegadores modernos podem carregar o código CSS em paralelo com o pacote JavaScript. Além disso, você não precisa de uma biblioteca extra para usar CSS regular. A versão reduzida dos componentes com estilo leva cerca de 54 Kb. O uso de CSS comum em vez de componentes estilizados levou ao fato de o código do aplicativo ser carregado mais rapidamente e ao mudar os estilos, o sistema precisa executar menos computação.
Apenas abandonar a biblioteca de componentes com estilo e mudar para CSS comum pode reduzir o tempo de carregamento do site em cerca de 0,3 segundosSe o CSS permitir um melhor desempenho do que as tecnologias que implementam CSS-in-JS, você pode se perguntar por que os desenvolvedores usam essa tecnologia de estilo de componente. Entre os motivos para escolher CSS-in-JS, está o fato de que essa tecnologia permite limitar o escopo de estilos e abandonar o estilo global. É conveniente usar para trabalhar com temas de aplicativos. E talvez alguém goste de estilizar os aplicativos React dessa maneira.
▍ Estilos com escopo limitado
O Create-react-app agora suporta oficialmente
módulos CSS com um escopo limitado. Isso significa que você pode limitar o escopo dos estilos sem usar bibliotecas adicionais.
▍ Temas
Se você trabalha com a biblioteca de componentes com estilo, para usar as variáveis que definem os temas, basta
ThemeProvider essas variáveis no
ThemeProvider . Tudo isso é bom, mas em maio de 2019, 91% dos navegadores suportam um recurso CSS padrão semelhante.
Se você acha que 91% não é um indicador suficientemente bom, considere que pode não ser tão pequeno.
Suporte a variáveis CSSNa verdade, se você não estiver interessado no suporte ao IE, poderá usar com segurança
variáveis de CSS em seus projetos. Se você está interessado neste tópico, recomendo dar uma olhada
neste material.
2. Evitando grandes bibliotecas CSS
Análise de pacotes material-uiEu sou um grande fã de Design de Materiais. Uma ótima biblioteca de materiais chamada material-ui foi escrita para o React. Esta biblioteca tem apenas um problema. Esse é o tamanho dela. Ela é muito boa. Mesmo se você usar apenas seus componentes individuais, sua implementação do mecanismo CSS-in-JS entrará no pacote, e isso representa aproximadamente 30 Kb de código minificado.
Quais são as alternativas? Decidi construir meus próprios componentes, modelando-os no processo de criação do aplicativo. Uma das razões para essa escolha foi que eu queria atualizar meu conhecimento de CSS. E não escrevo código CSS há muito tempo. No entanto, existem outras possibilidades. Em particular, estamos falando de estruturas CSS, cujos tamanhos são muito menores que o tamanho da interface do usuário do material-ui. Por exemplo, são Spectre e Bulma, cujo código leva, respectivamente, 9 e 40 Kb após a compactação GZIP.
Spectre - 9 Kb após a compressão GZIPBulma - 40 Kb após a compressão GZIP3. Carregamento lento de páginas
Então, você tem um roteador com muitas páginas importadas. Se estamos falando de algumas páginas - não há problemas aqui. Porém, à medida que o número de páginas aumenta, aumenta também o tempo em que o site é exibido. Aqui está a aparência dos comandos de importação:
import NotFound from "pages/NotFound"; import Projects from "pages/Projects"; import Project from "pages/Project";
Como melhorá-lo? Felizmente para nós, o React pode organizar o carregamento lento da página. O mesmo se aplica ao código do componente, que pode ser dividido em pequenos fragmentos, carregados quando necessário. Aqui está o que parece:
import React, { lazy, Suspense } from "react"; const load = (Component: any) => (props: any) => ( <Suspense fallback={<Loader />}> <Component {...props} /> </Suspense> ); const NotFound = load(lazy(() => import("pages/NotFound"))); const Projects = load(lazy(() => import("pages/Projects"))); const Project = load(lazy(() => import("pages/Project")));
4. Tecnologias progressivas de aplicativos da Web
Aplicativos da web progressivos usam trabalhadores de serviço. Eles permitem que os usuários adicionem aplicativos às telas iniciais de seus dispositivos. Mas isso não se limita às opções do trabalhador de serviço. Em particular, eles são capazes de melhorar significativamente o cache. Isso leva ao fato de que o aplicativo, após o primeiro download, será carregado muito mais rapidamente.
5. Livrar-se de pacotes que parecem interessantes, mas não trazem muitos benefícios
No meu projeto original, quando montei os componentes, usei muitas animações que animavam o carregamento da página. Tudo isso não apenas diminuiu a velocidade da página. Isso a fez muito mais lenta do que ela poderia ser. Eu, olhando o site, e me regozijando com a aparência fofa, até um certo ponto não pensar em desempenho. Mas o site não era apenas animado. Havia outras decorações semelhantes. Por exemplo, um botão que permite ir para o topo da página. Por exemplo - carregamento animado de alguns elementos. Gostei de tudo isso, mas, após uma inspeção mais detalhada, verificou-se que, por exemplo, o site realmente diminui a velocidade dos dispositivos não mais rápidos. Além disso, no começo testei o site exclusivamente em um laptop, então não o aprendi imediatamente.
Eu também tinha um componente deslizante, que adicionei à página sem pensar muito em seu "peso". Eu usei para uma apresentação de slides. Como se viu mais tarde, apenas o código desse controle deslizante ocupava, de forma minificada, 30 Kb. Decidi criar um componente para uma apresentação de slides por conta própria. Seu código compactado, no final, ocupava 25 KB. Este volume incluiu uma boa biblioteca de animação e um sistema para trabalhar com gestos que podem ser usados não apenas para apresentações de slides, mas também em outras partes do aplicativo. E parece que o que fiz foi muito melhor do que uma solução de terceiros.
Aqui está um controle deslizante do NPM.
Controle deslizante NPMAqui está o meu controle deslizante
Controle deslizante autodesenvolvido (na vida funciona muito mais suavemente do que nesta imagem GIF com baixa taxa de quadros)Veja este controle deslizante em ação
aqui .
▍ Análise de tamanho de pacote
Se você usa o create-react-app, é muito fácil analisar a composição do pacote. Para fazer isso, execute o
npm run build e, em seguida, o
npm run build npx source-map-explorer "build/static/js/*.js" . Depois disso, uma página com informações sobre a composição do pacote será exibida, semelhante à mostrada abaixo.
Informações do pacoteSumário
Como você pode ver, a aceleração de aplicativos React não é tão difícil. É o suficiente para monitorar cuidadosamente de onde eles são criados, testá-los e fazer as alterações apropriadas.
Aqui está o projeto que foi discutido aqui, antes da melhoria e a
seguir .
Se você estiver interessado em otimizar aplicativos React, aqui estão algumas de nossas publicações sobre este tópico:
Caros leitores! Você tem exemplos de otimização bem-sucedida (ou malsucedida) dos aplicativos React?
