Optimiser le chargement paresseux de vue-router

Cette fois, je vais vous présenter quelles sont les précautions pour optimiser le chargement paresseux de vue-router. Ce qui suit est un cas pratique, 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 chargement différé repose sur la fonction AMD mode require 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é , le téléchargement du js depuis le réseau prend un certain temps. Délai pendant lequel l'interface utilisateur ne répond pas du tout, ce qui donne aux utilisateurs l'impression que cliquer 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.

Nous 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 de résolution une fois terminé. 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 :

Comment publier l'application vue+todo-list

Utilisez mint-ui pour la créer la liaison du téléphone portable niveau 3

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!