Wie React die Aufteilung des Seitencodes und das Laden bei Bedarf implementiert

Dieses Mal zeige ich Ihnen, wie Sie die Aufteilung des Seitencodes und das Laden bei Bedarf in React implementieren Werfen wir einen Blick darauf. Obwohl ich reaktionsbezogene Optimierungen durchgeführt habe, wie z. B. On-Demand-Laden, DLL-Trennung und serverseitiges Rendering, habe ich noch nie mit der Codeaufteilung begonnen. Ich habe es gestern nicht gemacht, als ich es lokal entwickelt habe. Ich habe es heute erneut durchgeführt und es wurde in der Online-Umgebung bereitgestellt.

Konfiguration ändern

Entwicklungsumgebung: webpack@v3, React-Router@v4Installationsabhängigkeiten:

$ yarn add babel-plugin-syntax-dynamic-import -dev

Installieren Sie Abhängigkeiten:

$ yarn add react-loadable

import React from 'react';
import { Icon } from 'antd';
const Loading = ({ pastDelay, timedOut, error }) => {
 if (pastDelay) {
 return <p><Icon type="loading" /></p>;
 } else if (timedOut) {
 return <p>Taking a long time...</p>;
 } else if (error) {
 return <p>Error!</p>;
 }
 return null;
};

import React from 'react';
import Loadable from 'react-loadable';
import { Route, Switch } from 'react-router-dom';
const Home = Loadable({
 loader: () => import('../Home'),
 loading: Loading,
 timeout: 10000
});
const EditArticle = Loadable({
 loader: () => import('../EditArticle'),
 loading: Loading,
 timeout: 10000
});
...
<Switch>
 <Route exact path="/home" component={Home} />
 <Route path="/editarticle" component={EditArticle} />
</Switch>

Eintragsdatei laden app.js, andere Das Skript wird über diese Datei geladen, wenn es auf die entsprechende Seite zugreift.

Überprüfungsergebnisse

Nachdem Sie die statischen Ressourcen auf CDN hochgeladen haben, laden Sie app.css und app.js auf die Seite und greifen Sie nach der Ausführung darauf zu Jede Seite lädt nacheinander das entsprechende Skript. Das Ergebnis ist wie in der Abbildung dargestellt:

Ein weiterer Vorteil dieser Vorgehensweise besteht darin, dass der Code anderer Seiten unverändert bleibt, wenn wir nur den Geschäftscode einiger Seiten im Projekt ändern, sodass zu diesem Zeitpunkt andere Seiten den Client-Cache verwenden gemacht worden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP-Chinesisch Webseite! Empfohlene Lektüre:

So verwenden Sie den Knotenserver für domänenübergreifend Entwicklung in der lokalen Entwicklung

Das obige ist der detaillierte Inhalt vonWie React die Aufteilung des Seitencodes und das Laden bei Bedarf implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!