Sumažinti „vue.js“ programos rinkinio dydį yra labai svarbu norint pagerinti puslapio apkrovos našumą ir vartotojo patirtį. Mažesnis paketo dydis lemia greitesnį atsisiuntimą, mažiau analizuojamą ir greitesnį programų paleidimo laiką. Tai pasiekti yra kelios strategijos ir geriausia praktika, pradedant priklausomybių optimizavimu ir baigiant pažangių kūrimo įrankių ir metodų naudojimu.
naudokite kūrimo žingsnį su medžio drebėjimu
Vienas iš veiksmingiausių būdų sumažinti paketo dydį yra naudoti modernius kūrimo įrankius, palaikančius medžių dreba. Medžių dreba yra procesas, pašalinantis nepanaudotą kodą iš galutinio paketo. „Vue“ API ir daugelis šiuolaikinių „JavaScript“ bibliotekų yra suprojektuotos taip, kad būtų tinkamai sudedamos į medį. Pavyzdžiui, nenaudojami „Vue“ komponentai, tokie kaip įmontuoti „įmontuoti“, nebus įtraukti į gamybos kūrimą, jei nebus naudojama. Išankstinio kompiliavimo šablonai pastatymo metu taip pat vengia vue kompiliatoriaus gabenimo į naršyklę, kuri gali sutaupyti maždaug 14 kb minifikuotų ir „Gzped JavaScript“, sumažinant vykdymo laiko sąnaudas.
Tvarkykite ir analizuokite priklausomybes
Priklausomybės dažnai labai prisideda prie rinkinio dydžio. Svarbu:
-Pasirinkite priklausomybes, kurios siūlo ES modulio formatus ir yra draugiški medžiai (pvz., „Lodash-ES“, o ne „lodash“).
-Reguliariai tikrinkite savo priklausomybes, naudodami tokius įrankius kaip „Webpack-Bunddle-Analyzer“, kad nustatytumėte didelius ar nereikalingus paketus.
- Pašalinkite nepanaudotas priklausomybes naudodami tokius įrankius kaip „DepCheck“ arba „NPM Prune“.
- Pakeiskite dideles priklausomybes mažesnėmis, labiau sutelktomis alternatyvomis. Pvz., Sumažėjusios diagramos bibliotekos, tokios kaip „echarts“, pakeitimas mažesniu, pavyzdžiui, chartist.js gali drastiškai sumažinti paketo dydį.
Lazy apkrovos maršrutai ir komponentai
„Lazy Loading“ yra strategija, kai maršrutų ar komponentų kodas įkeliamas tik tada, kai reikia, užuot sujungus viską iš anksto. „Vue“ maršrutizatorius palaiko tinginių krovimo maršrutus dinamiškai importuodami komponentus, padalijant paketą į mažesnius gabaliukus, kurie pagerina pradinį apkrovos našumą. Šis metodas žymiai sumažina pagrindinio paketo dydį ir laikui bėgant paskleidžia kodo apkrovą, nes vartotojai naršo po programą.
Naudokite kodo padalijimą ir dinaminį importą
„Webpack“, dažniausiai naudojama „Vue Projects“, palaiko kodo padalijimą per dinaminius „import ()“ teiginius. Tai reiškia, kad jūsų programos dalis galima padalyti į atskirus paketus, kurie yra įkeliami asinchroniškai. Tinkamai naudojant kodo padalijimą padeda valdyti paketo dydį, įkeliant tik reikiamą kodą pagal poreikį.
minifikacija ir suspaudimas
Minifikacija sumažina „JavaScript“ failų dydį, pašalinant „WhiteSpace“, komentarus ir sutrumpindamas kintamus pavadinimus. Įrankiai, tokie kaip „UglifyJS“ ar „Terser“ (dažnai integruoti į šiuolaikinius kūrimo procesus), gamybos kūrimo žingsnio metu automatiškai sumažina kodą. Be to, „Gzpipping“ arba „Brotli“ glaudinimas dar labiau sumažina vartotojams skirto turto dydį.
Naudokite mažesnes „Vue“ alternatyvas konkrečiems naudojimo atvejams
Projektams, kuriuose „Full Vue.js“ sistema gali būti per sunkūs, ypač atsižvelgiant į progresyvių patobulinimų atvejus, apsvarstykite galimybę naudoti lengvesnes alternatyvas, tokias kaip „Petite Vue“, kurios dydis yra tik apie 6 kb. Tai naudinga, jei projektui nereikia visos „Vue“ ekosistemos.
Apimtis ir importui reikėjo tik bibliotekų dalių
Daugelis didelių bibliotekų, tokių kaip „Bootstrap Vue“ ar „Lodash“, leidžia importuoti tik konkrečius komponentus ar funkcijas, o ne visą biblioteką. Pvz., Užuot importavę visą „Bootstrap Vue“ biblioteką, importuokite tik jums reikalingus komponentus, kurie sumažina pluošto dydį, neįtraukiant nenaudojamų dalių. Panašiai importuokite lodašo funkcijas moduliniai („Importuoti žemėlapį iš„ lodash/žemėlapio “, o ne visą lodašą).
Venkite „Inline Styles“ ir didelių CSS sistemų, jei nereikia
CSS rėmai, tokie kaip „Bootstrap“, pridėkite prie paketo dydžio. Įvertinkite, ar jums tikrai reikia visos sistemos, ir apsvarstykite alternatyvas, tokias kaip uodegos vėjas CSS, kad būtų lankstesni ir mažesni CSS paketai. Taip pat apsvarstykite galimybę pašalinti nenaudojamą stiliaus importą arba, jei įmanoma, priglobkite CSS išorėje.
serverio pusės perteikimas ir statinė svetainės generavimas
Kai kuriuos perteikimus į serverį perkelti per SSR (serverio pusės perteikimą) arba SSG (statinė svetainės generavimas) sumažina „JavaScript“ kiekį, reikalingą kliento pusėje, veiksmingai sumažindamas paketo dydį. Tai keičia atsakomybę į serverį, siųsdamas iš anksto pastatytą HTML klientui su minimaliu JS interaktyvumu.
optimizuokite vaizdus ir kitą turtą
Nors tai tiesiogiai neturi įtakos „JavaScript“ paketo dydžiui, vaizdų, šriftų ir turto optimizavimas prisideda prie bendro puslapio apkrovos našumo, kuris papildo „JavaScript“ patobulinimus.
Protingai naudokite šiuolaikines „JavaScript“ funkcijas ir polifilus
Naudojant šiuolaikišką „JavaScript“ sintaksę, galima sukelti mažesnius paketus, kai jie derinami su šiuolaikiniais kūrimo įrankiais. Venkite nereikalingų daugiakampių užpildų, nebent nukreipiate į senesnes naršykles, ir apsvarstykite sąlyginius polifentus, pagrįstus vartotojo naršyklės galimybėmis.
praktikos santrauka, skirta sumažinti vue.js paketo dydį
- Naudokite kūrimo įrankius su medžių drebėjimu (pvz., „Webpack“, „Vite“).
- Išankstinio kompiliavimo vue šablonai.
-Išanalizuokite paketo turinį su tokiais įrankiais kaip „Webpack-Bundle-Analyzer“.
- Pašalinkite arba pakeiskite sunkias priklausomybes.
- Importuoti tik iš bibliotekų reikėjo komponentų ar funkcijų.
- Įdiekite tingų maršrutų ir komponentų krovimą.
- Naudokite kodo padalijimą ir dinaminį importą.
- Taikykite minifikaciją ir suspaudimą.
- Apsvarstykite mažesnes alternatyvas, tokias kaip „Petite Vue“ konkrečioms programoms.
- Optimizuokite CSS naudojimą ir be reikalo venkite importuoti visas sistemas.
- Norėdami sumažinti kliento paketo dydį, naudokite SSR arba SSG.
- Optimizuokite turtą ir atsargiai naudokite šiuolaikines „JavaScript“ funkcijas.