Aqui está um guia passo a passo para implementar carregamento lento e divisão de código em um projeto React. Criaremos um aplicativo simples com duas rotas, carregando componentes lentamente.

Etapa 1: crie um novo aplicativo React

Se ainda não o fez, crie um novo aplicativo React usando Criar aplicativo React:

npx create-react-app lazy-loading-example
cd lazy-loading-example

Etapa 2: instalar o roteador React

Instale react-router-dom para roteamento:

npm install react-router-dom

Etapa 3: configurar carregamento lento e divisão de código

Criar componentes

1. Crie uma pasta chamada componentes dentro do diretório src.
2. Dentro dos componentes, crie dois arquivos: Home.js e About.js.

Home.js

import React from 'react';

const Home = () => {
  return 
Home Page
;
};

export default Home;

Sobre.js

import React from 'react';

const About = () => {
  return 
About Page
;
};

export default About;

Atualizar App.js

Agora, modifique seu arquivo App.js para implementar carregamento e roteamento lentos:

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// Lazy load components
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    Loading...}>
        
  );
}

export default App;

Etapa 4: execute seu aplicativo

Agora, execute seu aplicativo para vê-lo em ação:

npm start

Etapa 5: teste o carregamento lento

1. Abra seu navegador e navegue até http://localhost:3000.
2. Clique no link "Home" para ver o carregamento do componente Home.
3. Clique no link "Sobre" para ver o componente Sobre carregar lentamente.

Pontos-chave

• React.lazy é usado para importar componentes dinamicamente, que são carregados somente quando são renderizados.
• Suspense é usado para lidar com o estado de carregamento, exibindo um substituto enquanto o componente de carregamento lento está sendo buscado.
• Essa abordagem reduz significativamente o tempo de carregamento inicial, dividindo o código em partes menores.

Melhorias Adicionais

Você pode aprimorar ainda mais sua configuração:

• Implementando limites de erro em torno de seus componentes de carregamento lento para detectar erros de carregamento.
• Usando estratégias de roteamento avançadas com React Router para aplicações maiores.

Se precisar de recursos mais específicos ou ajuda adicional, entre em contato!