Quelle est la performance de la fourniture/injection de Vue 3 ?

Question

Je travaille sur un projet qui s'appuie sur provide au niveau de l'application pour la gestion globale de l'état. Au début, l'objet provided était petit, mais il a grandi à mesure que le projet grandissait.

Quel impact aura-t-il sur les performances des applications en injectant cet objet là où les données sont nécessaires ? Sans implémenter un outil de gestion d'état global comme Pinia, vaudrait-il la peine de diviser les gros objets que nous fournissons en objets séparés pour fournir des « morceaux » de données là où c'est nécessaire ?

Answer 1

J'ai effectué quelques analyses comparatives de base et je me demandais si les variables fréquemment utilisées devaient être fournies/injectées, ou si elles devaient être accessibles depuis la boutique Pinia dans un grand nombre de composants.

Les résultats montrent qu’il n’y a pas de différence de performances significative.

Mon premier cas de test est très basique : Fournir/injecter un seul bool n'est pas la même chose que de l'obtenir à partir du stockage Pinia dans le composant et de restituer le composant plusieurs fois. Le rendu de 50 000 composants a pris entre 20 et 24 secondes, également en utilisant provide/inject et Pinia. Il n'y a pas de différence constante pour dire que l'un ou l'autre est plus rapide/plus lent.

Dans le deuxième test, j'ai utilisé un objet plus grand, un tableau d'environ 1 Mo de données (mesuré en impression JSON sans espaces). La différence n’est pas non plus significative. J'ai rendu 50 000 composants et l'utilisation de l'injection et de l'accès au stockage a pris à peu près le même temps, entre 19 et 26 secondes.

Les composants dans chaque cas affichent la valeur booléenne de la variable de thème, de sorte que leur temps de rendu n'augmente pas avec le Big Data par rapport aux petites valeurs booléennes.

Après tout, j'en suis arrivé à la conclusion qu'il n'y a vraiment aucune différence significative entre fournir/injecter et le magasin Pinia. La seule différence évidente est que les performances sont moins stables lorsque les données sont plus volumineuses et que les performances sont plus prévisibles lorsque les données sont plus petites. Peu importe le nombre de fois que je répète le test sur les valeurs booléennes, le temps est toujours compris entre 20 et 24 secondes et à mesure que les données augmentent, j'obtiens des valeurs aberrantes comme 19 secondes ou 26 secondes. Encore une fois, rien de cohérent, cela pourrait simplement être une fluctuation de mon utilisation réelle du processeur et rien à voir avec l'utilisation de Provide/inject par rapport au magasin Pinia.

J'ai testé sur Chrome v110 (x86_64) sur macOS en utilisant vue@3.2.47 et pinia@2.0.32.

Code de test que j'ai utilisé :

<template>
  <div>Inject {{ number }}: {{ injected ? 'yes' : 'no' }}</div>
</template>
<script setup lang="ts">
  export interface Props {
    number?: number,
  }
  const props = withDefaults( defineProps<Props>(), {
    number: 0,
  })
  import { inject } from 'vue'
  const injected = inject('inject-test')
</script>

<template>
  <div>Store get {{ number }}: {{ testStore.test ? 'yes' : 'no' }}</div>
</template>
<script setup lang="ts">
  export interface Props {
    number?: number,
  }
  const props = withDefaults( defineProps<Props>(), {
    number: 0,
  })
  import { useTestStore } from 'stores/test'
  const testStore = useTestStore()
</script>

<template>
  <div v-if="testStore">
    <h1>Store get</h1>
    <pre>Start: {{ start() }}</pre>
    <div class="test">
      <StoreGet v-for="n in 50000"
                :key="n"
                :number="n"
      />
    </div>
    <pre>End: {{ end() }}</pre>
    <pre>Duration: {{ endTime - startTime }} seconds</pre>
  </div>
  <div v-else>
    <h1>Inject</h1>
    <pre>Start: {{ start() }}</pre>
    <div class="test">
      <Inject v-for="n in 50000"
              :key="n"
              :number="n"
      />
    </div>
    <pre>End: {{ end() }}</pre>
    <pre>Duration: {{ endTime - startTime }} seconds</pre>
  </div>
</template>

<script setup lang="ts">
  import { provide } from 'vue'
  import Inject from './test/Inject.vue'
  import StoreGet from './test/StoreGet.vue'

  // Roughly 1M of json data
  import { large } from '@sbnc/datasets/largeTest'

  // Comment one or the other:
  const testData = true
  //const testData = large

  // Choose which one to test:
  const testStore = true // set false to test inject

  provide( 'inject-test', testData)

  import { useTestStore } from 'stores/test'
  const testStore = useTestStore()
  testStore.test = testData

  let startTime
  let endTime

  function start() {
    startTime = performance.now()
    return startTime
  }
  function end() {
    endTime = performance.now()
    return endTime
  }
</script>