Divisão de Código - Code-Splitting
A divisão de código é uma técnica que envolve quebrar o código de uma aplicação em partes menores e carregá-las sob demanda. Isso é particularmente benéfico em projetos grandes, nos quais não é necessário carregar todos os recursos de uma vez. O Code-Splitting é uma estratégia eficaz para otimizar o desempenho, reduzir o tempo de carregamento inicial e melhorar a experiência do usuário.
Ao combinar React.lazy e Suspense, você pode aplicar a divisão de código em componentes individuais, carregando-os de forma assíncrona apenas quando necessário. Isso ajuda a otimizar o desempenho da sua aplicação, pois evita a carga desnecessária de código no carregamento inicial.
Exemplo prático
Suponha que tenhamos um componente LazyComponent que queremos carregar apenas quando um botão é clicado.
import React, { lazy, Suspense } from 'react';
// Componente que será carregado de forma lazy
const LazyComponent = lazy(() => import('./LazyComponent'));
// Componente pai que usa React.lazy e Suspense
const App = () => {
const handleClick = async () => {
// Carrega LazyComponent apenas quando o botão é clicado
await import('./LazyComponent');
};
return (
<div>
<button onClick={handleClick}>Carregar LazyComponent</button>
<Suspense fallback={<div>Carregando...</div>}>
<LazyComponent />
</Suspense>
</div>
);
};
export default App;Neste exemplo, o componente LazyComponent é carregado apenas quando o botão é clicado, graças à combinação do React.lazy e Suspense. O fallback no Suspense fornece um componente de carregamento enquanto o componente lazy está sendo carregado.
Atenção
A adoção dessa técnica só é recomendado em cenários onde há a necessidade de otimizar o desempenho da aplicação, ou seja, em projetos grandes. Dessa forma, não é recomendado o seu uso para aplicações de pequeno porte, uma vez que abordagens como esta aumentam significantemente a complexidade.