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

   import MyComponent from './MyComponent';

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

   import React, { Suspense } from 'react';

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

   function App() {
     return (
       

         Loading...
}>
           
         
       

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!