Faule Ladenrouten in Vue mit dynamischen Kommentaren von Webpack

Der JavaScript -Routing -Mechanismus gibt normalerweise an, welches relative URL -Muster welcher Komponentenrendern entspricht. Zum Beispiel sollte der /about Pfad gerendert werden<about></about> Komponenten. In diesem Artikel wird erläutert, wie dies mit einem faulen Laden in Vue/Vue -Router erreicht und so genau wie möglich erledigt wird.

Ein Code -Repository, der all diesen Artikel enthält, finden Sie in GitHub.

Möglicherweise haben Sie Vue Routen (URLs) gesehen:

 Vue aus "Vue" importieren
Importieren Sie Vuerouter aus 'Vue-Router'

Home von '../views/home.vue' importieren '
Importieren von '../views/about.vue' '
Login aus '../views/login.vue' importieren '

Vue.use (vuerouter)

const Routes = [
  {Pfad: '/', Name: 'Home', Komponente: Home},
  {Pfad: '/über', Name: 'About', Komponente: About},
  {Pfad: '/login', Name: 'Login', Komponente: Login}
]

const router = neuer vuerouter ({{
  Routen
})

Standard -Router exportieren

Dieser Code lädt in / Pfad<home></home> Komponente, Laden in /about den Pfad<about></about> Komponente, Laden in /login Pfad<login></login> Komponenten.

Diese Methode zur Codesegmentierung wird jedoch nicht gut erledigt, da alle drei Komponenten zusammen verpackt sind, anstatt bei Bedarf dynamisch zu laden.

Hier ist eine Verbesserung, die dynamische Importanweisungen und Webpack -Chunk -Namen für die Codesegmentierung verwendet:

 const Routes = [
  {
    Weg: '/',
    Name: 'Zuhause',
    Komponente: () => import (/ * webpackChunkname: "home" */'../views/home.vue'))
  },
  {
    Pfad: '/über',
    Name: 'Über',,
    Komponente: () => import (/ * webpackchunkname: "über" */'../views/about.vue'))
  },
  {
    Pfad: '/Login',
    Name: 'Login',
    Komponente: () => Import (/ * WebPackChunkName: "Login" */'../views/login.vue'))
  }
]

Dieser Ansatz ist gut, ohne offensichtliche Nachteile, nur leicht lang und wiederholt. Lassen Sie uns als guter Entwickler etwas Abstraktion durchführen, um es zu verbessern, ein Array zu verwenden und .map -Operationen:

 const rayoptions = [
  {Pfad: '/', Name: 'Home'},
  {Pfad: '/über', Name: 'About'},
  {Pfad: '/login', Name: 'Login'}
]

const Routes = RouteOptions.map (Route => {
  zurückkehren {
    ...Route,
    Komponente: () => import (`@/views/$ {route.name} .vue`)
  }
})

const router = neuer vuerouter ({{
  Routen
})

Jetzt haben wir die Verwendung von component reduziert und stattdessen den Routennamen als Argument für die Importfunktion verwendet.

Aber was ist, wenn wir den Chunk -Namen festlegen wollen?

Soweit ich das beurteilen kann, können Sie in JavaScript keine dynamischen Annotationen verwenden, ohne dass eine Art Build -Schritt. In diesem Fall opfern wir Kommentare (WebPackChunkname), um die Menge des Code -Schreibens zu verringern. Es hängt alles davon ab, welche Methode Sie bevorzugen.

Nur ein Scherz, lass uns dieses Problem lösen.

Ab WebPack 2.6.0 werden Platzhalter [index] und [request] unterstützt, was bedeutet, dass wir den Namen des generierten Chunk so festlegen können:

 // ...

const rayoptions = [
  {Pfad: '/', Name: 'Home'},
  {Pfad: '/über', Name: 'About'},
  {Pfad: '/login', Name: 'Login'}
]

const Routes = RouteOptions.map (Route => {
  zurückkehren {
    ...Route,
    Komponente: () => import (/ * webpackChunkName: "[request]" */`../ views/$ {route.name} .vue`)
  }
})

const router = neuer vuerouter ({{
  Routen
})

sehr gut! Jetzt haben wir alle Funktionen sowie dynamische Laderouten mit den genannten Teilen. Es funktioniert auf Vue 2 und Vue 3. Sie können es überprüfen, indem Sie npm run build im Terminal ausführen:

Wir können jedoch auch noch einen Schritt weiter gehen, indem wir faule Lastrouten in benannte Chunks anstelle von einzelnen Komponenten gruppieren. Zum Beispiel könnten wir einige Gruppen erstellen, die die wichtigsten Komponenten und den Rest in einer anderen "weniger wichtigen" Gruppe zusammenstellen. Wir müssen nur webpackChunkName aktualisieren, um den zuvor verwendeten Platzhalter [request] zu ersetzen:

 const Routes = [
  {
    Weg: "/",
    Name: "Home",
    Komponente: () =>
      import (/ * webpackchunkname: "
  },
  {
    Pfad: "/über",
    Name: "Über",,
    Komponente: () =>
      import (/ * webpackchunkname: "
  },
  {
    Pfad: "/login",
    Name: "Login",
    Komponente: () =>
      import (/ * webpackchunkname: "notomportant" */"../views/login.vue"))
  },
  {
    Pfad: "/Kontakt",
    Name: "Kontakt",
    Komponente: () =>
      import (/ * webpackchunkname: "notomportant" */"../views/contact.vue"))
  }
];

Jetzt sind unsere vier Komponenten in zwei separate Stücke zusammengefasst.

Das war's! Eine Technik für faule Laderouten in Vue und einige Vorschläge, wie man sie zum Bauzeit nennt und gruppiert.

Das obige ist der detaillierte Inhalt vonFaule Ladenrouten in Vue mit dynamischen Kommentaren von Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!