Vue.js rakenduse kimbu suuruse vähendamine on lehe laadimise ja kasutajakogemuse parandamiseks ülioluline. Väiksem kimbu suurus viib kiirema allalaadimise, vähem parsimise ja kiiremini rakenduste käivitamisaegadeni. Selle saavutamiseks on mitu strateegiat ja parimaid tavasid, alates sõltuvuste optimeerimisest kuni täiustatud ehituse tööriistade ja tehnikate kasutamiseni.
Kasutage puude raputamisega ehituse sammu
Üks tõhusamaid viise kimbu suuruse vähendamiseks on kaasaegsete ehitamisriistade kasutamine, mis toetavad puude raputamist. Puude raputamine on protsess, mis välistab kasutamata koodi lõplikust komplektist. Vue API-d ja paljud kaasaegsed JavaScripti raamatukogud on õigesti komplekteerimisel mõeldud puude raputatavaks. Näiteks kasutamata VUE komponente, nagu sisseehitatud ``, ei sisaldu tootmishoonetesse, kui seda ei kasutata. Eelkompileerivad mallid ehitamise ajal väldib ka Vue kompilaatori saatmist brauserisse, mis võib säästa umbes 14 kb mini- ja gzipitud JavaScripti, vähendades töökulusid.
Hallake ja analüüsige sõltuvusi
Sõltuvused aitavad kimbu suurusesse sageli märkimisväärselt kaasa. See on oluline:
-Valige sõltuvused, mis pakuvad ES-mooduli vorminguid ja on puude raputamise sõbralikud (nt `lodash 'asemel` lodas-es).
-Suurepäraste või ebavajalike pakettide tuvastamiseks auditeerivad oma sõltuvusi regulaarselt, kasutades selliseid tööriistu nagu "Webpack-Bundle-Analzer".
- Eemaldage kasutamata sõltuvused, kasutades selliseid tööriistu nagu `depcheck" või "NPM ploo".
- Asendage suured sõltuvused väiksemate, fokuseeritumate alternatiividega. Näiteks võib raske kaardistamisraamatukogu asendamine nagu "Echarts" väiksemaga nagu Charisti.js, drastiliselt vähendada komplekti suurust.
Laiska koormuse marsruudid ja komponendid
Laisk laadimine on strateegia, kus marsruutide või komponentide kood laaditakse ainult vajadusel, selle asemel, et kõike ette ühendada. Vue ruuter toetab laisaid laadimisviise, importides komponente dünaamiliselt, jagades kimbu väiksemateks tükkideks, mis parandavad esialgset koormuse jõudlust. See meetod vähendab märkimisväärselt põhikomplekti suurust ja levitab koodi koormust aja jooksul, kui kasutajad rakendusel liikuvad.
Kasutage koodide jagamist ja dünaamilist importi
WebPack, mida tavaliselt kasutatakse VUE projektides, toetab koodide jagamist dünaamilise impordi () `avalduste kaudu. See tähendab, et teie rakenduse osad saab jagada eraldi kimpudeks, mis laaditakse asünkroonselt. Koodide jagamise õige kasutamine aitab kimbu suuruse haldamisel, laadides nõudmisel ainult vajaliku koodi.
minimaseerimine ja tihendamine
Minifikatsioon vähendab JavaScripti failide suurust, eemaldades Whitpace, kommentaarid ja lühendades muutujate nimesid. Sellised tööriistad nagu UglifyJS või Terser (sageli integreeritud kaasaegsesse ehitusprotsessidesse) mingeerige koodi automaatselt tootmise ehituse ajal. Lisaks vähendab Gzipping või Brotli tihendamine veelgi kasutajatele pakutavate varade suurust.
Kasutage konkreetsete kasutusjuhtude jaoks väiksemaid VUE alternatiive
Projektide jaoks, kus täielik Vue.js raamistik võib olla liiga raske, eriti progresseeruvate täiustusjuhtumite puhul, kaaluge kergemate alternatiivide kasutamist nagu Petite Vue, mis on ainult umbes 6 kb. See on kasulik, kui projekt ei vaja täielikku Vue ökosüsteemi.
ulatus ja import ainult vajalikud osad raamatukogudest
Paljud suured raamatukogud, näiteks alglaadimise Vue või Lodash, võimaldavad importida ainult konkreetseid komponente või funktsioone, mitte kogu raamatukogu. Näiteks importige kogu alglaadimisraamatukogu importimise asemel ainult vajalikke komponente, mis vähendab kimbu suurust, välistades kasutamata osad. Sarnaselt funktsioneerib impordi Lodash modulaarselt (kogu Lodash asemel Impordi kaart 'Lodas/MAP' ').
Vältige sisemisi stiile ja suuri CSS -i raamistikuid, kui seda pole vaja
CSS -i raamistikud, näiteks alglaadimine, lisage kimbu suurusesse. Hinnake, kas vajate tõesti kogu raamistikku, ja kaaluge paindlikumate ja väiksemate CSS -kimbrite jaoks alternatiive nagu Tailwind CSS. Kaaluge ka kasutamata stiili impordi eemaldamist või võimaluse korral CSS -i väliselt majutamist.
serveripoolse renderdamise ja staatilise saidi genereerimise
Mõne renderdamise SSR-i (serveripoolse renderdamise) või SSG (staatilise saidi genereerimise) kaudu kolimine vähendab kliendi poolel vajaliku JavaScripti kogust, vähendades kimbu suurust tõhusalt. See nihutab vastutuse serverisse, saates kliendile eelnevalt ehitatud HTML-i interaktiivsuse jaoks minimaalse JS-iga.
optimeerige pilte ja muid varasid
Kuigi see ei mõjuta otseselt JavaScripti komplekti suurust, aitab piltide, fondide ja varade optimeerimine lehtede üldise koormuse jõudluse juurde, mis täiendab JavaScripti parandusi.
Kasutage targalt kaasaegseid JavaScripti funktsioone ja polüfillaid
Kaasaegse JavaScripti süntaksi kasutamine võib kaasaegsete ehitamisriistadega kombineerituna viia väiksemate kimpudeni. Vältige tarbetuid polüfillite, välja arvatud juhul, kui nad on sihitud vanematele brauseritele, ja kaaluge tingimuslikke polüfillasid, mis põhinevad kasutaja brauseri võimalustel.
VUE.JS KUMMU SUURUSE VABASTAMISE KOKKUVÕTE
- Kasutage puude raputamisega ehitamistööriistu (nt Webpack, Vite).
- Eelkompileerimismallid.
-Analüüsige komplekti sisu selliste tööriistadega nagu "Webpack-Bundle-Analyzer".
- Eemaldage või asendage rasked sõltuvused.
- Importige ainult raamatukogudest vajalikke komponente või funktsioone.
- Rakendage marsruutide ja komponentide laisk laadimine.
- Kasutage koodide jagamist ja dünaamilist importi.
- rakendage mini- ja kokkusurumist.
- Mõelge väiksematele alternatiividele, näiteks Petite Vue konkreetsete rakenduste jaoks.
- Optimeerige CSS -i kasutamist ja vältige kogu raamistike asjatult importimist.
- Kliendipoolse kimbu suuruse vähendamiseks kasutage SSR-i või SSG-d.
- Optimeerige vara ja kasutage tänapäevaseid JavaScripti funktsioone hoolikalt.