Verwendung des Vue Router Lazy-Loading-Routings und seine Auswirkung auf die Verbesserung der Seitenleistung-View.js-php.cn

Verwendung des Vue Router Lazy-Loading-Routings und seine Auswirkung auf die Verbesserung der Seitenleistung

WBOY

Freigeben： 2023-09-15 14:10:52

Original

693 Leute haben es durchsucht

Vue Router Lazy-Loading路由的使用方法以及它对页面性能的改进效果

So verwenden Sie Vue Router Lazy-Loading-Routing und seine Auswirkung auf die Verbesserung der Seitenleistung

Da Front-End-Anwendungen immer komplexer werden, wird die Verwaltung des Front-End-Routings immer wichtiger. Als Mainstream-Front-End-Framework bietet der integrierte Vue-Router von Vue.js sehr leistungsstarke Routing-Management-Funktionen, die uns beim Erstellen flexibler und effizienter Single-Page-Anwendungen helfen können. Unter diesen ist Vue Router Lazy-Loading eine sehr wichtige und praktische Funktion. Sie kann Routing-Komponenten bei Bedarf laden und so die Seitenleistung und das Benutzererlebnis verbessern.

In früheren Entwicklungen laden wir normalerweise alle Routing-Komponenten auf einmal, wenn die Anwendung gestartet wird. Obwohl diese Methode einfach und praktisch für die Entwicklung ist, führt sie bei komplexeren Anwendungen und vielen Routing-Komponenten dazu, dass die Ladezeit während der Initialisierung zu lang wird, wodurch die Ladegeschwindigkeit der Seite verringert wird. Um dieses Problem zu lösen, führt Vue Router das Konzept des Lazy-Loading ein, das die erforderlichen Routing-Komponenten bei Bedarf lädt.

Die Verwendung von Lazy-Loading von Vue Router ist sehr einfach. Sie müssen beim Definieren der Route nur die Komponenteneigenschaften als Funktion angeben, und die Funktion gibt eine import-Anweisung zurück. Hier ist ein Beispielcode: import语句即可。下面是一个示例代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

Nach dem Login kopieren

在上面的示例中，我们定义了两个路由，一个是Home，一个是About。与以往不同的是，这次我们不再通过直接指定组件的方式来定义路由的component属性，而是使用一个函数，并且在函数体内使用import语句来异步加载路由组件。

在页面中使用Lazy-Loading之后，我们可以明显地感受到页面性能上的改进。当用户访问某个路由时，该路由对应的组件将会被动态加载，而不是在应用初始化时一次性加载所有路由。这样做的好处是，可以减少首次加载所需要的时间，并且降低网络请求的数量，从而提升页面的加载速度。

另外，Lazy-Loading还可以结合Webpack的Code Splitting功能，将路由组件打包成独立的文件，从而进一步提升页面的加载速度。Webpack会根据我们定义的路由结构，自动将路由组件打包成不同的文件，这样每个页面实际需要加载的资源就会更少，从而提高了页面的并行加载能力。

在使用Vue Router Lazy-Loading时，我们还可以进行一些更高级的配置。例如，我们可以通过webpackChunkName来指定每个路由组件打包后的文件名，这样有助于我们更好地区分和管理路由组件。下面是一个示例代码：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/Home')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '@/views/About')
  }
]

Nach dem Login kopieren

在上面的示例中，我们使用了webpackChunkNamerrreee

Im obigen Beispiel haben wir zwei Routen definiert, eine ist Home und die andere ist About. Der Unterschied zur Vergangenheit besteht darin, dass wir dieses Mal das component-Attribut der Route nicht mehr durch direkte Angabe der Komponente definieren. Stattdessen verwenden wir eine Funktion und verwenden import im Funktionskörper. Anweisung zum asynchronen Laden von Routing-Komponenten.

Nachdem wir Lazy-Loading auf der Seite verwendet haben, können wir offensichtlich die Verbesserung der Seitenleistung spüren. Wenn ein Benutzer auf eine Route zugreift, werden die der Route entsprechenden Komponenten dynamisch geladen, anstatt beim Initialisieren der Anwendung alle Routen auf einmal zu laden. Dies hat den Vorteil, dass die für den ersten Ladevorgang erforderliche Zeit verkürzt und die Anzahl der Netzwerkanfragen reduziert werden kann, wodurch die Ladegeschwindigkeit der Seite verbessert wird. 🎜🎜Darüber hinaus kann Lazy-Loading auch mit der Code-Splitting-Funktion von Webpack kombiniert werden, um Routing-Komponenten in unabhängige Dateien zu packen und so die Seitenladegeschwindigkeit weiter zu verbessern. Webpack packt Routing-Komponenten basierend auf der von uns definierten Routing-Struktur automatisch in verschiedene Dateien, sodass jede Seite tatsächlich weniger Ressourcen laden muss, wodurch die parallele Ladefähigkeit der Seite verbessert wird. 🎜🎜Bei Verwendung von Vue Router Lazy-Loading können wir auch einige erweiterte Konfigurationen durchführen. Beispielsweise können wir den gepackten Dateinamen jeder Routing-Komponente über webpackChunkName angeben, was uns hilft, Routing-Komponenten besser zu unterscheiden und zu verwalten. Das Folgende ist ein Beispielcode: 🎜rrreee🎜Im obigen Beispiel verwenden wir den Kommentar webpackChunkName, um den Namen der gepackten Datei anzugeben, sodass in der gepackten Datei die entsprechende Antwort generiert wird auf den Namen der Kommentardatei. Auf diese Weise können wir jede Routing-Komponente während der Entwicklung und beim Debuggen leichter unterscheiden und aufrufen. 🎜🎜Im Allgemeinen ist Vue Router Lazy-Loading eine sehr praktische Funktion, die uns helfen kann, die Seitenleistung und das Benutzererlebnis zu optimieren. Durch das Laden von Routing-Komponenten bei Bedarf können wir die für den ersten Ladevorgang erforderliche Zeit verkürzen und die parallelen Ladefunktionen der Seite verbessern. Gleichzeitig können wir auch die Code-Splitting-Funktion von Webpack kombinieren, um die Seitenladegeschwindigkeit weiter zu verbessern. In der tatsächlichen Entwicklung sollten wir diese Funktion vollständig nutzen, um Benutzern ein besseres Seitenladeerlebnis zu bieten. 🎜

Das obige ist der detaillierte Inhalt vonVerwendung des Vue Router Lazy-Loading-Routings und seine Auswirkung auf die Verbesserung der Seitenleistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!