de Kamil Maraz

Cum să activați compilarea anticipată într-o aplicație hibridă Angular

Și de ce ai vrea să faci asta

Compilația Ahead-of-Time (AOT) este un cuvânt important în comunitatea Angular. Toată lumea vrea să o pună în funcțiune. Dacă începeți cu un nou proiect folosind CLI unghiular, ai câștigat. Nu este nimic mai simplu decât să faci asta include opțiunea „- nu” în terminalul tău.

Dar dacă aveți o configurație Webpack personalizată? Sau îl folosești Modul de actualizare și aveți o aplicație hibridă Angular? Aruncați o privire la modul în care am tratat această problemă specială Administrator – interfață de administrare pentru Slido utilizatori.

1611437888 Diferentele dintre cronometrele API asincrone JavaScript

Înainte de timp vs. Just-in-Time

Diferența dintre AOT și Just-in-Time Compilation (JIT) constă în etapa în care se întâmplă compilarea. Cu AOT, vorbim despre faza de construcție. Se întâmplă înainte de a rula aplicația în browser. Compilarea JIT are loc atunci când aplicația rulează în browser.

După cum se menționează în Ghid unghiular:

„Compilatorul Angular Ahead-of-Time vă convertește codul HTML și TypeScript angular în cod JavaScript eficient în faza de compilare înainte ca browserul să descarce și să execute codul respectiv”

Unul dintre avantajele activării AOT este redare mai rapidă a aplicației. Deoarece toate părțile aplicației sunt deja compilate atunci când sunt descărcate de browser, există o scădere semnificativă a timpului de încărcare a aplicației, precum și a timpilor de redare în timpul utilizării sale.

Un alt beneficiu poate fi un dimensiune mai mică a pachetului. Când utilizați AOT, nu trebuie să includeți @ unghiular / compilator deoarece nu mai este nevoie. Aplicația compilată poate crește în dimensiunea pachetului, dar acest lucru depinde puternic de specificul aplicației dvs.

În al treilea rând, există o posibilitate mult mai mare identificarea erorilor de compilare în șabloane, deoarece veți fi notificat de compilator în timpul construirii. Dacă utilizați Visual Studio Code, puteți utiliza Extensie Angular Language Service deoarece are diagnosticarea AOT activată în timp real.

Pașii necesari pentru a activa AOT

Primul pas, așa cum se întâmplă, este să alergi instalare npm @ ngtools / webpack.

Apoi, trebuie să configurați Webpack corect. În acest pas, doriți să configurați AngularCompilerPlugin care vine cu @ngtools. Folosind parametrii de configurare veți seta locațiile fișierelor tsconfig și entry. De cele mai multe ori doriți să utilizați tsconfigs separate pentru JIT și pentru AOT. Veți vedea de ce într-o clipă.

În tsconfig-ul dvs. standard trebuie să excludeți fișierul main.aot.ts, care este punctul de intrare pentru aplicațiile compilate folosind AOT. În acest fișier, veți importa fișiere care vor fi disponibile numai în timpul construirii. În acest fel puteți separa cu ușurință construcțiile JIT și AOT, fără erori.

Tsconfig pentru AOT este obișnuit. Nu este nimic special în acest sens.

Următorul fișier este aici pentru a demonstra cum putem împărți build-urile între JIT și AOT. În acest caz, JIT este utilizat într-un mediu de dezvoltare și AOT este utilizat în producție.

AOT folosește platformBrowser în loc de platformBrowserDynamic. Următorul pas important este să importați fișiere din fabrică care vor fi disponibile în timpul construcției.

Imbunatatiri ale performantei

De la început, am vrut să avem AOT activat dintr-un motiv – să avem o performanță mai bună Administrator cerere. Aceasta este o scurtă comparație a ceea ce sa îmbunătățit și a rămas același:

După cum puteți vedea, timpul de încărcare inițial a scăzut semnificativ chiar și atunci când dimensiunea pachetului a crescut ușor.

Cum sa activati compilarea anticipata intr o aplicatie hibrida Angular
Apdex a fost măsurat înainte și după lansarea AOT în producție.
1611508266 636 Cum sa activati compilarea anticipata intr o aplicatie hibrida Angular
Timpii medii de încărcare au scăzut chiar și atunci când randamentul a rămas același.
1611508266 815 Cum sa activati compilarea anticipata intr o aplicatie hibrida Angular
Timpul mediu de încărcare comparat într-o suprapunere de histogramă (întuneric = JIT, luminos = AOT).

Învelire

Activarea AOT a dus la o îmbunătățire notabilă pentru toți utilizatorii noștri. Timpii de încărcare inițiali s-au îmbunătățit semnificativ, iar aplicația a accelerat și.

Dacă nu v-ați gândit niciodată să activați AOT în producție, este momentul. Aveți întrebări despre acest subiect? Nu ezitați să mă contactați.