Vue.js lietojumprogrammas saišķa lieluma samazināšana ir būtiska, lai uzlabotu lapas ielādes veiktspēju un lietotāja pieredzi. Mazāks saišķa izmērs noved pie ātrākas lejupielādes, mazāka parsēšana un ātrāks lietojumprogrammas startēšanas laiks. Lai to sasniegtu, ir vairākas stratēģijas un paraugprakse, sākot no atkarību optimizēšanas līdz uzlabotu būvēšanas rīku un paņēmienu izmantošanai.
Izmantojiet veidošanas soli ar koku kratīšanu
Viens no visefektīvākajiem veidiem, kā samazināt saišķa izmēru, ir izmantot mūsdienīgus būvēšanas rīkus, kas atbalsta koku kratīšanu. Koku satricināšana ir process, kas novērš neizmantoto kodu no galīgā saišķa. Vue API un daudzas mūsdienu JavaScript bibliotēkas ir veidotas tā, lai būtu koku apkarotas, ja tās ir pareizi komplektētas. Piemēram, neizmantotie Vue komponenti, piemēram, iebūvētie ``, netiks iekļauti ražošanas veidos, ja tie netiks izmantoti. Iepriekšēja sastādīšanas veidnes būvēšanas laikā arī ļauj izvairīties no Vue kompilatora nosūtīšanas uz pārlūku, kas var ietaupīt aptuveni 14 KB minificēto un Gzed JavaScript, samazinot izpildlaika izmaksas.
Pārvaldīt un analizēt atkarības
Atkarības bieži ievērojami veicina lielumu. Ir svarīgi:
-Izvēlieties atkarības, kas piedāvā ES moduļa formātus, un ir draudzīgi koku kratīšanai (piemēram, `lodash-es`, nevis` lodash`).
-Regulāri revidējiet savas atkarības, izmantojot tādus rīkus kā `webpack-bundle-analyzer`, lai identificētu lielus vai nevajadzīgus paketes.
- Noņemiet neizmantotās atkarības, izmantojot tādus rīkus kā `DepCheck` vai` NPM plūme`.
- Nomainiet lielas atkarības ar mazākām, koncentrētākām alternatīvām. Piemēram, smagas diagrammu bibliotēkas aizstāšana, piemēram, “Echarts” ar mazāku, piemēram, Chartist.js, var krasi samazināt saišķa izmēru.
slinku slodzes maršruti un komponenti
Slinka ielāde ir stratēģija, kurā kods maršrutiem vai komponentiem tiek ielādēts tikai tad, ja nepieciešams, tā vietā, lai visu saliktu iepriekš. Vue maršrutētājs atbalsta slinkus iekraušanas maršrutus, dinamiski importējot komponentus, sadalot paketi mazākos gabalos, kas uzlabo sākotnējo slodzes veiktspēju. Šī metode ievērojami samazina galvenā saišķa lielumu un laika gaitā izkliedē koda slodzi, kad lietotāji pārvietojas pa lietojumprogrammu.
Izmantojiet koda sadalīšanu un dinamisku importu
Webpack, ko parasti izmanto VUE projektos, atbalsta kodu sadalīšanu, izmantojot dinamiskus `import ()` paziņojumus. Tas nozīmē, ka jūsu lietojumprogrammas daļas var sadalīt atsevišķos saišķos, kas tiek ielādēti asinhroni. Pareizas koda sadalīšanas izmantošana palīdz pārvaldīt saišķa lielumu, pēc pieprasījuma ielādējot tikai nepieciešamo kodu.
Minifikācija un saspiešana
Minifikācija samazina JavaScript failu lielumu, noņemot atstarpi, komentārus un saīsinot mainīgo nosaukumus. Rīki, piemēram, UglifyJS vai Terser (bieži integrēti modernos būvēšanas procesos), ražošanas veidošanas posma laikā automātiski tiek minificēts kods. Turklāt GZIPPING vai BROTLI saspiešana vēl vairāk samazina lietotāju piedāvāto aktīvu lielumu.
īpašiem lietošanas gadījumiem izmantojiet mazākas Vue alternatīvas
Projektiem, kur viss Vue.js ietvars varētu būt pārāk smags, īpaši progresīviem uzlabošanas gadījumiem, apsveriet iespēju izmantot vieglākas alternatīvas, piemēram, Petite Vue, kas ir tikai aptuveni 6 kb lielums. Tas ir noderīgi, ja projektam nav nepieciešama pilna VUE ekosistēma.
Darbības joma un importēšana bija vajadzīgas tikai bibliotēku daļas
Daudzas lielas bibliotēkas, piemēram, Bootstrap Vue vai Lodash, ļauj importēt tikai īpašus komponentus vai funkcijas, nevis visu bibliotēku. Piemēram, tā vietā, lai importētu visu Bootstrap Vue bibliotēku, importējiet tikai nepieciešamos komponentus, kas samazina paketes lielumu, izslēdzot neizmantotās detaļas. Līdzīgi, importējiet Lodash funkcijas modulāri (`importēt karti no 'Lodash/Map'` visas Lodaša vietā).
Izvairieties no inline stiliem un lieliem CSS ietvariem, ja nav nepieciešams
CSS ietvari, piemēram, Bootstrap, pievieno paketes lielumu. Novērtējiet, vai jums patiešām ir nepieciešams viss ietvars un apsveriet tādas alternatīvas kā Tailwind CSS, lai iegūtu elastīgākas un mazākas CSS saišķus. Ja iespējams, apsveriet arī neizmantotā stila importa noņemšanu vai CS mitināšanu ārēji.
servera puses renderēšana un statiskā vietņu ģenerēšana
Pārvietojot kādu renderēšanu uz serveri, izmantojot SSR (servera puses renderēšana) vai SSG (statiskā vietnes ģenerēšana), samazina JavaScript daudzumu klienta pusē, efektīvi samazinot paketes lielumu. Tas novirza pienākumus uz serveri, nosūtot klientam iepriekš uzbūvēto HTML ar minimālu JS interaktivitātei.
optimizējiet attēlus un citus aktīvus
Lai gan tas tieši neietekmē JavaScript saišķa lielumu, optimizējot attēlus, fontus un aktīvus, veicina kopējo lapu ielādes veiktspēju, kas papildina JavaScript uzlabojumus.
Izmantojiet modernās JavaScript funkcijas un polifillas saprātīgi
Mūsdienu JavaScript sintakse izmantošana var izraisīt mazākus saišķus, ja to apvieno ar moderniem būvēšanas rīkiem. Izvairieties no nevajadzīgiem polifilliem, ja vien nav vērsti uz vecākiem pārlūkiem, un apsveriet nosacītus polifillus, pamatojoties uz lietotāja pārlūkprogrammas iespējām.
Vue.js saišķa lieluma samazināšanas prakses kopsavilkums
- Izmantojiet veidošanas rīkus ar koku kratīšanu (piemēram, Webpack, Vite).
- pirms kompilācijas Vue veidnes.
-Analizējiet saišķa saturu ar tādiem rīkiem kā `webpack-bundle-analyzer`.
- Noņemiet vai nomainiet smagas atkarības.
- Importējiet tikai nepieciešamās komponentus vai funkcijas no bibliotēkām.
- Ieviesiet slinku slodzi maršrutiem un komponentiem.
- Izmantojiet koda sadalīšanu un dinamisku importu.
- Pielietojiet minifikāciju un saspiešanu.
- Apsveriet mazākas alternatīvas, piemēram, Petite Vue īpašām lietojumprogrammām.
- optimizēt CSS lietojumu un nevajadzīgi izvairīties no visa ietvara importēšanas.
- Izmantojiet SSR vai SSG, lai samazinātu klienta puses saišķa izmēru.
- Optimizējiet aktīvus un uzmanīgi izmantojiet modernās JavaScript funkcijas.