Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon kaip galiu naudoti kompozicijos API, kad pagerinčiau „Vuex“ našumą


kaip galiu naudoti kompozicijos API, kad pagerinčiau „Vuex“ našumą


Jei norite pagerinti Vuex našumą naudodami kompozicijos API, atlikite šiuos veiksmus:

1. Naudokite „Lazy Loading“:
- Lazy Loading Vuex Modules: įkelkite Vuex modulius tik tada, kai jų reikia, sumažindami pradinį paketo dydį ir pagerindami našumą. Tai galima pasiekti dinamiškai registruojant Vuex modulius pagal maršruto sąlygas[3].

2. Optimizuoti rinkinio dydį:
Kodo padalijimas: padalykite kodą į mažesnius gabalus, kad sumažintumėte pradinį paketo dydį. Tai galima padaryti naudojant modulių rinkinius, tokius kaip Webpack ir Vite[2].
- Tree-Shaking: pašalinkite nenaudojamą kodą iš paketo, kad dar labiau sumažintumėte jo dydį[2].

3. Apriboti reaktyvumą:
- Objektų užšaldymas: užšaldykite didelius objektus, kurie retai keičiasi, kad išvengtumėte nereikalingo reaktyvumo ir atminties suvartojimo. Tai galima padaryti naudojant `Object.freeze`[4].

4. Venkite nereikalingų apskaičiuotų ypatybių:
- Apskaičiuotos ypatybės su debounce: naudokite atmetimo funkcijas, kad apribotumėte apskaičiuotų savybių apdorojimo skaičių, sumažinant Vue reaktyvumo sistemos išlaidas[5].

5. Stebėkite ir optimizuokite išteklių tvarkymą:
- Optimizuoti vaizdinius išteklius: naudokite vaizdo formatus, pvz., WebP arba AVIF, ir šriftų formatus, pvz., WOFF2, kad sumažintumėte failų dydį nepakenkiant kokybei[3].
- Išankstinis kritinių išteklių įkėlimas: naudokite tokias direktyvas kaip „preload“ ir „prefetch“, kad anksti įkeltumėte svarbius išteklius, pvz., šriftus ir scenarijus, taip sumažinant laiką, per kurį programa įkeliama[3].

6. Stebėkite ir optimizuokite „Vuex“ parduotuvę:
- Stebėkite „Vuex“ parduotuvės dydį: stebėkite savo „Vuex“ parduotuvės dydį, kad įsitikintumėte, jog ji netaps per didelė ir nepablogins našumo.
- Talpyklos apskaičiuotos savybės: įdiekite apskaičiuotų savybių kaupimą talpykloje, kad sumažintumėte „Vue“ reaktyvumo sistemos išlaidas.

Laikydamiesi šios geriausios praktikos, galite žymiai pagerinti „Vuex“ programos našumą naudodami kompozicijos API.

Citatos:
[1] https://www.bizstream.com/blog/exploring-vue-3s-composition-api-and-performance-improvements/
[2] https://www.etatvasoft.com/blog/vue-composition-api/
[3] https://borstch.com/blog/development/optimizing-performance-in-vuejs-3-apps
[4] https://vuejs.org/guide/extras/composition-api-faq.html
[5] https://stackoverflow.com/questions/69445963/is-it-faster-to-store-logic-in-vuex-or-in-vue-composition-api