Maison > interface Web > js tutoriel > Fractionnement de code avec React.lazy : améliorez les performances de votre application

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

Susan Sarandon
Libérer: 2024-12-23 07:40:44
original
788 Les gens l'ont consulté

Code Splitting with React.lazy: Enhance Your App’s Performance

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>
  );
}
Copier après la connexion
Copier après la connexion
  • 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;
Copier après la connexion

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;
Copier après la connexion

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;
Copier après la connexion

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;
Copier après la connexion

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>
  );
}
Copier après la connexion
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal