Como usar React.lazy e Suspense para carregamento lento de componentes

O React 16.6 trouxe a divisão de código a um novo nível. Agora você pode carregar seus componentes quando realmente for necessário, sem instalar bibliotecas adicionais.

O que são divisão de código e carregamento lento?

Webpack define divisão de código como:

“Técnica de dividir seu código em vários pacotes que podem ser carregados sob demanda ou em paralelo”. [Fonte]

Outra forma de dizer: “carregando sob demanda ou em paralelo” é o carregamento lento .

O oposto do carregamento lento é o carregamento antecipado . Aqui tudo é carregado, não importa se você usa ou não.

Por que usaríamos divisão de código e carregamento lento?

Às vezes, temos que introduzir um grande pedaço de código para cobrir algumas funcionalidades. Este código pode importar dependências de terceiros ou gravá-lo por conta própria. Esse código afeta o tamanho do pacote principal.

Baixar alguns MBs é moleza para a velocidade da Internet atual. Ainda temos que pensar nos usuários com uma conexão de internet lenta ou usando dados móveis.

Como isso era feito antes do React 16.6?

Provavelmente, a biblioteca mais popular para carregamento lento de componentes React é react-loadable.

É importante que o reactjs.org ainda recomende react-loadablese o seu aplicativo for renderizado no servidor. [Fonte]

react-loadableé muito semelhante à nova abordagem do React. Vou mostrar isso na demonstração a seguir.

É necessário algo para a configuração?

Vamos ver o que reactjs.org tem a dizer sobre isso:

“Se você estiver usando Create React App, Next.js, Gatsby ou uma ferramenta semelhante, terá uma configuração de pacote Web pronto para uso para agrupar seu aplicativo. Se não estiver, precisará configurar o agrupamento. . Por exemplo, consulte os guias de instalação e primeiros passos nos documentos do Webpack. “

- reactjs.org

Ok, então o Webpack é necessário, que lida com as importações dinâmicas dos pacotes.

A demonstração a seguir é gerada usando Create React App.E, nesse caso, o Webpack já está configurado e estamos prontos para ir.

DEMO

Para esta demonstração, usaremos react-pdf. react-pdfé uma biblioteca incrível usada para criar arquivos PDF no navegador, dispositivo móvel e servidor. Poderíamos gerar um PDF no servidor, mas se preferirmos fazê-lo no lado do cliente, isso tem um custo: o tamanho do pacote.

Estou usando a extensão de custo de importação para Visual Studio Code para ver os tamanhos das bibliotecas usadas.

Digamos que nosso requisito seja gerar um arquivo PDF quando um usuário clicar no botão.

Agora, este é um formulário simples com apenas um caso de uso. Tente imaginar um enorme aplicativo da web onde isso seja uma fração das possibilidades. Talvez essa funcionalidade não seja usada com muita frequência pelos usuários.

Vamos nos colocar nessa situação. A geração de PDF não é usada com frequência e não faz sentido carregar o código inteiro para cada solicitação de página.

Vou tentar mostrar como podemos desenvolver uma solução com carregamento lento e sem ele.

Eager VS lazy loading showcase

Para ambos os casos, usaremos um componente que importa dependências react-pdfe renderiza um documento PDF simples.

Nada de espetacular acontecendo aqui. Nós importamos PDFViewer, Document, Page, Text, Viewde react-pdf. Todos eles são usados ​​no rendermétodo de PDFPreviewcomponente.

PDFPreviewrecebe apenas uma propchamada title. Como o nome indica, ele é usado como um título em um arquivo PDF recém-gerado.

pdfStyles.js se parece com isto:

Carregamento ansioso

Vamos primeiro ver como o componente pai sem carregamento lento poderia ser:

que renderiza a seguinte visualização no navegador:

Vamos analisar o código juntos:

Na linha 2 importamos PDFPreviewcomponente.

Na linha 6, inicializamos o estado com os valores padrão. nameé um campo usado como título no arquivo PDF, enquanto campo PDFPreviewé um booleano que mostra ou oculta PDFPreview.

Agora, vamos pular para o rendermétodo e verificar o que será renderizado.

Nas linhas 19 e 25, renderizamos uma entrada e um botão. Quando o usuário digita na entrada, nameo estado é alterado.

Então, quando um usuário clica em “Gerar PDF”, showPDFPreviewé definido como true. O componente é renderizado novamente e mostra o PDFPreviewcomponente.

Mesmo que usemos PDFPreviewapenas no clique do usuário, todos os códigos relacionados a ele são incluídos no pacote de aplicativos:

Este é um ambiente de desenvolvimento. Na produção, os tamanhos seriam significativamente menores. Ainda assim, não estamos dividindo o código da maneira ideal.

Carregamento lento

Fizemos apenas pequenas alterações e vamos analisá-las.

A linha 2 é substituída por:

const LazyPDFDocument = React.lazy(() => import("./PDFPreview"));

Vamos ver o que os documentos do React dizem sobre React.lazy:

React.lazy assume uma função que deve chamar uma dinâmica import(). Deve retornar um Promiseque resolve para um módulo com uma defaultexportação contendo um componente React.

- reactjs.org

Na linha 27, usamos Suspense, que deve ser um pai de um componente de carregamento lento. Quando showPDFPreviewestá definido como verdadeiro, LazyPDFDocumentestá começando a carregar.

Até que o componente filho seja resolvido, Suspensemostra tudo o que é fornecido para fallbackprop.

O resultado final é assim:

Podemos ver os pesos de 0.chunk.js significativamente menos do que antes e 4.chunk.js e 3.chunk.js são carregados ao pressionar o botão.

Conclusão

Cada vez que estamos introduzindo uma nova dependência em nosso projeto, nossa responsabilidade é avaliar seu custo e verificar como isso afeta o pacote principal.

Então, temos que perguntar se essa funcionalidade será usada raramente e se podemos carregá-la sob demanda, sem sacrificar a experiência do usuário.

Se a resposta for sim, então React.Lazye Suspenserealmente nos ajude nessa tarefa.

Obrigado por ler! Compartilhe com quem possa achar útil e deixe comentários.