Ajouter des invites de chargement lors du chargement paresseux de vue-router pour améliorer l'expérience utilisateur

Cette fois, je vais vous présenter comment ajouter des invites de chargement lors du chargement paresseux de vue-router pour améliorer l'expérience utilisateur. Quelles sont les précautions qui peuvent être ajoutées lors du chargement paresseux de vue-router pour améliorer l'expérience utilisateur. . Voici des cas pratiques, jetons un coup d'oeil.

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 lorsqu'un utilisateur clique pour la première fois sur un bouton ou un menu « Informations utilisateur » que le composant js du module « Informations utilisateur » est téléchargé.

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 :

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

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 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 :

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

C'est une fonction qui exécute le processus require, puis appelle la fonction de rappel solve 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 chargement est terminé et que le rappel est exécuté, et cette exigence sera remplie. Comme suit :

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

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 :

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

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 !

Lecture recommandée :

Comment introduire la fonction de code de vérification Tencent dans le projet Vue

Comment convertir la syntaxe de classe es6 dans Babel

Comment utiliser vue cli pour mettre à niveau webapck4

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!