Optimieren Sie das Lazy Loading des Vue-Routers

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Optimierung des verzögerten Ladens von Vue-Router vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 dann lädt, wenn dies erforderlich ist, um die Anzeige zu beschleunigen der Homepage. Beispielsweise wird die js-Komponente des Moduls „Benutzerinformationen“ nur heruntergeladen, wenn ein Benutzer zum ersten Mal auf eine Schaltfläche oder ein Menü „Benutzerinformationen“ klickt.

Die Implementierung von Lazy Loading basiert auf der Funktion der AMD-Modus-Anforderungsfunktion 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:

const basicInfo = {
  path: '/user',
  component: resolve => require(['./basicInfo.vue'], resolve) 
}
//然后将这个basicInfo加入路由表中

Hier gibt es jedoch ein Problem: Von dem Zeitpunkt an, an dem der Benutzer auf das Menü „Benutzerinformationen“ klickt, bis zu dem Zeitpunkt, an dem die js-Datei heruntergeladen und ausgeführt wird, gibt es ein Zeitverzögerung beim Herunterladen der JS aus dem Netzwerk. 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 erforderlich, in diesem Prozess eine Loading-Ladeaufforderung hinzuzufügen.

Wir analysieren diese Codezeile:

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

Es handelt sich um eine Funktion, die den Anforderungsprozess ausführt und nach Abschluss die Auflösungsrückruffunktion aufruft. Wir müssen es nur kapseln, Loading anzeigen, bevor die Anforderung ausgeführt wird, und Loading dann ausblenden, wenn der Rückruf abgeschlossen und ausgeführt ist, und diese Anforderung wird erfüllt. Wie folgt:

const basicInfo = {
  path: '/user',
  component: resolve => {
    [显示Loading]
    require(['./basicInfo.vue'], component => {
      [隐藏Loading]
      resolve(component)
    })
  }
};

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

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))
  }
};

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!

Empfohlene Lektüre:

So veröffentlichen Sie eine Vue+Todo-List-Anwendung

Verwenden Sie mint-ui, um es zu aktivieren die Mobiltelefon-Level-3-Verknüpfung

Das obige ist der detaillierte Inhalt vonOptimieren Sie das Lazy Loading des Vue-Routers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!