Explication détaillée du chargement paresseux de vue-router (avec code)

Cette fois, je vous apporte une explication détaillée du chargement paresseux de vue-router (avec code). Quelles sont les précautions lors de l'utilisation du chargement paresseux de vue-router. Voici des cas réels, jetons un coup d'œil.

Tous ceux qui ont utilisé vue-router savent qu'il peut implémenter le chargement paresseux du module js, c'est-à-dire charger le fichier script js du module correspondant uniquement lorsque cela est nécessaire pour accélérer l'affichage de la page d'accueil. Par exemple, ce n'est que lorsque l'utilisateur clique pour la première fois sur un certain bouton ou menu « Informations utilisateur » que le bouton sera téléchargé ?

Contient le composant js du module "Informations utilisateur".

La mise en œuvre du lazyload repose sur la fonction du mode AMD

fonction sous webpack. Webpack générera un fichier js indépendant à partir du fichier require asynchrone Lors de l'appel, il téléchargera le js de manière asynchrone et l'exécutera une fois terminé. Le code clé implémenté dans le projet de développement est :

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

et exécuté. Il y a un délai lors du téléchargement de js depuis Internet Pendant cette période, l'interface utilisateur ne répond pas du tout, ce qui donne l'impression aux utilisateurs que cliquer dessus est inefficace et ils cliquent souvent à nouveau. Cela est particulièrement vrai lorsque le fichier js est volumineux et que la vitesse du réseau est lente. Par conséquent, il est nécessaire d’ajouter une invite de chargement Loading dans ce processus. Analysons cette ligne de code :

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

une fois celle-ci terminée. Il nous suffit de l'encapsuler, d'afficher le chargement avant l'exécution de require, puis de masquer le chargement lorsque le rappel est terminé et exécuté, et cette exigence sera remplie. Comme suit :

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

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

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!