M
MLOG
React Lazy Loading: Divisão de Código de Componentes para Desempenho Otimizado | MLOG | MLOG ); } export default ImageGallery;

E o componente Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Neste exemplo, cada imagem é envolvida em um componente <Suspense>, então uma mensagem de carregamento será exibida para cada imagem enquanto ela está sendo carregada. Isso evita que a página inteira seja bloqueada enquanto as imagens estão sendo baixadas.

Técnicas e Considerações Avançadas

1. Limites de Erro

Ao usar o lazy loading, é importante lidar com possíveis erros que possam ocorrer durante o processo de carregamento. Os limites de erro podem ser usados ​​para capturar esses erros e exibir uma interface do usuário de fallback. Você pode criar um componente de limite de erro como este:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return 
Something went wrong.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Em seguida, envolva o componente <Suspense> com o <ErrorBoundary>:



  Loading...}>

Se ocorrer um erro ao carregar MyComponent, o <ErrorBoundary> o capturará e exibirá a interface do usuário de fallback.

2. Renderização do Lado do Servidor (SSR) e Lazy Loading

O Lazy loading também pode ser usado em conjunto com a renderização do lado do servidor (SSR) para melhorar o tempo de carregamento inicial do seu aplicativo. No entanto, requer alguma configuração adicional. Você precisará garantir que o servidor possa lidar corretamente com importações dinâmicas e que os componentes carregados preguiçosamente sejam hidratados corretamente no lado do cliente.

Ferramentas como Next.js e Gatsby.js fornecem suporte integrado para lazy loading e divisão de código em ambientes SSR, tornando o processo muito mais fácil.

3. Pré-carregamento de Componentes Carregados Preguiçosamente

Em alguns casos, você pode querer pré-carregar um componente carregado preguiçosamente antes que ele seja realmente necessário. Isso pode ser útil para componentes que provavelmente serão renderizados em breve, como componentes localizados abaixo da dobra, mas que provavelmente serão rolados para a visualização. Você pode pré-carregar um componente chamando a função import() manualmente:


import('./MyComponent'); // Preload MyComponent

Isso iniciará o carregamento do componente em segundo plano, para que ele esteja disponível mais rapidamente quando for realmente renderizado.

4. Importações Dinâmicas com Comentários Mágicos do Webpack

Os "comentários mágicos" do Webpack fornecem uma maneira de personalizar os nomes dos fragmentos de código gerados. Isso pode ser útil para depurar e analisar a estrutura do pacote do seu aplicativo. Por exemplo:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Isso criará um fragmento de código chamado "my-component.js" (ou similar) em vez de um nome genérico.

5. Evitando Armadilhas Comuns

Exemplos do Mundo Real e Casos de Uso

O Lazy loading pode ser aplicado a uma ampla gama de cenários para melhorar o desempenho de aplicativos React. Aqui estão alguns exemplos:

Exemplo: Site de E-commerce Internacional

Imagine um site de e-commerce vendendo produtos globalmente. Diferentes países podem ter diferentes moedas, idiomas e catálogos de produtos. Em vez de carregar todos os dados para cada país antecipadamente, você pode usar o lazy loading para carregar os dados específicos da localização do usuário apenas quando eles visitam o site.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Function to determine user's country

  return (
    Loading content for your region...}>
      
      
    
  );
}

Conclusão

O Lazy loading e a divisão de código de componentes são técnicas poderosas para otimizar o desempenho de aplicativos React. Ao carregar componentes apenas quando são necessários, você pode reduzir significativamente o tempo de carregamento inicial, melhorar a experiência do usuário e aprimorar seu SEO. Os componentes React.lazy() e <Suspense> integrados do React facilitam a implementação do lazy loading em seus projetos. Adote essas técnicas para criar aplicativos web mais rápidos, mais responsivos e mais envolventes para um público global.

Lembre-se de sempre considerar a experiência do usuário ao implementar o lazy loading. Forneça interfaces do usuário de fallback informativas, lide com possíveis erros graciosamente e analise cuidadosamente o desempenho do seu aplicativo para garantir que você esteja alcançando os resultados desejados. Não tenha medo de experimentar diferentes abordagens e encontrar a melhor solução para suas necessidades específicas.