Ist Ihre React-Anwendung zu langsam oder dauert das Laden zu lange? Wenn ja, möchten Sie möglicherweise eine Technik namens Code-Splitting verwenden. Diese Technik ist sehr effektiv bei der Verbesserung der Ladegeschwindigkeit und Leistung von React-Anwendungen. Aber was ist Code-Splitting? Und wie wird es gemacht?

Was ist Code-Splitting?

Eine typische React-Anwendung besteht aus Dutzenden von Komponenten (und Code). Die meisten dieser Komponenten müssen Sie jedoch nicht laden, wenn Sie sie zum ersten Mal laden. Beim Code-Splitting werden die verschiedenen Teile Ihrer Anwendung aufgeteilt und nur bei Bedarf geladen. Dies ist weitaus effizienter, als die gesamte Anwendung auf einmal zu laden.

Stellen Sie sich eine React-Anwendung vor, die drei Seiten hat: die Homepage, die About-Seite und die Produktseite. Wenn Sie sich auf der Startseite befinden, macht es keinen Sinn, die About-Seite oder die Produktseite zu laden. Weil Sie sich noch nicht wirklich auf diesen Seiten befinden. Die Idee der Codeaufteilung besteht darin, sicherzustellen, dass Sie den Code nur dann laden, wenn er benötigt wird.

Öffnen Sie eine Webseite in Ihrem Webbrowser und öffnen Sie dann die DevTools (Sie können auf Ihrer Tastatur auf F12 klicken, um sie in Google Chrome zu öffnen). Gehen Sie als Nächstes zur Registerkarte „Quelle“. Dort finden Sie den gesamten Code, der heruntergeladen wird, während Sie zur Seite navigieren. Ohne Codeaufteilung lädt der Browser beim ersten Laden der Seite alle Dateien in Ihrem Projekt herunter. Dies kann Ihre Website verlangsamen, wenn sie viele Dateien enthält.

Die Codeaufteilung ist besonders nützlich, wenn Ihr Projekt immer größer wird. Dies liegt daran, dass das Herunterladen der gesamten Anwendungsdateien auf einmal sehr lange dauern kann. Es wird also sehr vorteilhaft sein, das aufzuteilen.

Das Beste an der Codeaufteilung ist, dass Sie das Laden von Komponenten und Funktionen verzögern können. Unser Einführungsleitfaden zu ReactJS erklärt Komponenten und Funktionen ausführlich, falls Sie eine Auffrischung benötigen.

Funktionen zur Codeaufteilung: Verwenden des dynamischen Imports

Betrachten Sie die folgende Situation. Sie möchten, dass Ihre Homepage einen Button hat. Wenn Sie auf die Schaltfläche klicken, möchten Sie die Summe von 2 und 2 (also 4) melden. Sie erstellen also eine Home.js Komponente und definieren Sie die Ansicht Ihrer Homepage.

In diesem Fall haben Sie zwei Möglichkeiten. Zunächst können Sie den Code zum Hinzufügen der Zahlen oben im importieren Home.js Datei. Aber hier liegt das Problem. Wenn Sie die Funktion oben in die Datei importieren, wird der Code auch dann geladen, wenn Sie nicht auf die Schaltfläche geklickt haben. Ein besserer Ansatz wäre, das zu laden Summe() Funktion nur, wenn Sie auf die Schaltfläche klicken.

Um dies zu erreichen, müssen Sie einen dynamischen Import durchführen. Das bedeutet, dass Sie die importieren Summe() Funktion inline im Button-Element. Hier ist der Code dafür:

ExportStandardFunktionHeim() { 
zurückkehren ( 
"Heim"> 
Startseite</h1>
 {
importieren("../sum.js").Dann((Modul) => {
 Alarm(Modul.Summe(2, 2))
 })
 }}
 >
 Summiere beide Zahlen
 </button> 
 </div> 
 ); 
}

Jetzt lädt der Browser nur noch das herunter sum.js Modul, wenn Sie auf die Schaltfläche klicken. Dies verbessert die Ladezeit der Homepage.

Code-Splitting-Komponenten: Verwendung von React.lazy und Suspense

Sie können Komponenten in React mit aufteilen faul() Funktion. Der beste Ort für die Codeaufteilung wäre in Ihrem Router. Denn hier ordnen Sie Komponenten Routen in Ihrer Anwendung zu. Sie können unseren Leitfaden weiter lesen So erstellen Sie eine Single-Page-App mit React Router wenn Sie eine Auffrischung benötigen.

Nehmen wir an, Ihre App verfügt über eine Heim, Um, Und Produkte Komponente. Wenn Sie dabei sind Heim Komponente, es macht keinen Sinn, die zu laden Um Komponente oder die Produkte Komponente. Sie müssen sie also von der trennen Heim Route. Der folgende Code zeigt, wie das erreicht wird:

Zunächst müssen Sie die erforderlichen Funktionen und Komponenten aus importieren reagieren Und React-Router-Dom Module:

importieren { Routen, Route, Outlet, Link } aus„react-router-dom“;
importieren {faul, Spannung} aus"reagieren";

Als nächstes müssen Sie die Komponenten dynamisch mit importieren faul() Funktion:

const Zuhause = faul(() =>importieren("./components/Home"));
const Über = faul(() =>importieren("./components/About"));
const Produkte = faul(() =>importieren("./components/Products"));

Als nächstes richten Sie das Layout ein (Navigationsmenü). Benutzen Sie die Komponente, um die Komponente zu rendern, die der aktuellen Route entspricht (Heim, Um, oder Produkte Komponente):

FunktionNavWrapper() {
zurückkehren (
 <>

Sie können sehen, dass wir die Komponenten darin einpacken. Dies teilt React mit, dass alles drin ist kann möglicherweise träge geladen werden, was bedeutet, dass es möglicherweise nicht sofort verfügbar ist. Aus diesem Grund ist die Spannung Komponente hat eine zurückgreifen Eigentum. In unserem Fall ist der Wert ein einfacher Text mit der Aufschrift „Loading…“. Während also jede Seite heruntergeladen wird, wird auf dem Bildschirm die Meldung „Laden“ angezeigt.

Richten Sie abschließend die Route ein:

ExportStandardFunktionApp() {
zurückkehren (

"/" element={}>
"/" element={} />
"/Produkte" element={} />
"/um" element={} />
 </Route>
 </Routes>
 );
}

Wenn Sie nun die Homepage besuchen, lädt der Browser nur die Home.js Datei. Auf die gleiche Weise, wenn Sie auf klicken Um Klicken Sie im Navigationsmenü auf den Link, um die Seite „Info“ aufzurufen. Der Browser lädt nur die Seite „Info“. About.js Datei. Dies gilt auch für die Seite „Produkte“.

Bedingte Codeaufteilung

Oftmals haben Sie möglicherweise Inhalte auf Ihrer Seite, die nur für bestimmte Benutzer relevant sind. Beispielsweise können Sie auf Ihrer Homepage einen Abschnitt mit Admin-Daten einrichten, der ausschließlich Admin-Benutzern vorbehalten ist. Dies könnte ein Admin-Dashboard sein, das für Admin-Benutzer angezeigt wird, für normale Benutzer jedoch nicht.

In diesem Fall möchten Sie nicht jedes Mal alle Daten anzeigen. In diesem Fall können Sie die Code-Splitting-Technik verwenden, um sicherzustellen, dass diese Informationen nur angezeigt werden, wenn es sich bei dieser Person um einen Administrator handelt.

So würde dieser Code aussehen:

importieren {faul, Spannung} aus"reagieren";
const AdminData = lazy(() =>importieren("./AdminData"));
ExportStandardFunktionHeim() { 
const [isAdmin, setIsAdmin] = useState(FALSCH)
zurückkehren ( 

"Heim"> 
Startseite</h1>
 setIsAdmin(vorh => !prev)}>
 Admin umschalten
 </button> 

Laden...</h1>}>
 {isAdmin? <AdminData />: <h2> Nicht der Admin h2>} 
 </Suspense>
 </div> 
 ); 
}

Wenn Sie nun auf die Umschalttaste klicken, isAdmin wird eingestellt WAHR. Als Ergebnis zeigt die App das an das wird träge geladen. Wenn Sie jedoch kein Administrator sind, wird die App nie heruntergeladen AdminData.js weil es es nicht brauchen wird.

Die bedingte Codeaufteilung verwendet dasselbe Konzept wie Bedingtes Rendern in React.

Erweiterte Code-Splitting-Konzepte

Eine erweiterte Technik, die Sie beim Teilen von Code aktivieren können, sind Übergänge. Der useTransition() Mit Hook können Sie nicht dringende Aktualisierungen durchführen, die Ihre Benutzeroberfläche erst dann ändern, wenn die Aktualisierung abgeschlossen ist.

Zuerst importieren Sie den Hook:

importieren {useTransition} aus"reagieren"

Dann rufen Sie den Hook auf, der zurückkehrt steht noch aus Und startTransition:

const [isPending, startTransition] = useTransition()

Schließen Sie abschließend den Code zum Aktualisieren Ihres Status ein startTransition():

startTransition(() => {
 setIsAdmin((vorh) => !prev)
})

Jetzt zeigt Ihre tatsächliche Benutzeroberfläche den Fallback-Wert (den Ladetext) erst an, wenn der Browser den Übergang abgeschlossen hat. Das bedeutet, dass es darauf wartet, dass der Browser die gesamten Admin-Daten herunterlädt, bevor es versucht, überhaupt Daten anzuzeigen.

Andere Möglichkeiten zur Optimierung der Reaktionsleistung

In diesem Artikel wurde die Codeaufteilung als Methode zur Verbesserung der Leistung Ihrer React-Anwendungen behandelt. Es gibt aber auch mehrere andere Methoden, die Ihnen das erforderliche Wissen zum Erstellen robuster Anwendungen vermitteln können.