Details zum Lazy Loading im Vue-Routing

Details zum Lazy Loading im Vue-Routing

1. Was ist Lazy Loading von Routen?

Offizielle Erklärung:

  • Beim Bündeln Ihrer App kann das JavaScript Paket sehr groß werden und sich auf das Laden der Seite auswirken.
  • Es wäre effizienter, wenn wir die den verschiedenen Routen entsprechenden Komponenten in verschiedene Codeblöcke aufteilen und dann beim Zugriff auf die Route die entsprechenden Komponenten laden könnten.

Was der Beamte meinte

  • Zunächst einmal wissen wir, dass in der Route normalerweise viele verschiedene Seiten definiert sind
  • Wo wird diese Seite am Ende verpackt? Im Allgemeinen wird es in einer js-Datei abgelegt
  • Aber wenn man bei so vielen Seiten alle Dateien in eine JS-Datei packt, wird die Seite zwangsläufig sehr groß.
  • Wenn wir diese Seite auf einmal vom Server anfordern, kann dies einige Zeit dauern und es kann sogar zu einer kurzen Leere auf dem Computer des Benutzers kommen.
  • Wie kann man dies vermeiden? Lazy Loading von Routen verwenden

Was bewirkt das verzögerte Laden von Routen?

Die Hauptfunktion des Lazy Loading von Routen besteht darin, die den Routen entsprechenden Komponenten in JS-Codeblöcke zu packen und die entsprechenden Komponenten nur dann zu laden, wenn auf die Route zugegriffen wird.

2. Verwendung von Lazy Loading von Routen

Bevor wir es verwenden, schauen wir uns an, wie der Originalcode die Route lädt

importiere Vue von „vue“;
importiere VueRouter von „vue-router“;
Home aus "@/views/Home" importieren;
importiere Info aus "@/views/Info";
Benutzer aus "@/views/User" importieren;

Vue.use(VueRouter);

const Routen = [
  {
    Weg: "/",
    Name: "Home",
    Komponente: Home,
  },
  {
    Pfad: "/about",
    Name: "Über",
    Komponente: Über
  },
  {
    Pfad: "/user/:userId",
    Name: "Benutzer",
    Komponente: Benutzer
  }
];

Wir können sehen, dass wir die Komponenten, die der Route entsprechen, von Anfang an importiert haben. Wenn viele Komponenten importiert werden müssen, wird die Ladeseite relativ langsam sein. Schauen wir uns die auf diese Weise gepackten Dateien an.

Wir können sehen, dass auf diese Weise nur zwei JS-Dateien gepackt sind. Wenn wir die Seite später laden, müssen wir alle zwei Dateien laden, bevor die Seite angezeigt wird. Wenn die Codemenge zu groß ist, wird die Seitenreaktion langsam sein, was zu einer sehr schlechten Benutzererfahrung führt.

Als nächstes verwenden wir Lazy Loading von Routen

importiere Vue von „vue“;
importiere VueRouter von „vue-router“;

Vue.use(VueRouter);

// Neuen Code für verzögertes Laden der Route hinzufügen const Home = () => import('../views/Home')
const Über = () => import('../views/Über')
const Benutzer = () => import('../views/Benutzer')

const Routen = [
  {
    Weg: "/",
    Name: "Home",
    Komponente: Home,
  },
  {
    Pfad: "/about",
    Name: "Über",
    Komponente: Über
  },
  {
    Pfad: "/user/:userId",
    Name: "Benutzer",
    Komponente: Benutzer
  }
];

Wir sehen, dass an der Routing-Konfiguration nichts geändert werden muss. Sie können sie einfach wie gewohnt verwenden. Deklarieren Sie vorher einfach eine Variable und verwenden Sie die Pfeilfunktion in der Variablen, um die entsprechende Komponente zu importieren. Die Verwendung ist sehr einfach.

Die mit Lazy Loading gepackte Dateistruktur von Routen sieht wie folgt aus:

Wir können sehen, dass es 3 weitere JS-Dateien gibt als bei der ursprünglichen Methode. Dies liegt daran, dass die 3 Komponenten in unserem obigen Code Route Lazy Loading verwenden. Diese 3 JS-Dateien werden nur geladen, wenn auf die Route zugegriffen wird, was viel Ladezeit sparen kann.

Daher empfehlen wir, zum Laden von Routen Lazy Loading zu verwenden.

Dies ist das Ende dieses Artikels über die Details zum Lazy Loading von Vue-Routing. Weitere verwandte Inhalte zum Lazy Loading von Vue-Routing finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Lazy Loading beim Vue-Router-Routing und 3 Möglichkeiten zur Implementierung
  • Beispiele für 3 Möglichkeiten zum Implementieren des Lazy Loading von Routen in Vue
  • So benennen Sie Webpack-Chunks im Vue-Routing Lazy Loading
  • So implementieren Sie das verzögerte Laden von Routen und Komponenten in Vue
  • Implementierung des Lazy Loading-Routings des Vue-Routers (Lösung des langsamen ersten Ladens des Vue-Projekts)
  • Analyse des Prinzips der Verwendung von Importen zum verzögerten Laden von Routen in Vue

<<:  Detaillierte Erläuterung der Startreihenfolge des Docker-Containers mithilfe eines Shell-Skripts

>>:  CSS3 erstellt eine Webanimation, um einen springenden Balleffekt zu erzielen

Artikel empfehlen

So stellen Sie MySQL so ein, dass die Groß-/Kleinschreibung nicht beachtet wird

MySQL auf Groß-/Kleinschreibung eingestellt Windo...

Analysieren Sie CSS, um die Farbfunktion des Bildthemas zu extrahieren (Tipps)

Hintergrund Alles begann, als ein Klassenkamerad ...

Tutorial zur Installation, Bereitstellung und Verwaltung von KVM-Virtualisierung

Inhaltsverzeichnis 1.kvm-Bereitstellung 1.1 KVM-I...

Installation und Verwendung von TypeScript und grundlegende Datentypen

Der erste Schritt besteht darin, TypeScript globa...

JavaScript Voranalyse, Objektdetails

Inhaltsverzeichnis 1. Voranalyse 1. Vorabanalyse ...

3 Möglichkeiten zum Hinzufügen von Links zu HTML-Auswahl-Tags

Der Erste : Code kopieren Der Code lautet wie folg...

Unterschied zwischen varchar- und char-Typen in MySQL

Inhaltsverzeichnis vorgenannt VARCHAR-Typ VARCHAR...

Beispielcode für CSS3 zum Erzielen eines Bildlaufleisten-Verschönerungseffekts

Der spezifische Code lautet wie folgt: /*Breite d...

Beispiele für die Verwendung der Operatoren && und || in JavaScript

Inhaltsverzeichnis Vorwort && Operator ||...

Einführung in Who-Befehlsbeispiele in Linux

Über wen Zeigt die am System angemeldeten Benutze...