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