Lai samazinātu savas Vue.js lietojumprogrammas komplekta lielumu, veiciet šīs darbības:
1. darbība: ģenerējiet pārskatu par lietojumprogrammu komplektu
1. Izmantojiet Vue CLI komandu `build --report`, lai ģenerētu pārskatu par lietojumprogrammu komplektu. Šī komanda izveidos ziņojumu lietojumprogrammai, izmantojot Webpack-bundle-analyzer[2].
2. Mapē dist atveriet failu report.html, lai skatītu katras paketes pakotnes lielumu. Tas palīdzēs noteikt iepakojumus, kas aizņem visvairāk vietas[2].
2. darbība: samaziniet komplekta lielumu
1. Identificējiet iepakojumus, kas aizņem visvairāk vietas, un veiciet pasākumus, lai samazinātu to izmēru. Piemēram, varat izmantot citu iepakojumu ar mazāku izmēru vai samazināt iepakojuma izmēru ar koku kratīšanu[2].
2. Izmantojiet tādus rīkus kā Purge-CSS, lai no lietojumprogrammas noņemtu neizmantoto CSS. Tas var ievērojami samazināt komplekta izmēru[2].
3. Saspiediet attēlus, lai uzlabotu ielādes laiku. Attēlu saspiešanai varat izmantot tiešsaistes rīkus, piemēram, Compress-Or-Die[2].
3. darbība: optimizējiet Vue.js komponentus
1. Izmantojiet Vue.js veiktspējas optimizācijas paņēmienus, piemēram, koku kratīšanu un koda sadalīšanu, lai samazinātu Vue.js lietojumprogrammas lielumu[1].
2. Izmantojiet izveides darbību, lai apkopotu un optimizētu lietojumprogrammu Vue.js. To var izdarīt, izmantojot tādus rīkus kā Webpack vai Rollup[1].
4. darbība. Pārraugiet veiktspēju
1. Izmantojiet veiktspējas uzraudzības rīkus, piemēram, Chrome DevTools veiktspējas paneli vai Vue DevTools paplašinājumu, lai pārraudzītu un analizētu veiktspējas rādītājus, piemēram, lapas ielādes laiku, atjaunināšanas laiku un atmiņas lietojumu[1].
2. Izmantojiet kļūdu ziņošanas rīkus, piemēram, Laravel iebūvētos kļūdu ziņošanas rīkus vai trešo pušu rīkus, piemēram, Sentry, lai pārraudzītu un analizētu kļūdas un izņēmumus savā lietojumprogrammā[2].
Veicot šīs darbības, varat ievērojami samazināt savas Vue.js lietojumprogrammas komplekta lielumu un uzlabot tās veiktspēju.
Citāts:[1] https://www.jenniferbland.com/how-to-reduce-your-vue-js-bundle-size-with-webpack/
[2] https://dev.to/m9hmood/reduce-vue-js-application-size-kfl
[3] https://devpress.csdn.net/vue/62f0d777c6770329307f4b91.html
[4] https://stackoverflow.com/questions/56059883/how-to-reduce-bundle-size-in-webpack-vuejs
[5] https://blog.42mate.com/vue-js-bundle-size-and-performance-optimizations-%F0%9F%8F%8E%EF%B8%8F/