Sejauh manakah prestasi penyediaan/suntikan Vue 3?

Question

Saya mengusahakan projek yang bergantung pada menyediakan untuk pengurusan negeri global. Pada mulanya, objek provided adalah kecil, tetapi ia berkembang apabila projek itu berkembang.

Berapa banyak kesannya terhadap prestasi aplikasi dengan menyuntik objek ini di tempat data diperlukan? Tanpa melaksanakan alat pengurusan keadaan global seperti Pinia, adakah patut memecahkan objek besar yang kami sediakan menjadi objek berasingan untuk menyediakan "ketulan" data di mana diperlukan?

Answer 1

Saya telah melakukan beberapa penandaarasan asas dan tertanya-tanya sama ada pembolehubah yang kerap digunakan perlu disediakan/disuntik, atau jika ia perlu diakses dari kedai Pinia dalam sejumlah besar komponen.

Keputusan menunjukkan tiada perbezaan prestasi yang ketara.

Kes ujian pertama saya sangat asas: Menyediakan/menyuntik bool tunggal tidak sama dengan mendapatkannya daripada storan Pinia dalam komponen dan memaparkan komponen berbilang kali. 50k komponen mengambil masa antara 20-24 saat untuk dipaparkan, juga menggunakan menyediakan/menyuntik dan menggunakan Pinia. Tidak ada perbezaan yang konsisten untuk mengatakan salah satu lebih cepat/lambat.

Dalam ujian kedua, saya menggunakan objek yang lebih besar, susunan kira-kira 1MiB data (diukur dalam cetakan JSON tanpa ruang). Perbezaannya juga tidak ketara. Saya telah menghasilkan 50k komponen dan kedua-duanya menggunakan suntikan dan akses storan mengambil masa yang lebih kurang sama, antara 19-26 saat.

Komponen dalam setiap kes memaparkan nilai boolean pembolehubah tema, jadi masa pemaparannya tidak meningkat dengan data besar berbanding nilai boolean kecil.

Lagipun, saya telah membuat kesimpulan bahawa sebenarnya tidak ada perbezaan yang bermakna antara provide/inject dan kedai Pinia. Satu-satunya perbezaan yang jelas ialah prestasi kurang stabil apabila data lebih besar dan prestasi lebih boleh diramal apabila data lebih kecil. Tidak kira berapa kali saya mengulangi ujian pada nilai boolean, masa sentiasa antara 20-24 saat dan apabila data meningkat, saya mendapat beberapa pencilan seperti 19 saat atau 26 saat. Sekali lagi tiada yang konsisten, ini hanya boleh menjadi turun naik dalam penggunaan CPU sebenar saya dan tiada kaitan dengan Provide/inject vs penggunaan kedai Pinia.

Saya telah menguji pada Chrome v110 (x86_64) pada macOS menggunakan vue@3.2.47 dan pinia@2.0.32.

Kod ujian yang saya gunakan:

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