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

require

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 :

Mais il y a un problème ici : à partir du moment où l'utilisateur clique sur le menu "Informations utilisateur", jusqu'au moment où le fichier js

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

est téléchargé

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 :

C'est une fonction qui exécute le processus require, puis appelle la fonction de rappel solve

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 :

L'affichage et le masquage du code de chargement peuvent être gérés selon votre propre cadre d'interface utilisateur. Par exemple, element-ui :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

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 :

Comment mettre à niveau vue cli vers webapck4

Ce que les novices doivent savoir sur vue-cli 3.0

D3.js implémente l'effet de numérotation dynamique

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!