ngx-fastboot: kaip padidinti kampinį greitį naudojant Bootstrap
Žiniatinklio kūrimo pasaulis nuolat tobulėja, kartu su mūsų taikomųjų programų našumo optimizavimo metodais ir strategijomis. Vienas iš labiausiai paplitusių iššūkių, su kuriais susiduria „Angular“ kūrėjai, yra pradinis jų programų įkėlimo laikas. Didėjant programos dydžiui, tampa vis svarbiau rasti sprendimus, kurie pagerintų našumą ir pagerintų vartotojo patirtį. Štai kur ngx-fastboot įsijungia.
Kas yra ngx-fastboot?
ngx-fastboot yra biblioteka, skirta dinamiškai įkelti kampinių programų konfigūracijas, optimizuoti paleidimo laiką ir sumažinti pradinio paketo dydį 🎉
Kada naudoti ngx-fastboot?
Nėra jokių apribojimų, kada integruotis ngx-fastboot į savo Angular projektą. Galite jį įdiegti iš pat pradžių arba palaukti, kol jūsų paketo dydis pradės daryti įtaką našumui 🤟
Kodėl verta naudoti ngx-fastboot?
- Pradinio paketo dydžio sumažinimas: Viena iš pagrindinių priežasčių, kodėl verta naudoti ngx-fastboot yra jos galimybė sumažinti jūsų programos pradinio paketo dydį. Įkeliant konfigūracijas atskirais gabalais, jis palengvina pagrindinį paketą, leidžianti programai paleisti greičiau.
- Patobulintas našumas: Naudojant mažesnius paketus, pradinis programos įkėlimo laikas žymiai sumažėja. Tai ypač svarbu vartotojams, turintiems lėtesnį ryšį, kai svarbus kiekvienas kilobaitas. Našumo didinimas taip pat reiškia geresnę bendrą vartotojo patirtį.
- Rekomenduojamų biudžetų susitikimas: Kampinis gali generuoti įspėjimus ir klaidas, jei pradinis paketo dydis viršija rekomenduojamas ribas. Naudojant svertą ngx-fastboot norėdami paskirstyti apkrovą keliems gabalams, galite sumažinti tikimybę susidurti su šiomis problemomis ir išlaikyti savo projektą suderintą su „Angular“ geriausia praktika.
Montavimas
Diegimas ngx-fastboot yra greita ir paprasta. Galite pridėti biblioteką prie savo kampinio projekto vykdydami šią komandą savo terminale:
npm install ngx-fastboot
Naudojimas
Įdiegę biblioteką galite pradėti ją naudoti norėdami dinamiškai įkelti programos konfigūracijas 🚀.
Sukurkite pirmąjį konfigūracijos failą src/configs/angular.configs.ts. ngx-fastboot iš esmės palaiko ir numatytąjį, ir pavadintą importavimą; patogumui naudosime numatytąjį importavimą:
import { provideHttpClient } from '@angular/common/http';
import { EnvironmentProviders, Provider, provideZoneChangeDetection } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
export default (
provideHttpClient(),
ReactiveFormsModule,
provideZoneChangeDetection({ eventCoalescing: true }),
) satisfies Array<Provider | EnvironmentProviders>;
Dabar importuokite jį į savo src/main.ts:
import { AppComponent } from './app.component';
import { bootstrapApplication } from '@angular/platform-browser';
import { fast } from 'ngx-fastboot';
fast(bootstrapApplication, AppComponent, {
providers: (
() => import('./configs/angular.configs.ts'),
)
}).catch(error => {
console.error('Error bootstrapping the app', error);
});
ngx-fastboot leidžia įtraukti teikėjus, naudojančius statinį bootstrapApplication požiūris, leidžiantis tiksliai valdyti, kurias konfigūracijas padaryti dinamiškas, o kurias – statines. Šis lankstumas padeda optimizuoti mūsų Angular programos veikimą ir organizavimą.
import { AppComponent } from './app.component';
import { bootstrapApplication } from '@angular/platform-browser';
import { fast } from 'ngx-fastboot';
fast(bootstrapApplication, AppComponent, {
providers: (
{ provide: 'BACKEND_BASE_URL', useValue: 'http://localhost:3000' },
() => import('./configs/angular.configs.ts'),
)
}).catch(error => {
console.error('Error bootstrapping the app', error);
});
Pavyzdžiui, sukurkime „Angular“ programą, kurioje inicijuojame „AngularFire“ ir „Sentry“ naudodami tradicinį metodą. Sukūrus programą, paketo struktūra bus panaši į šią:
Initial chunk files | Names | Raw size | Estimated transfer size
main-P4HRQQFP.js | main | 659.65 kB | 180.05 kB
chunk-7LRM2SDL.js | - | 53.90 kB | 15.44 kB
polyfills-DXJ4KTXW.js | polyfills | 34.52 kB | 11.29 kB
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 748.07 kB | 206.78 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-GV3HVVF4.js | index-esm | 121 bytes | 121 bytes
Application bundle generation complete. (3.898 seconds)
▲ (WARNING) bundle initial exceeded maximum budget. Budget 512.00 kB was not met by 236.07 kB with a total of 748.07 kB.
Taikydami šį metodą jau viršijome paketo dydžio ribą, todėl kampinio kūrimo proceso metu gaunamas įspėjimas!
Tačiau kreipiantis ngx-fastbootgalutinė paketo struktūra atrodys maždaug taip:
Initial chunk files | Names | Raw size | Estimated transfer size
chunk-JNUXFHNR.js | - | 194.41 kB | 52.59 kB
polyfills-DXJ4KTXW.js | polyfills | 34.52 kB | 11.29 kB
main-7SK3ZYUR.js | main | 19.74 kB | 5.46 kB
chunk-ACKELEN3.js | - | 898 bytes | 898 bytes
styles-5INURTSO.css | styles | 0 bytes | 0 bytes
| Initial total | 249.57 kB | 70.24 kB
Lazy chunk files | Names | Raw size | Estimated transfer size
chunk-OBCCKT3U.js | - | 238.00 kB | 68.07 kB
chunk-YXL5OYKA.js | firebase-config | 207.55 kB | 57.22 kB
chunk-4UC3UY4L.js | - | 53.03 kB | 15.14 kB
chunk-5G2DL2YO.js | sentry-init | 365 bytes | 365 bytes
chunk-J34TBXQP.js | sentry-config | 257 bytes | 257 bytes
chunk-V4EU5ISS.js | index-esm | 149 bytes | 149 bytes
chunk-DUM2C7A7.js | core-config | 143 bytes | 143 bytes
Application bundle generation complete. (3.864 seconds)
„Firebase“, „Sentry“ ir „Angular“ konfigūracijos yra suskirstytos į atskiras dalis, todėl rezultatas yra žymiai geresnis:
Tą patį testą galite atlikti dviejose programos versijose šioje „GitHub“ saugykloje:
Išvados
ngx-fastboot yra paprastas, bet galingas įrankis, skirtas optimizuoti Angular programų veikimą. Dinamiškai įkeldami konfigūracijas galite sumažinti pradinio paketo dydį, pailginti įkėlimo laiką ir sušvelninti kompiliavimo įspėjimus. Jei ieškote būdo optimizuoti rinkinį ir pagreitinti Angular programą, ngx-fastboot tikrai vertas dėmesio sprendimas.
Jei šis vadovas jums buvo naudingas, nepamirškite jį pažymėti 👏 ir pasidalinti su kitais, kuriems tai gali būti naudinga 😃.
Taip ilgai ir ačiū už visas žuvis 🐬
