So verwenden Sie Lazy Loading in React, um die Ladezeit des ersten Bildschirms zu verkürzen

Zurzeit schreibe ich ein React-Ant-Admin-Integrationsframework für den schnellen Start von Mid- und Back-End-Projekten. Dabei treten zahlreiche Probleme auf, das wichtigste davon dürfte die Zugriffsgeschwindigkeit sein. Ich frage mich nur, ob React das Lazy Loading von Routen wie Vue nutzen kann, um die zum Rendern der Homepage benötigte Zeit zu reduzieren.

Also habe ich ein sehr nützliches Rad gefunden: @loadable/component

verwenden

Installieren

npm installiere @loadable/component -D
# oder Garn verwenden
Garn hinzufügen @loadable/component -D

Wie wird es beim Routing verwendet?

Schreiben Sie in die Datei src/router/index.js Folgendes:

importiere React von „react“;
importiere { Route, Switch } von „react-router-dom“;
importiere RouterList aus "./routes";

const router = () => {
  zurückkehren (
    <Schalter>
      {routerList.map((item) => {
        const { Komponente: Komponente, Schlüssel, Pfad, ...itemProps } = Element;
        zurückkehren (
          <Route
            genau={true}
            Schlüssel={Schlüssel}
            Pfad={Pfad}
            rendern={(alleProps) => <Komponente {...alleProps} {...itemProps} />}
          />
        );
      })}
    </Schalter>
  );
};

Standardrouter exportieren;

Schreiben Sie in src/router/routes.js Folgendes:

importiere ladbares Objekt aus „@loadable/component“;

const Error404 = loadable(() => import("@/pages/err/404")); // Entsprechende Datei src/pages/err/404.js
const Home = ladbar(() => import("@/pages/home"));
const Demo = ladbar(() => import("@/pages/demo"));

const routerList = [
  {
    Weg: "/",
    Taste: "Home",
    Komponenten: Home,
  },
  {
    Pfad: "/demo",
    Schlüssel: "Demo",
    Komponenten: Demo,
  },
  {
    Weg: "*",
    Schlüssel: "404",
    Komponenten: Fehler404,
  },
];

Standard-Routerliste exportieren;

Schreiben Sie in die Datei src/App.js Folgendes:

importiere React von „react“;
importiere { BrowserRouter als Router } von „react-router-dom“;
Routen von "./router" importieren;
exportiere Standardfunktion App() {
  zurückkehren (
    <Router>
      <Routen />
    </Router>
  );
}

An dieser Stelle können Sie auf der Seite prüfen, ob die js-Datei beim Routenwechsel dynamisch geladen wird. Wenn die JS-Datei nach dem Routenwechsel geladen wird, bedeutet dies, dass die Lazy-Loading-Route erfolgreich war!

Vergleich der Ladegeschwindigkeiten

Vor der Verwendung von @loadable/component betrug die Serverbandbreite 1 M, die GZIP-Komprimierung, die Dateigröße etwa 2 MB und die Ladezeit der Serveranforderung etwa 4,3 s.

Verwenden Sie Routing Lazy Loading. Die Serverbandbreite beträgt 1 M, die GZIP-Komprimierung, die Dateigröße beträgt etwa 1 MB und die Ladezeit der Serveranforderung beträgt etwa 1 Sekunde.

Oben finden Sie Einzelheiten dazu, wie React Lazy Loading verwendet, um die Ladezeit des ersten Bildschirms zu verkürzen. Weitere Informationen dazu, wie React Lazy Loading die Ladezeit verkürzen kann, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!