Seu aplicativo React está muito lento ou demorando muito para carregar? Nesse caso, convém usar uma técnica conhecida como divisão de código. Essa técnica é muito eficaz para melhorar a velocidade de carregamento e o desempenho dos aplicativos React. Mas o que é divisão de código? E como isso é feito?

O que é divisão de código?

Um aplicativo React típico compreende dezenas de componentes (e código). Mas você não precisa carregar a maioria desses componentes ao carregá-los pela primeira vez. A divisão de código envolve dividir as diferentes partes do seu aplicativo e carregá-las apenas quando necessário. Isso é muito mais eficiente do que carregar todo o aplicativo de uma só vez.

Considere um aplicativo React que possui três páginas: a página inicial, a página sobre e a página de produtos. Quando você está na página inicial, não adianta carregar a página sobre ou a página de produtos. Porque você ainda não está nessas páginas. A ideia da divisão de código é garantir que você carregue o código somente quando for necessário.

Abra uma página da Web em seu navegador da Web e, em seguida, abra o DevTools (você pode clicar em F12 no teclado para abri-lo no Google Chrome). Em seguida, vá para a guia Origem. Lá você encontrará todo o código que foi baixado enquanto navega para a página. Sem divisão de código, o navegador baixa todos os arquivos do seu projeto no carregamento inicial da página. Isso pode tornar seu site lento se ele contiver muitos arquivos.

A divisão de código torna-se especialmente útil à medida que seu projeto começa a ficar cada vez maior. Isso ocorre porque o download de todos os arquivos do aplicativo de uma só vez pode levar muito tempo. Portanto, dividir isso será bastante benéfico.

A melhor parte da divisão de código é que você pode atrasar o carregamento de componentes e funções. Nosso guia introdutório sobre ReactJS explica componentes e funções em profundidade caso você precise de uma atualização.

Funções de divisão de código: usando a importação dinâmica

Considere a seguinte situação. Você quer que sua página inicial tenha um botão. Ao clicar no botão, você deseja alertar a soma de 2 e 2 (que é 4). Então você cria um Home.js componente e defina a visualização da sua página inicial.

Neste caso, você tem duas opções. Primeiro, você pode importar o código para adicionar os números na parte superior do Home.js arquivo. Mas aqui está o problema. Se você importar a função na parte superior do arquivo, o código será carregado mesmo que você não tenha clicado no botão. Uma abordagem melhor será carregar o soma() funcionam apenas quando você clica no botão.

Para conseguir isso, você precisará realizar uma importação dinâmica. Isso significa que você importará o soma() função embutida no elemento de botão. Aqui está o código para o mesmo:

exportarpadrãofunçãoLar() { 
retornar ( 
"Lar"> 
Página inicial</h1>
 {
importar("../soma.js").então((módulo) => {
 alerta(módulo.soma(2, 2))
 })
 }}
 >
 Somar os dois números
 </button> 
 </div> 
 ); 
}

Agora o navegador irá baixar apenas o soma.js módulo quando você clica no botão. Isso melhora o tempo de carregamento da página inicial.

Componentes de divisão de código: usando React.lazy e Suspense

Você pode dividir componentes no React usando o preguiçoso() função. O melhor lugar para executar a divisão de código seria dentro do seu roteador. Porque é aqui que você mapeia componentes para rotas em seu aplicativo. Você pode ler nosso guia sobre como criar um aplicativo de página única com o React Router se você precisar de uma atualização.

Vamos supor que seu aplicativo tenha um Lar, Sobre, e Produtos componente. Quando você está no Lar componente, não adianta carregar o Sobre componente ou o Produtos componente. Então você precisa separá-los do Lar rota. O código a seguir demonstra como conseguir isso:

Primeiro, você precisa importar as funções e componentes necessários do reagir e react-router-dom módulos:

importar { Rotas, Rota, Outlet, Link } de"react-router-dom";
importar { preguiçoso, suspense } de"reagir";

Em seguida, você precisa importar os componentes dinamicamente usando o preguiçoso() função:

const Casa = preguiçoso(() =>importar("./componentes/Home"));
const Sobre = preguiçoso(() =>importar("./componentes/Sobre"));
const Produtos = preguiçoso(() =>importar("./componentes/Produtos"));

Em seguida, configure o layout (menu de navegação). Use o componente para renderizar o componente que corresponde à rota atual (Lar, Sobre, ou Produtos componente):

funçãoNavWrapperName() {
retornar (
 <>

Você pode ver que envolvemos os componentes dentro. Isso diz ao React que tudo dentro tem o potencial de ser carregado lentamente, o que significa que pode não estar disponível imediatamente. Por este motivo, o suspense componente tem um cair pra trás propriedade. No nosso caso, o valor é um texto simples que diz "Carregando...". Então, enquanto cada uma das páginas está sendo baixada, vai dizer que está carregando na tela.

Por fim, configure a rota:

exportarpadrãofunçãoAplicativo() {
retornar (

"/" elemento={}>
"/" elemento={} />
"/produtos" elemento={} />
"/sobre" elemento={} />
 </Route>
 </Routes>
 );
}

Agora, quando você visita a página inicial, o navegador carrega apenas o Home.js arquivo. Da mesma forma, ao clicar no botão Sobre link no menu de navegação para visitar a página Sobre, o navegador carrega apenas o Sobre.js arquivo. Isso é o mesmo para a página de produtos.

Divisão de Código Condicional

Muitas vezes, você pode ter conteúdo em sua página aplicável apenas a determinados usuários. Por exemplo, em sua página inicial, você pode ter uma seção com dados administrativos exclusivos para usuários administradores. Este pode ser um painel de administração que aparece para usuários administrativos, mas não para usuários normais.

Nesse caso, você não gostaria de mostrar todos esses dados todas as vezes. Nesse caso, você pode usar a técnica de divisão de código para garantir que só mostre essas informações se essa pessoa for um administrador.

Veja como ficaria esse código:

importar { preguiçoso, suspense } de"reagir";
const AdminData = preguiçoso(() =>importar("./AdminData"));
exportarpadrãofunçãoLar() { 
const [isAdmin, setIsAdmin] = useState(falso)
retornar ( 

"Lar"> 
Página inicial</h1>
 setIsAdmin(anterior => !anterior)}>
 Alternar administrador
 </button> 

Carregando...</h1>}>
 {éAdmin? <AdminData />: <h2> Não é o administrador h2>} 
 </Suspense>
 </div> 
 ); 
}

Agora, quando você clicar no botão de alternância, é administrador será definido para verdadeiro. Como resultado, o aplicativo mostrará o que está sendo carregado lentamente. Mas se você não for um usuário administrador, o download do aplicativo nunca será feito AdminData.js porque não vai precisar.

A divisão de código condicional usa o mesmo conceito que renderização condicional em React.

Conceitos avançados de divisão de código

Uma técnica avançada que você pode ativar ao dividir o código são as transições. O useTransition() hook permite que você faça atualizações não urgentes que não mudarão sua interface do usuário até que a atualização seja concluída.

Primeiro, você importa o gancho:

importar {useTransition} de"reagir"

Então você chama o gancho, que retorna pendente e startTransition:

const [está pendente, startTransition] = useTransition()

Por fim, envolva o código para atualizar seu estado dentro startTransition():

startTransition(() => {
 setIsAdmin((anterior) => !anterior)
})

Agora, sua IU real não exibirá o valor de fallback (o texto de carregamento) até que o navegador conclua a transição. Isso significa que ele vai esperar que o navegador baixe todos os dados do administrador antes de tentar mostrar qualquer dado.

Outras maneiras de otimizar o desempenho do React

Este artigo abordou a divisão de código como um método para melhorar o desempenho de seus aplicativos React. Mas também existem vários outros métodos que podem fornecer o conhecimento necessário para criar aplicativos robustos.