Ajouter un chargement pendant le chargement paresseux

Cette fois je vais vous montrer quelles sont les précautions pour ajouter du chargement lors du chargement paresseux Voici des cas pratiques, jetons un 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 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)
    })
  }
};

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 :

L'implémentation JS reste dans la boîte d'invite de l'interface

Explication détaillée des 4 étapes de vue cli mettre à niveau le webpack

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!