Kampinis {{AOT vs JIT}} vs „React“ sudarytojas: I dalis

Pradėkime nuo vertėjo ir kompiliatoriaus palyginimo

Kompiliatorius nuo X iki Y yra programa, išversianti bet kurią programą p iš tam tikros kalbos X į semantiškai ekvivalentišką programą p ′ tam tikra kalba Y taip, kad būtų išsaugota programos semantika, ty kad p ′ interpretuojama vertėjo pagalba. Y atveju duos tuos pačius rezultatus ir turės tuos pačius efektus kaip ir aiškinant p su X vertėju.

Sudarytojas === Vertėjas

Sudarytojas Vs vertėjas

A kalbos vertėjas yra programa, vykdanti bet kurią programą p, parašytą X kalba, kad ji atliktų efektus ir įvertintų rezultatus, kaip nurodyta X specifikacijoje.

Tardytojas === Vykdytojas

Kompiliatorius 1 kampu

Bendrasis kompiliatorius

„AngularJS 1.x“ kompiliatorius, kuris yra gana bendro pobūdžio ir tinka bet kuriam šablonui, atliekant dinaminių skaičiavimų rinkinį. Dėl šios prigimties „JavaScript“ virtuali mašina stengiasi optimizuoti skaičiavimą žemesniame lygmenyje. Pagrindinė priežastis yra:

"VM nežino objektų, sudarančių nešvaraus tikrinimo logikos kontekstą, formų (t. Y. Vadinamosios apimties), vidiniuose talpyklose gausu klaidų, kurios sulėtina vykdymą"

Kompiliatoriai kampu 2 ++

JIT

Pradiniame „Angular 2“ programos etape, kai įkeliama naršyklėje, JIT kompiliatorius atlieka daug darbo (analizuoja komponentų šablonus kiekvieną kartą, kai vartotojas atidaro tinklalapį, dalį, kuri HTML šablonus paverčia paleidžiamu kodu), kad išanalizuotų komponentus. programoje paleisti ir sugeneruoti kodą atmintyje. Atnaujinus puslapį, visas atliktas darbas yra išmestas, o JIT kompiliatorius vėl viską atlieka. Tai buvo pagrindinė nesėkmė, lemianti AOT

Įvykių srautas naudojant rinkinį „Tiesiogiai laike“

  • Kampinės programos su „TypeScript“ kūrimas ir programos kompiliavimas naudojant „Tsc“.
  • Komplektavimas → Mažinimas → Diegimas
  • Kliente → Atsisiųskite visą „JavaScript“ išteklius → Kampinės įkrovos juostos → Kampinis eina per „JiT“ kompiliavimo procesą → Taikoma programa
JIT paketo apžvalga

AOT

Kompiliatorius paverčia TS kodą į JS kodą (šis JS taip pat jau buvo sudarytas kampiniam). Dabar šis kompiliuotas JS kodas vėl sudaromas naršyklėje, kad būtų galima pateikti HTML. Taigi AOT kompiliatorius jau pasirūpino kampinėmis savybėmis, todėl naršyklei nereikia daug jaudintis dėl pokyčių aptikimo, komponentų kūrimo ir priklausomybės įpurškimo.

AOT kompiliacija

Taigi perkeliame rinkinį iš vykdymo laiko (naršyklės) į šaltinio kodo generavimą. Tokiu būdu kompiliacija vyksta tik vieną kartą kuriant ir mums nebereikia gabenti kampinio kompiliatoriaus ir HTML šablonų į paketą.

5 ir daugiau kampų kampu jūs galėsite nepaisyti „JiT“ ir visiškai pasirinkti „AoT“, net jei norite kurti plėtrą !!!

Įvykių srautas prieš rinkinį

  • Kampinės programos su „TypeScript“ kūrimas → Programos kompiliacija su ngc → Atlieka šablonų kompiliavimą su kampiniu kompiliatoriumi ir sukuria (paprastai) „TypeScript“
  • „TypeScript“ kodo kompiliavimas į „JavaScript“ → „Bundling“ → „Minification“ → „Diegimas“
  • Klientas → Atsisiųskite visą informaciją → Kampinės įkrovos juostos ir programų atvaizdavimas
AOT paketo apžvalga

AOT savybės

Greitesnis pateikimas, mažiau asinchroninių užklausų, mažesnio kampinio rėmelio atsisiuntimo dydis ir anksčiau aptiktos šablono klaidos

Kompiliatorius „React“

„JSX“ palaiko ir „Babel“, ir „TypeScript“ nuo pat pradžių pradžios, todėl integracija į „JavaScript“ buvo lengvai atliekama ir reaguoja, nesirūpina nei „Babel“, nei „TypeScript“ naudojama versija, o tai kelia mažiau rūpesčių.

Pirmasis „React“ kompiliatorius įvertina „React“ komponentų medžius ir intelektualiai optimizuoja jūsų „React“ komponentus. „React“ kompiliatorius turi žinoti pagrindinį programos rinkinio komponentą ir, kai tik yra, automatiškai išsiaiškins visą komponentų medį iš jo.

Norėdami pasakyti „React“ kompiliatoriui, kas yra pagrindinis jūsų programos komponentas, turite naudoti visuotinę „Prepack“ funkciją, vadinamą __optimizeReactComponentTree (MyRootReactComponent). Pvz., Savo sourecode (prieš rinkdami jį į paketą ir perduodami „Prepack“) galite padaryti:

// „MyComponent.js“
importuoti „reaguoti“ iš „reaguoti“;
klasė „MyComponent“ praplečia „React.Component“ {
  pateikti () {
    grįžti  labas pasaulis! ;
  }
}
// __optimizeReactComponentTree yra žinomas tik „Prepack“
// taigi mes suvyniojame jį į sąlyginį, kad kodas vis tiek veiktų
// vietos plėtros testavimui be „Prpeack“
if (global .__ optimizeReactComponentTree) {
  __optimizeReactComponentTree („MyComponent“);
}
module.exports = „MyComponent“;

Reaktyvusis kaupia „JavaScript“ kodą, kuris manipuliuoja virtualiu DOM, o kampinis - „JavaScript“ kodu, kuris tiesiogiai manipuliuoja DOM. Nelabai suprantama tiek kampinė, tiek reaguojanti kodo lygmeniu. Leiskite panagrinėti daugiau kitame mano tinklaraštyje. :)