Fractionnement de code avec React.lazy et Suspense

Dans le développement Web moderne, la performance est primordiale. Les utilisateurs s'attendent à des applications à chargement rapide, et l'une des stratégies les plus efficaces pour y parvenir consiste à diviser le code. Le fractionnement du code vous permet de diviser votre application en morceaux plus petits, en chargeant uniquement le code nécessaire en cas de besoin. Cet article explique comment implémenter le fractionnement de code dans React à l'aide de React.lazy et Suspense.

Comprendre le fractionnement du code

Le fractionnement de code est le processus de division de votre application en lots plus petits qui peuvent être chargés à la demande. Ceci est particulièrement important pour les applications volumineuses, où l'envoi d'un ensemble JavaScript unique et massif peut entraîner des temps de chargement lents et une mauvaise expérience utilisateur. En divisant votre code, vous pouvez garantir que les utilisateurs téléchargent uniquement le code dont ils ont besoin, lorsqu'ils en ont besoin.

Le rôle du regroupement

La plupart des applications React utilisent des bundles tels que Webpack, Rollup ou Browserify pour combiner des fichiers en un seul bundle. Bien que le regroupement soit efficace, il peut conduire à des fichiers de grande taille à mesure que votre application se développe. Le fractionnement du code permet d'atténuer ce problème en vous permettant de charger uniquement les parties nécessaires de votre application.

Importations dynamiques

La syntaxe dynamique import() est à la base du fractionnement de code en JavaScript. Il vous permet de charger des modules de manière asynchrone, ce qui est crucial pour implémenter le fractionnement de code dans React.

// Before code splitting
import { add } from './math';

console.log(add(16, 26));

// After code splitting
import("./math").then(math => {
  console.log(math.add(16, 26));
});

Lors de l'utilisation de import(), le bundler crée automatiquement des morceaux séparés pour les modules importés.

Utiliser React.lazy

React fournit un moyen intégré d'implémenter le fractionnement du code au niveau des composants via React.lazy. Cette fonction permet de définir un composant qui sera chargé dynamiquement.

Exemple :

import React, { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
);

Dans cet exemple, AvatarComponent ne sera chargé que lorsque DetailsComponent est rendu, réduisant ainsi le temps de chargement initial.

Présentation du suspense

Bien que React.lazy gère le chargement des composants, il ne gère pas l'état de chargement. C'est là que Suspense entre en jeu. Suspense vous permet de définir une interface utilisateur de secours qui sera affichée pendant la récupération du composant chargé paresseux.

Exemple :

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
  </Suspense>
);

Dans cet exemple, pendant le chargement d'AvatarComponent, l'utilisateur verra un message "Chargement...". Cela améliore l'expérience utilisateur en fournissant des commentaires pendant le processus de chargement.

Gestion de plusieurs composants

Suspense peut également gérer simultanément plusieurs composants chargés paresseux. Ceci est utile pour réduire le nombre d'indicateurs de chargement affichés à l'utilisateur.

Exemple :

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));
const InfoComponent = lazy(() => import('./InfoComponent'));

const renderLoader = () => <p>Loading...</p>;

const DetailsComponent = () => (
  <Suspense fallback={renderLoader()}>
    <AvatarComponent />
    <InfoComponent />
  </Suspense>
);

Dans ce cas, les deux composants seront chargés ensemble et l'utilisateur verra un seul indicateur de chargement jusqu'à ce que les deux soient prêts.

Limites d’erreur

Lorsqu'il s'agit de composants chargés paresseux, il est essentiel de gérer les échecs de chargement potentiels. React fournit un modèle pour cela à travers les limites d'erreur. Une limite d'erreur peut détecter les erreurs lors du rendu et afficher une interface utilisateur de secours.

Exemple :

import React, { lazy, Suspense } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <p>Loading failed! Please reload.</p>;
    }
    return this.props.children;
  }
}

const DetailsComponent = () => (
  <ErrorBoundary>
    <Suspense fallback={<p>Loading...</p>}>
      <AvatarComponent />
    </Suspense>
  </ErrorBoundary>
);

Dans cet exemple, si AvatarComponent ne parvient pas à se charger, l'utilisateur verra un message d'erreur convivial au lieu d'une interface utilisateur cassée.

Fractionnement de code basé sur l'itinéraire

L'un des endroits les plus efficaces pour implémenter le fractionnement de code se situe au niveau de la route. Ceci est particulièrement utile dans les applications à page unique (SPA) où différents itinéraires peuvent charger différents composants.

Exemple :

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

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

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

Dans cet exemple, les composants Home et About sont chargés uniquement lors de l'accès à leurs itinéraires respectifs, optimisant ainsi le temps de chargement initial.

Conclusion

Le fractionnement de code est une technique puissante qui peut améliorer considérablement les performances de vos applications React. En utilisant React.lazy et Suspense, vous pouvez facilement implémenter le fractionnement du code au niveau des composants, garantissant ainsi que les utilisateurs téléchargent uniquement le code dont ils ont besoin. Cela améliore non seulement les temps de chargement, mais améliore également l'expérience utilisateur globale.

Lorsque vous développez vos applications React, réfléchissez aux domaines dans lesquels vous pouvez appliquer le fractionnement du code pour optimiser les performances. Commencez par un fractionnement basé sur l'itinéraire et identifiez les composants volumineux qui peuvent être chargés à la demande. Avec ces stratégies, vous pouvez créer des applications rapides et efficaces qui ravissent vos utilisateurs.

Suivez-moi pour plus d'informations sur React, TypeScript et les pratiques modernes de développement Web !?‍?

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!