Fractionnement de code avec React.lazy : améliorez les performances de votre application

Fractionnement de code avec React.lazy dans React

Le

Code Splitting est une technique permettant d'optimiser les performances des applications React en décomposant le bundle JavaScript en morceaux plus petits. React fournit React.lazy comme moyen intégré d'implémenter le fractionnement du code au niveau des composants. Cela vous permet de charger dynamiquement des parties de votre application selon vos besoins.

---

Comment fonctionne le fractionnement de code avec React.lazy

1. Importation dynamique : utilise ES6 import() pour charger les composants de manière dynamique.
2. Packs plus petits : décompose l'application en bundles plus petits, réduisant ainsi le temps de chargement initial.
3. Chargement asynchrone : charge les composants de manière asynchrone uniquement lorsque cela est nécessaire.

---

Syntaxe

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

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

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

---

Exemple 1 : fractionnement de code de base avec React.lazy

Sans fractionnement de code

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

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

export default App;

Dans cette approche, l'intégralité du HeavyComponent est regroupée avec l'application principale, même si elle n'est pas immédiatement nécessaire.

Avec fractionnement de code

import React, { Suspense } from "react";

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

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

export default App;

Désormais, HeavyComponent n'est chargé que lorsqu'il est rendu. Cela réduit la taille du paquet initial.

---

Exemple 2 : fractionnement de code dans les routes

Le fractionnement du code fonctionne de manière transparente avec React Router pour charger dynamiquement les composants de l'itinéraire.

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;

Avantages:

• Chaque composant de l'itinéraire (Accueil, À propos, Contact) est chargé uniquement lors de l'accès à l'itinéraire correspondant.

---

Exemple 3 : chargement paresseux de plusieurs composants

Chargez paresseux plusieurs composants dans une seule application avec fractionnement logique.

import React, { Suspense, useState } from "react";

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

function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);

  return (
    <div>
      <button onClick={() => setShowA(true)}>Load Component A</button>
      <button onClick={() => setShowB(true)}>Load Component B</button>

      <Suspense fallback={<div>Loading...</div>}>
        {showA && <ComponentA />}
        {showB && <ComponentB />}
      </Suspense>
    </div>
  );
}

export default App;

---

Gestion des erreurs avec React.lazy

React ne fournit pas de gestion intégrée des erreurs pour les importations ayant échoué. Vous pouvez utiliser une Limite d'erreur pour gérer de tels cas.

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

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

---

Meilleures pratiques pour le fractionnement de code

1. Divisé par itinéraire ou fonctionnalité : divisez votre application en morceaux logiques, tels que des itinéraires ou des fonctionnalités principales.
2. Gardez les solutions de secours minimales : utilisez des interfaces utilisateur de secours légères, telles que des flèches ou des messages texte.
3. Surveiller la taille du bundle : utilisez des outils tels que Webpack Bundle Analyzer pour identifier les composants volumineux.
4. Éviter le fractionnement excessif : équilibre entre le nombre de morceaux et les performances ; trop de morceaux peuvent entraîner une augmentation des requêtes HTTP.

---

Outils pour améliorer le fractionnement du code

1. Webpack : prend en charge les importations dynamiques pour le fractionnement du code.
2. Vite : offre des builds rapides et un fractionnement automatique du code.
3. React Router : permet une intégration facile avec un chargement paresseux basé sur l'itinéraire.
4. React Loadable : une bibliothèque tierce pour un contrôle amélioré sur le chargement paresseux.

---

Conclusion

Le fractionnement de code avec React.lazy est un moyen puissant d'améliorer les performances de votre application. En chargeant dynamiquement les composants, vous pouvez réduire le temps de chargement initial et améliorer l'expérience utilisateur. Lorsqu'il est combiné avec Suspense et une gestion appropriée des erreurs, il fournit une solution robuste pour créer des applications React efficaces et évolutives.

---

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!