Optimizuojant „Vuex“ parduotuvės veikimą, reikia atkreipti dėmesį į kelis valstybės valdymo, reaktyvumo ir taikymo architektūros aspektus. Šis išsamus vadovas apima geriausią praktiką, metodus ir strategijas, užtikrinančias, kad „Vuex“ varomos programos veiktų efektyviai, išlieka keičiamos ir siūlo sklandų vartotojo patirtį.
Valstybinė organizacija ir struktūra
Puikiai struktūruota „Vuex“ parduotuvė yra pagrindinė našumas. Per daug sudėtingos, giliai įdėtos būsenos padidina reaktyvumo stebėjimo sąnaudas ir gali sulėtinti atnaujinimus. Norėdami optimizuoti:
- Kiek įmanoma daugiau išlyginkite būsenos struktūrą, normalizuodami duomenis. Naudokite duomenų bazės įkvėptą metodą su žemėlapiais panašiomis struktūromis ir nuorodomis, o ne giliai įdėtais objektais. Tai sumažina stebimų reaktyviųjų priklausomybių skaičių ir greičiau pateikia selektyvius atnaujinimus.
- Suorganizuokite būseną į modulinius vuex modulius, pagrįstus loginėmis savybėmis ar domenais. Šis atskyrimas padeda palaikyti ir leidžia tingiai pakrauti parduotuvių modulius, o tai sumažina pradinį pluošto dydį ir pagreitina pradžios laiką.
- Venkite saugoti efemerišką vartotojo sąsają Vuex mieste; Rezervuokite „Vuex“ taikymo lygio būsenai, kurią reikia bendrinti arba išlikti už individualių komponentų gyvavimo ciklų ribų.
Lazy Loading Vuex moduliai
Šiuolaikinė optimizavimo technika yra tingus krovimo vuex moduliai. Užuot įkėlę visą būsenos medį iš anksto, dinamiškai importuokite parduotuvės modulius, susietus su konkrečiais maršrutais ar funkcijomis. Šis požiūris atspindi komponentą tingų pakrovimą ir kodų padalijimą, dramatiškai sumažindamas pradinius paketų dydžius (kai kuriais atvejais iki 70%) ir pagerinant pradedančiųjų našumą.
Įdiekite tingų pakrovimą, įvyniodami „Vuex“ modulius dinaminiu importu ir juos užregistruokite tik tada, kai reikia, pavyzdžiui, remiantis vartotojo navigacijos keliu. Tai atideda nereikalingos būsenos pakrovimą ir analizę, kol to iš tikrųjų reikia.
Mutacija ir veiksmų optimizavimas
Mutacijos yra mechanizmai, sukeliantys „Vuex“ reaktyvius atnaujinimus. Čia labai svarbu sumažinti išlaidas:
- Pakelkite daugybę susijusių mutacijų kartu, kad sumažintumėte pranešimus apie reaktyvumą ir komponentų pakartotinius ryšius. Grupavimas į operacijas panašias operacijas gali sumažinti nereikalingus atnaujinimus iki 60%.
- Venkite saugyklų mutacijų, kad atliktumėte nereikšmingus vartotojo sąsajas; Vietoj to naudokite vietinės komponento būsenos arba pakoreguotų reaktyviųjų nuorodų.
- Debenecijos arba droselio dažni būsenos pakeitimai, kad būtų išvengta kaskados. Pvz., Atnaujindami paieškos rezultatus ar panašiai greitai besikeičiančią būseną, prieš atlikdami mutacijas naudokite veiksmus, naudokite veiksmus.
- Naudokite sinchronines mutacijas būsenos pokyčiams ir deleguokite asinchronines operacijas į veiksmus, kad srautai būtų nuspėjami ir deginami.
Reaktyvumo ribojimas pridėtinės vertės
„Vue“ reaktyvumo sistema pagal numatytuosius nustatymus seka kiekvieną įdėtą nuosavybę, kuri gali būti didelių ar nekintamų duomenų struktūrų našumo kliūtis.
- Dirbdami su dideliais nekintamais duomenimis, kurie retai keičiasi (pvz., Talpykloje esantys atsakymai), naudokite „Object.freeze“ ant saugomuose objektuose, kad Vue neleistų jiems reaguoti. Šaldytus objektus praleidžia reaktyvumo sistema, taupanti atmintį ir CPU išteklius.
- 3 „Vue“ naudokite sekliąsias reaktyvias API, tokias kaip `seklainos ()` arba `sekliaverčiai ()` dideliuose įdėtuose duomenyse, kad reaktyvumas būtų apribotas tik šaknies lygio savybėmis, o įterpti objektus traktuokite kaip nekintamus.
- Venkite gilių stebėtojų ant didelių daiktų, kurie gali sukelti brangias perskaičiavimus ir pakartotinius ryšius.
Efektyvūs „Getters“ ir apskaičiuotos savybės
Apskaičiuotos savybės ir geteriai yra talpykloje pagal jų reaktyviąsias priklausomybes, todėl jos yra veiksmingos išvestinei būsenai:
- Pirmenybę teikite „Getters“, o ne metodams, kai pasiekiate išvestinę būseną komponentuose, nes „Getters Cache“ rezultatai, kol pasikeis priklausomybės.
- Venkite sudėtingų skaičiavimų tiesiogiai šablonų ar metodų, kurie veikia kiekviename pateikime; Norėdami atsiminti brangius skaičiavimus, naudokite „Getters“.
- Talpyklos dažnai naudojami arba sudėtingi išvestiniai duomenys, siekiant sumažinti apskaičiavimo išlaidas.
Komponentų pakartotinio ryšio sumažinimas
Pakartotiniai ryšiai gali būti brangūs, ypač kai daugelis komponentų, tiesiogiai pasikliaujančių „Vuex“ būsena:
- Prijunkite komponentus prie „Vuex“ būsenos selektyviai, sudarydami tik būtinas būsenos savybes ar geteris.
-Norėdami išvengti nereikalingų pakartotinių, naudokite „Vue“ „V-vien“ direktyvą arba „raktą“ įrišimus.
- Suskirstykite komponentus į mažesnes dalis su ribotomis priklausomybėmis nuo „Vuex“, kad sumažintumėte perteikimo apimtį.
- Venkite be reikalo skleisti visą parduotuvės būseną į komponentus; Žemėlę tik tai, ko reikia kiekvienam komponentui.
Valstybės normalizavimo ir talpyklos strategijos
Normalizuota būsena pagerina rezultatus išlyginant santykius ir vengdama įdėtų mutacijų:
- Normalizuotai saugokite subjektus, pvz., Vartotojo duomenis saugokite objekte, kuriam taikoma vartotojo ID, ir nurodydami šiuos ID kitur, kaip ir sąrašuose.
- Šis modelis sumažina nereikalingus duomenis, supaprastina atnaujinimus ir daro komponentus prenumeruoti tik atitinkamas būsenos dalis.
-Talpyklos dažnai gaunami arba brangiai pateikiami duomenys parduotuvėje, todėl vėlesnėje prieigoje išvengiama pakartotinių API skambučių.
Venkite bendrų spektaklių spąstų
- nenaudokite „Vuex“ už kiekvieną mažą vartotojo sąsajos sąveiką; Laikykite ne globalų, laikiną būseną, vietinę ir komponentų.
- Venkite per anksti optimizuoti; Nurodykite kliūčių su „Vue Devtools“ ir naršyklės profiliavimu, kad sutelktumėte pastangas, kur jos yra svarbios.
- Išjunkite „Vuex Stric“ režimą gamyboje, kad padidėtų našumas, nes griežtas režimas prideda pridėtines išlaidas atliekant gilius būsenos stebėtojus.
- Laikykite nuspėjamas ir minimalias mutacijas, kad būtų išvengta per didelio reaktyvumo.
Komplekto ir kodo padalijimas
Našumas priklauso nuo mažų pradinių atsisiuntimų ir greito paleidimo laiko:
- Norėdami įgyvendinti efektyvų medžių drebėjimą ir kodo padalijimą „Vuex Store“ moduliams, taip pat komponentams, naudokite „Webpack“ arba „Vite“.
- Sujunkite tingų „Vuex“ modulių pakrovimą su maršruto pagrindu sukurtu kodo padalijimu, kad optimizuotumėte vartotojo patirtį, ypač mobiliuosiuose įrenginiuose ar lėtesniuose tinkluose.
„Vue Devtools“ ir „Stebėjimo“ panaudojimas
- Norėdami analizuoti komponentų pateikimo laiko juostas, nustatyti skirtuką „Vue devtools“, tiksliai nustatyti, kaip keičiasi „Vuex“ būsenos mutacijos.
- Nurodykite nereikalingus stebėtojus, sunkius skaičiavimus ir perteklinius atnaujinimus.
- atitinkamai sureguliuokite komponento reaktyvumą ir saugokite struktūrą, kad gautumėte liesą atnaujinimo ciklą.
geriausios praktikos santrauka
- Modulizuokite parduotuvę veiksmingai, aiškiai atskirti susirūpinimą.
- „Lazy Load Store“ moduliai, suderinti su maršruto ar funkcijų ribomis.
- Normalizuokite sudėtingą būseną, kad sumažintumėte mutacijų pridėtines išlaidas.
- partijos mutacijos ir disponuoja dažni būsenos pokyčiai.
- užšaldykite nekintami duomenys, kad būtų apribotas reaktyvumas.
- Protingai naudokite „Getters“ ir apskaičiuotos savybės, kad gautumėte gautų duomenų talpyklą.
- Prijunkite komponentus selektyviai naudodami „Vuex MAP HeDers“.
- Sumažinkite „Global Store“ būseną UI efemeriškiems duomenims.
- Norėdami stebėti ir iteretiškai pagerinti našumą, naudokite įrankius ir profiliavimą.
- Optimizuokite susiejimą ir pakrovimą su kodo padalijimu, kad pradinis naudingas krovinys būtų mažas.