Guide étape par étape pour implémenter le chargement différé et le fractionnement de code dans un projet React

Voici un guide étape par étape pour implémenter le chargement paresseux et le fractionnement de code dans un projet React. Nous allons créer une application simple avec deux routes, chargeant les composants paresseusement.

Étape 1 : Créer une nouvelle application React

Si vous ne l'avez pas déjà fait, créez une nouvelle application React à l'aide de Create React App :

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

Étape 2 : Installer le routeur React

Installez React-Router-dom pour le routage :

npm install react-router-dom

Étape 3 : Configurer le chargement différé et le fractionnement du code

Créer des composants

1. Créez un dossier nommé composants dans le répertoire src.
2. À l'intérieur des composants, créez deux fichiers : Home.js et About.js.

Home.js

import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

À propos de.js

import React from 'react';

const About = () => {
  return <h2>About Page</h2>;
};

export default About;

Mettre à jour App.js

Maintenant, modifiez votre fichier App.js pour implémenter le chargement et le routage paresseux :

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 (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route path="/about" component={About} />
          <Route path="/" component={Home} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Étape 4 : Exécutez votre application

Maintenant, exécutez votre application pour la voir en action :

npm start

Étape 5 : tester le chargement différé

1. Ouvrez votre navigateur et accédez à http://localhost:3000.
2. Cliquez sur le lien "Accueil" pour voir le chargement du composant Accueil.
3. Cliquez sur le lien "À propos" pour voir le composant À propos se charger paresseusement.

Points clés

• React.lazy est utilisé pour importer dynamiquement des composants, qui ne sont chargés que lorsqu'ils sont rendus.
• Suspense est utilisé pour gérer l'état de chargement, affichant une solution de secours pendant la récupération du composant chargé paresseux.
• Cette approche réduit considérablement le temps de chargement initial en divisant le code en morceaux plus petits.

Améliorations supplémentaires

Vous pouvez améliorer davantage votre configuration en :

• Implémentation de limites d'erreur autour de vos composants chargés paresseux pour détecter les erreurs de chargement.
• Utilisation de stratégies de routage avancées avec React Router pour des applications plus volumineuses.

Si vous avez besoin de fonctionnalités plus spécifiques ou d'aide supplémentaire, faites-le-moi savoir !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!