Explication détaillée des techniques de surveillance et de réglage des performances de Vue

Explication détaillée des techniques de surveillance et de réglage des performances de Vue

Étant donné que Vue est un framework frontal basé sur le développement de composants, à mesure que la complexité de l'application augmente, des problèmes de performances peuvent également survenir. Afin d'améliorer les performances des applications Vue, nous devons effectuer une surveillance et un réglage des performances. Cet article présentera en détail les techniques de surveillance et de réglage des performances de Vue et fournira des exemples de code.

1. Chargement paresseux des images

Dans les applications Vue, le chargement des images consomme plus de ressources et de temps. Afin de réduire le temps de chargement de la page, vous pouvez utiliser la technologie de chargement paresseux des images. Vue fournit le plug-in vue-lazyload, qui peut implémenter le chargement paresseux des images.

Tout d'abord, nous devons installer le plugin vue-lazyload. Vous pouvez utiliser la commande npm pour installer :

npm install vue-lazyload

Ensuite, importez et utilisez le plug-in dans main.js :

import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  loading: 'loading.gif',
  error: 'error.png',
})

Dans le composant, utilisez l'instruction v-lazy pour implémenter le chargement paresseux des images :

<img v-lazy="imageUrl">

Dans de cette façon, l'image sera en chargement lors de son entrée dans la zone visible, réduit la pression de chargement au début de la page et améliore l'expérience utilisateur.

2. Chargement paresseux des routes

Dans les applications Vue, le routage est une partie très importante. Lorsqu'il y a beaucoup de pages, le chargement des itinéraires prendra également plus de temps. Afin d'améliorer les performances de chargement d'itinéraire, vous pouvez utiliser la technologie de chargement différé d'itinéraire.

Tout d'abord, vous devez modifier l'importation d'itinéraire pour utiliser l'importation dynamique. Par exemple, changez l'itinéraire sous la forme suivante :

const Home = () => import('@/views/Home')
const About = () => import('@/views/About')

Ensuite, modifiez le fichier de configuration du routage et changez le mappage de l'itinéraire sous la forme d'import dynamique :

const routes = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/about',
    component: About,
  },
]

De cette façon, lorsque l'utilisateur accédera à l'itinéraire correspondant, il être automatiquement chargé à la demande, réduisant ainsi le temps de chargement global de l'application.

3. Évitez les rendus répétés

Dans les applications Vue, les composants sont parfois rendus de manière répétée, ce qui peut également entraîner une dégradation des performances. Afin d'éviter le rendu répété des composants, vous pouvez utiliser l'attribut key fourni par Vue.

L'utilisation de l'attribut key peut indiquer à Vue quels composants sont réutilisables, afin d'obtenir un contrôle précis lors de la mise à jour du DOM. Par exemple :

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

De cette façon, lorsque les données de la liste changent, Vue contrôlera avec précision quels composants doivent être restitués, améliorant ainsi les performances.

4. Défilement virtuel

Dans les applications Vue, le rendu des listes affectera également les performances. Lorsque la liste est longue, le rendu simultané de tous les éléments de la liste consomme beaucoup de temps et de ressources. Pour résoudre ce problème, la technologie de défilement virtuel peut être utilisée.

Vue fournit le plug-in vue-virtual-scroller, qui peut réaliser la fonction de défilement virtuel. Tout d'abord, nous devons installer le plugin :

npm install vue-virtual-scroller

Ensuite, importez et utilisez le plugin dans main.js :

import Vue from 'vue'
import VirtualScroller from 'vue-virtual-scroller'

Vue.use(VirtualScroller)

Dans le composant, utilisez le composant scroller de vue-virtual-scroller pour implémenter le défilement virtuel :

<virtual-scroller :items="list" :item-height="30" class="list">
  <template slot-scope="props">
    <div>
      {{ props.item.name }}
    </div>
  </template>
</virtual-scroller>

In de cette façon, seuls les éléments de la liste dans la zone visible seront affichés dans la liste, ce qui réduit considérablement le temps de rendu et la consommation de ressources et améliore les performances.

5. Chargement asynchrone des composants

Dans les applications Vue, certains composants sont parfois volumineux, ce qui ralentit le chargement de l'application globale. Afin d'améliorer la vitesse de chargement de l'application, ces gros composants peuvent être chargés de manière asynchrone.

Tout d'abord, vous devez modifier les composants volumineux pour utiliser l'importation dynamique. Par exemple, modifiez le composant sous la forme suivante :

const LargeComponent = () => import('@/components/LargeComponent')

Ensuite, lorsque le composant est utilisé, utilisez le formulaire de composant asynchrone :

<template>
  <div>
    <Suspense>
      <template #default>
        <LargeComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>
  </div>
</template>

De cette façon, les gros composants ne seront chargés qu'en cas de besoin, améliorant ainsi la vitesse de chargement du application.

Pour résumer, cet article présente en détail les techniques de surveillance et de réglage des performances de Vue et fournit des exemples de code. En utilisant des technologies telles que le chargement paresseux des images, le chargement paresseux des itinéraires, l'évitement des rendus répétés, le défilement virtuel et le chargement asynchrone des composants, les applications Vue peuvent être optimisées pour améliorer les performances et l'expérience utilisateur. J'espère que cet article vous sera utile.

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!