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!