Lazy Loading für grundlegendes Vue-Routing im Front-End

Warum Routing für Lazy Loading verwenden?

Die erste Bildschirmkomponente wird schneller geladen und löst das Problem des weißen Bildschirms. Wie das Sprichwort sagt: Laden Sie sie, wenn Sie sie benötigen, und legen Sie sie beiseite, wenn Sie sie nicht benötigen.

Lazy-Loading-Definition 

Lazy Loading bedeutet einfach Lazy Loading oder On-Demand-Loading, also Laden bei Bedarf.

 verwenden

Es gibt zwei häufig verwendete Lazy-Loading-Methoden: die Verwendung asynchroner Vue-Komponenten und den Import (und require.ensure) in ES

1. Lazy Loading wird nicht verwendet. Der Routing-Code in Vue lautet wie folgt

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'

 Vue.use(Router)

 export default new Router({
    mode：'hash'
    routes: [
       {
         path: '/',
         name: 'HelloWorld',
         component:HelloWorld
       }
     ]
})

Hinweis: Modus ist der Parameterübergabemodus. Bei Verwendung von Hash gibt es #. # ist das Hash-Symbol. Der chinesische Name ist das Hash-Symbol oder der Ankerpunkt. Der Wert nach dem Hash-Symbol wird als Hash-Wert bezeichnet. Es gibt einen weiteren Verlauf, der nicht verfügbar ist

Der Routing-Hash-Modus wird implementiert, indem das Fenster zum Abhören des onhashchange-Ereignisses verwendet wird. Dies bedeutet, dass der Hash-Wert zur Steuerung der Aktionen des Browsers verwendet wird und keine Auswirkungen auf den Server hat. Die HTTP-Anfrage enthält den Hash-Wert nicht Gleichzeitig wird bei jeder Änderung des Hash-Werts ein Datensatz zum Zugriffsverlauf des Browsers hinzugefügt. Mit der Schaltfläche „Zurück“ kehren Sie zur vorherigen Position zurück. Daher ändert sich der Hash-Modus basierend auf dem Hash-Wert und unterschiedliche Daten am angegebenen DOM-Speicherort werden basierend auf unterschiedlichen Werten gerendert.

2. Asynchrone Vue-Komponenten implementieren verzögertes Laden

　　Die Methode lautet wie folgt: Komponente: auflösen=>(require(['Adresse der Route, die geladen werden muss']), auflösen)

import Vue from 'vue'
import Router from 'vue-router'
　　/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})

3. Die von ES vorgeschlagene Importmethode (am häufigsten verwendet, empfohlen von der offiziellen Website)

Die Methode lautet wie folgt: const HelloWorld = () => import ('Adresse des Moduls, das geladen werden muss')

　　　　(Ohne { } bedeutet es direkte Rückkehr)

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

Erweiterung: Lazy Loading von Komponenten (identisch mit Lazy Loading von Routen)

1. Die ursprüngliche Schreibmethode in der Komponente

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
import One from './one'
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

2. Importmethode

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
const One = ()=>import("./one");
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

3. Asynchrone Methode

<template>
  <div class="hello">
  <One-com></One-com>
  1111
  </div>
</template>

<script>
export default {
  components:{
    "One-com":resolve=>require(['./one'],resolve)
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

Zusammenfassen

Zwei häufig verwendete Lazy-Loading-Methoden für Routing und Komponenten:

1. Asynchrone Vue-Komponenten implementieren verzögertes Laden von Routen

　　Komponente: auflösen => require(['Die Adresse der Route, die geladen werden muss'], auflösen)

       require('name'): ist die Form des synchronen Ladens von Modulen; require(['name1', 'name2']): ist die Form des asynchronen Ladens von Modulen;

2. Von es vorgeschlagener Import (diese Methode wird empfohlen)

　　const HelloWorld = ()=>import('Adresse des Moduls, das geladen werden muss')

       Die Importfunktion unterstützt das dynamische Laden von Modulen und gibt ein Promise-Objekt zurück.