Améliorez les performances de l'application React avec des composants de chargement différé

Chargement paresseux des composants dans React

Le

Lazy Loading est une technique dans React qui vous permet de charger des composants uniquement lorsqu'ils sont nécessaires. Cela contribue à améliorer les performances de votre application en réduisant le temps de chargement initial, car seules les parties requises de l'application sont chargées au début, et le reste est chargé dynamiquement si nécessaire.

React fournit la fonction React.lazy et le composant Suspense pour implémenter le chargement paresseux.

---

Comment fonctionne le chargement différé

1. React.lazy : importe dynamiquement un composant.
2. Suspense : affiche un repli (par exemple, une flèche de chargement) pendant le chargement du composant.

---

Syntaxe

const LazyComponent = React.lazy(() => import('./path/to/Component'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

• React.lazy : importe dynamiquement le composant spécifié.
• Suspense : encapsule le composant chargé paresseux et fournit une interface utilisateur de secours pendant le chargement du composant.

---

Exemple 1 : chargement paresseux de base

Sans chargement paresseux

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

Dans cet exemple, le HeavyComponent est toujours chargé, même s'il n'est pas immédiatement nécessaire, ce qui augmente le temps de chargement initial.

Avec chargement paresseux

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <Suspense fallback={<div>Loading Heavy Component...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Désormais, HeavyComponent est chargé uniquement lors du rendu. L'interface utilisateur de secours (par exemple, "Chargement du composant lourd...") s'affiche pendant la récupération du composant.

---

Exemple 2 : chargement paresseux avec React Router

Le chargement différé est particulièrement utile dans le routage pour charger des composants pour des routes spécifiques uniquement lorsque ces routes sont accessibles.

import React, { Suspense } from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const Home = React.lazy(() => import("./Home"));
const About = React.lazy(() => import("./About"));
const Contact = React.lazy(() => import("./Contact"));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading Page...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

• React.lazy : charge paresseusement les composants pour les routes comme /about et /contact.
• Suspense : affiche l'interface utilisateur de secours pendant le chargement des composants.

---

Avantages du chargement paresseux

1. Performances améliorées : réduit le temps de chargement initial en différant le chargement des composants inutiles.
2. Meilleure expérience utilisateur : charge les composants de manière dynamique, ce qui facilite la création d'applications réactives.
3. Taille du bundle réduite : divise le code en morceaux plus petits, minimisant ainsi la taille du bundle JavaScript chargé initialement.

---

Exemple avancé : chargement paresseux de plusieurs composants

Vous pouvez charger plusieurs composants paresseusement et les combiner avec un rendu conditionnel.

const LazyComponent = React.lazy(() => import('./path/to/Component'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

Gestion des erreurs avec le chargement paresseux

Si le composant chargé paresseux ne parvient pas à se charger (par exemple, une erreur réseau), React ne fournit pas de gestion intégrée des erreurs pour le chargement paresseux. Vous pouvez utiliser ErrorBoundary pour gérer de tels scénarios.

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1>App Component</h1>
      <HeavyComponent />
    </div>
  );
}

export default App;

---

Meilleures pratiques pour le chargement différé

1. Gardez les solutions de secours simples : utilisez des interfaces utilisateur de secours légères, telles que des flèches ou des messages texte.
2. Composants judicieusement : divisez les composants de manière logique, par exemple par itinéraire ou par fonctionnalité.
3. Combiner avec le fractionnement de code : utilisez des outils comme Webpack ou Vite pour un fractionnement de code efficace.

---

Conclusion

Le chargement différé dans React est un moyen puissant d'améliorer les performances des applications et d'optimiser l'expérience utilisateur. En chargeant les composants de manière dynamique à l'aide de React.lazy et Suspense, vous pouvez réduire le temps de chargement initial et vous assurer que seules les parties nécessaires de votre application sont récupérées.

---

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!