Heim >Web-Frontend >js-Tutorial >Detaillierte Erklärung des verzögerten Ladens von Vue-Routern (mit Code)

Detaillierte Erklärung des verzögerten Ladens von Vue-Routern (mit Code)

php中世界最好的语言
php中世界最好的语言Original
2018-04-20 11:24:212458Durchsuche

Dieses Mal bringe ich Ihnen eine detaillierte Erklärung zum verzögerten Laden von Vue-Routern (mit Code). Jeder, der den Vue-Router verwendet hat, weiß, dass er das verzögerte Laden von Modul-JS implementieren kann, dh die JS-Skriptdatei des entsprechenden Moduls nur bei Bedarf laden kann, um die Anzeige der Homepage zu beschleunigen. Wird die Schaltfläche beispielsweise nur dann heruntergeladen, wenn der Benutzer zum ersten Mal auf eine bestimmte Schaltfläche oder ein bestimmtes Menü „Benutzerinformationen“ klickt?

Enthält die js-Komponente des Moduls „Benutzerinformationen“.

Die Implementierung von Lazy Loading basiert auf der Funktion des AMD-Modus

require

Funktion

unter Webpack. Webpack generiert eine unabhängige JS-Datei aus der asynchronen Anforderungsdatei. Beim Aufruf lädt es das JS asynchron herunter und führt es nach Abschluss aus. Der im Entwicklungsprojekt implementierte Schlüsselcode lautet: Hier gibt es jedoch ein Problem: Vom Klicken des Benutzers auf das Menü „Benutzerinformationen“ bis zum Herunterladen der js-Datei

und ausgeführt. Beim Herunterladen von js aus dem Internet kommt es zu einer Zeitverzögerung. Während dieser Zeit reagiert die Benutzeroberfläche überhaupt nicht, sodass Benutzer das Gefühl haben, dass das Klicken darauf wirkungslos ist und sie häufig erneut klicken. Dies gilt insbesondere, wenn die JS-Datei groß und die Netzwerkgeschwindigkeit langsam ist. Daher ist es notwendig, in diesem Prozess eine Loading-Ladeaufforderung hinzuzufügen.
const basicInfo = {
  path: '/user',
  component: resolve => require(['./basicInfo.vue'], resolve) 
}
//然后将这个basicInfo加入路由表中

Lassen Sie uns diese Codezeile analysieren:

Es handelt sich um eine Funktion, die den Anforderungsprozess ausführt und nach Abschluss die Rückruffunktion „resolve“

aufruft. Wir müssen es nur kapseln, Loading anzeigen, bevor die Anforderung ausgeführt wird, und Loading dann ausblenden, wenn das Laden abgeschlossen ist und der Rückruf ausgeführt wird, und diese Anforderung wird erfüllt. Wie folgt:

resolve => require(['./basicInfo.vue'], resolve)

Das Ein- und Ausblenden des Ladecodes kann entsprechend Ihrem eigenen UI-Framework gehandhabt werden. Zum Beispiel element-ui:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
const basicInfo = {
  path: '/user',
  component: resolve => {
    [显示Loading]
    require(['./basicInfo.vue'], component => {
      [隐藏Loading]
      resolve(component)
    })
  }
};

Empfohlene Lektüre:

import { Loading } from 'element-ui';
var unique;
export default {
  show() {
    let opt = {body: true, text: 'Loading...'};
    if(!unique) unique = Loading.service(opt);
  },
  resolve(resolve) {
    return function (component) {
      if (unique) {
        unique.close();
        unique = null;
      }
      resolve(component)
    }
  }
}
const basicInfo = {
  path: '/user',
  component: resolve => {
    spinRoute.show();
    require(['./basicInfo.vue'], spinRoute.resolve(resolve))
  }
};

So aktualisieren Sie vue cli auf webapck4

Was Anfänger über vue-cli 3.0 wissen müssen

D3.js implementiert dynamischen Wähleffekt

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des verzögerten Ladens von Vue-Routern (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn