Performances de l'application React avec chargement différé

Introduction

Dans le monde moderne du développement Web, la vitesse et les performances sont essentielles. À mesure que votre application React se développe, la taille de son bundle augmente, ce qui peut ralentir les temps de chargement. Le Chargement paresseux est une technique d'optimisation qui vous permet de charger des composants uniquement lorsqu'ils sont nécessaires, vous aidant ainsi à réduire le temps de chargement initial et à améliorer les performances.

Qu’est-ce que le chargement différé ?

Le

Le chargement paresseux (ou fractionnement de code) est la pratique consistant à retarder le chargement des ressources (comme les composants) jusqu'à ce qu'elles soient réellement nécessaires. Cela contribue à améliorer les performances de l'application en réduisant la taille de chargement initiale.

Par exemple, dans une application multipage, il n'est pas nécessaire de charger à l'avance les composants de tous les itinéraires. Vous pouvez les charger lorsque l'utilisateur navigue vers un itinéraire spécifique. Cela réduit la taille initiale du bundle et améliore les temps de chargement, en particulier sur les réseaux les plus lents.

Pourquoi le chargement paresseux est-il important ?

1. Temps de chargement initial réduit : en chargeant uniquement les composants essentiels en premier, la taille initiale du paquet est plus petite, ce qui entraîne des temps de chargement plus rapides.

2. Utilisation optimisée de la bande passante : les ressources inutiles ne sont récupérées que lorsque cela est nécessaire, ce qui réduit l'utilisation des données.

3. Expérience utilisateur améliorée : les applications à chargement plus rapide offrent une meilleure expérience utilisateur, conduisant à une rétention et un engagement plus élevés des utilisateurs.

---

Comment implémenter le chargement paresseux dans React

React prend en charge le chargement paresseux à l'aide de React.lazy et Suspense, qui ont été introduits dans React 16.6.

Exemple de base avec React.lazy et Suspense

1. Importer des composants normalement :

   import MyComponent from './MyComponent';

Dans ce cas, MyComponent est chargé dans le cadre du bundle initial.

1. Chargement paresseux du composant : Utilisez React.lazy pour charger dynamiquement le composant uniquement lorsque cela est nécessaire :

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

1. Utiliser le suspense comme solution de repli : Étant donné que le chargement paresseux des composants prend du temps, React fournit le composant Suspense pour afficher une interface utilisateur de secours (comme une roulette de chargement) pendant que le composant chargé paresseux est récupéré.

   import React, { Suspense } from 'react';

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

   function App() {
     return (
       

         Loading...
}>
           
         
       

); } export default App;

Copier après la connexion

Dans cet exemple, lorsque MyComponent est nécessaire, React l'importe dynamiquement et affiche un message de chargement jusqu'à ce que le composant soit prêt.

---

Itinéraires de chargement paresseux

Le chargement paresseux est particulièrement utile pour les grandes applications avec plusieurs routes. React Router permet un chargement paresseux facile des composants de route.

1. Installez React-Router-dom si vous ne l'avez pas déjà fait :

   npm install react-router-dom

1. Voici un exemple de chargement paresseux d'itinéraires :

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

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

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

Dans cet exemple, les composants Accueil et À propos sont chargés paresseusement uniquement lorsque leurs itinéraires respectifs sont visités.

---

Conseils avancés pour le chargement paresseux

1. Préchargement des composants : Parfois, vous souhaiterez peut-être précharger des composants avant qu'ils ne soient nécessaires (par exemple, lorsque vous survolez un lien). Cela peut être fait en important dynamiquement le composant lorsque certaines conditions sont remplies.

   const preloadAbout = () => {
     import('./pages/About');
   };

1. Chunk Naming : Webpack vous permet de nommer les morceaux lors de l'utilisation du chargement différé, ce qui peut être utile pour le débogage et la surveillance des performances.

   const About = React.lazy(() => import(/* webpackChunkName: "about" */ './pages/About'));

1. Limites d'erreur  : le chargement différé peut échouer en raison de problèmes de réseau. L’utilisation d’une limite d’erreur aidera à gérer de tels cas avec élégance.

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

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

     render() {
       if (this.state.hasError) {
         return <div>Error loading component!</div>;
       }
       return this.props.children;
     }
   }

   // Usage
   <ErrorBoundary>
     <Suspense fallback={<div>Loading...</div>}>
       <MyComponent />
     </Suspense>
   </ErrorBoundary>

---

Considérations relatives aux performances

Bien que le chargement paresseux puisse améliorer considérablement les performances, il doit être utilisé de manière stratégique. La surcharge d'une application avec trop de composants chargés paresseux peut introduire une latence lors de la navigation entre les itinéraires ou le rendu des composants. Équilibrez toujours le chargement paresseux avec l'expérience utilisateur pour éviter un chargement « trop » au moment de l'exécution.

---

Conclusion

Le chargement différé est un moyen efficace d'améliorer les performances de vos applications React. En chargeant les composants uniquement lorsqu'ils sont nécessaires, vous pouvez réduire la taille initiale du bundle, économiser de la bande passante et offrir une meilleure expérience aux utilisateurs.

La mise en œuvre du chargement différé est simple avec React.lazy et Suspense, et lorsqu'elle est combinée avec React Router, vous pouvez efficacement charger des itinéraires de chargement différé dans votre application. Utilisez ces techniques pour optimiser votre application React dès aujourd'hui !

---

Ressources supplémentaires

• React Docs : fractionnement de code
• Webpack Docs : importations dynamiques

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!