Reagieren Sie mit Lazy Loading auf die Leistung der App

Einführung

In der modernen Welt der Webentwicklung sind Geschwindigkeit und Leistung entscheidend. Wenn Ihre React-App wächst, nimmt die Bundle-Größe zu, was die Ladezeiten verlangsamen kann. Lazy Loading ist eine Optimierungstechnik, die es Ihnen ermöglicht, Komponenten nur dann zu laden, wenn sie benötigt werden, wodurch Sie die anfängliche Ladezeit verkürzen und die Leistung verbessern können.

Was ist Lazy Loading?

Lazy Loading (oder Code-Splitting) ist die Praxis, das Laden von Ressourcen (wie Komponenten) zu verzögern, bis sie tatsächlich benötigt werden. Dies trägt dazu bei, die Leistung der App zu verbessern, indem die anfängliche Ladegröße reduziert wird.

In einer mehrseitigen App ist es beispielsweise nicht erforderlich, Komponenten für alle Routen im Voraus zu laden. Sie können sie laden, wenn der Benutzer zu einer bestimmten Route navigiert. Dies reduziert die anfängliche Bundle-Größe und verbessert die Ladezeiten, insbesondere in langsameren Netzwerken.

Warum ist Lazy Loading wichtig?

1. Reduzierte anfängliche Ladezeit: Indem nur die wesentlichen Komponenten zuerst geladen werden, ist die anfängliche Paketgröße kleiner, was zu schnelleren Ladezeiten führt.

2. Optimierte Bandbreitennutzung: Unnötige Ressourcen werden erst abgerufen, wenn sie benötigt werden, wodurch die Datennutzung reduziert wird.

3. Verbesserte Benutzererfahrung: Schneller ladende Apps sorgen für eine bessere Benutzererfahrung, was zu einer höheren Benutzerbindung und -einbindung führt.

---

So implementieren Sie Lazy Loading in React

React verfügt über integrierte Unterstützung für Lazy Loading mithilfe von React.lazy und Suspense, die in React 16.6 eingeführt wurden.

Einfaches Beispiel mit React.lazy und Suspense

1. Komponenten normal importieren:

   import MyComponent from './MyComponent';

In diesem Fall wird MyComponent als Teil des anfänglichen Pakets geladen.

1. Lazy Loading der Komponente: Verwenden Sie React.lazy, um die Komponente nur dann dynamisch zu laden, wenn sie benötigt wird:

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

1. Spannung als Ausweichlösung nutzen: Da das verzögerte Laden von Komponenten Zeit braucht, stellt React die Suspense-Komponente bereit, um eine Fallback-Benutzeroberfläche (wie einen Ladespinner) anzuzeigen, während die verzögert geladene Komponente abgerufen wird.

   import React, { Suspense } from 'react';

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

   function App() {
     return (
       

         Loading...
}>
           
         
       
     );
   }
   export default App;

Wenn in diesem Beispiel MyComponent benötigt wird, importiert React es dynamisch und zeigt eine Lademeldung an, bis die Komponente bereit ist.

---

Lazy Loading-Routen

Lazy Loading ist besonders nützlich für große Anwendungen mit mehreren Routen. React Router ermöglicht ein einfaches verzögertes Laden von Routenkomponenten.

1. Installieren Sie „react-router-dom“, falls Sie es noch nicht getan haben:

   npm install react-router-dom

1. Hier ist ein Beispiel für das verzögerte Laden von Routen:

   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...}>
           <routes>
             <route path="/" element="{<Home"></route>} />
             <route path="/about" element="{<About"></route>} />
           </routes>
         </suspense>
       </router>
     );
   }
   export default App;

In diesem Beispiel werden die Home- und About-Komponenten nur verzögert geladen, wenn ihre jeweiligen Routen besucht werden.

---

Erweiterte Tipps für Lazy Loading

1. Komponenten vorab laden: Manchmal möchten Sie möglicherweise Komponenten vorab laden, bevor sie benötigt werden (z. B. wenn Sie mit der Maus über einen Link fahren). Dies kann durch dynamisches Importieren der Komponente erfolgen, wenn bestimmte Bedingungen erfüllt sind.

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

1. Chunk-Benennung: Mit Webpack können Sie die Chunks benennen, wenn Sie Lazy Loading verwenden, was beim Debuggen und der Leistungsüberwachung hilfreich sein kann.

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

1. Fehlergrenzen: Das verzögerte Laden kann aufgrund von Netzwerkproblemen fehlschlagen. Die Verwendung einer Fehlergrenze hilft dabei, solche Fälle elegant zu behandeln.

   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...}>
       <mycomponent></mycomponent>
     </suspense>
   </errorboundary>

---

Leistungsüberlegungen

Während Lazy Loading die Leistung erheblich steigern kann, sollte es strategisch eingesetzt werden. Das Überladen einer Anwendung mit zu vielen verzögert geladenen Komponenten kann zu Latenz beim Navigieren zwischen Routen oder beim Rendern von Komponenten führen. Bringen Sie Lazy Loading immer mit der Benutzererfahrung in Einklang, um „zu viel“ Laden zur Laufzeit zu vermeiden.

---

Abschluss

Lazy Loading ist eine effektive Möglichkeit, die Leistung Ihrer React-Anwendungen zu verbessern. Indem Sie Komponenten nur dann laden, wenn sie benötigt werden, können Sie die anfängliche Bundle-Größe reduzieren, Bandbreite sparen und den Benutzern ein besseres Erlebnis bieten.

Die Implementierung von Lazy Loading ist mit React.lazy und Suspense unkompliziert, und in Kombination mit React Router können Sie Routen in Ihrer App effizient Lazy Loading durchführen. Nutzen Sie diese Techniken noch heute, um Ihre React-App zu optimieren!

---

Zusätzliche Ressourcen

• React Docs: Code-Splitting
• Webpack-Dokumente: Dynamische Importe

Das obige ist der detaillierte Inhalt vonReagieren Sie mit Lazy Loading auf die Leistung der App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!