Kotni {{AOT proti JIT}} proti React prevajalnik: Del - I

Začnimo s primerjanjem tolmača in prevajalca

Prevajalnik od X do Y je program, ki kateri koli program p prevede iz nekega jezika X v pomensko enakovreden program p 'v nekem jeziku Y tako, da se ohrani semantika programa, tj. Tolmačenje p' s tolmačem za Y bo dala enake rezultate in imela enake učinke kot razlaga p s tolmačem za X.

Prevajalnik === Prevajalec

Compiler Vs Interpreter

Tolmač jezika A je program, ki izvede kateri koli program p, napisan v jeziku X, tako da izvaja učinke in oceni rezultate, kot jih predpisuje specifikacija X.

Prestreznik === Izvajalec

Sestavljalec v kotni 1

Generični prevajalnik

AngularJS 1.x prevajalnik, ki je precej splošne narave, ki deluje za katero koli predlogo z izvajanjem nabora dinamičnih izračunov. Zaradi te narave se JavaScript navidezni stroj bori z optimizacijo izračuna na spodnji ravni. Glavni razlog za to je:

"VM ne pozna oblik predmetov, ki zagotavljajo kontekst za umazano preverjanje logike (tj. Tako imenovani obseg), vgrajeni predpomnilniki dobijo veliko zamud, kar upočasni izvedbo."

Prevajalniki v kotni 2 ++

JIT

V začetni fazi aplikacije Angular 2 ob zagonu v brskalniku prevajalnik JIT opravi veliko dela (razčleni predloge komponent vsakič, ko uporabnik odpre spletno stran, del, ki pretvori predloge HTML v kodo, ki jo lahko izpelje) za analizo komponent v aplikaciji med izvajanjem in ustvari kodo v pomnilniku. Ko se stran osveži, se vse opravljeno delo vrže stran in prevajalnik JIT delo opravi znova. To je močno spodbudilo AOT

Tok dogodkov s kompilacijo Just-in-Time

  • Razvoj Angular aplikacije s TypeScriptom in kompilacija aplikacije s Tsc.
  • Povezovanje → Zmanjšanje → Razmestitev
  • Pri stranki → Prenesite vsa sredstva JavaScript → Kotna zagonska orodja → Kotna gre skozi postopek kompilacije JiT → Aplikacija postane upodobljena
Pregled svežnja JIT

AOT

Prevajalnik pretvori kodo TS v kodo JS (ta JS je že sestavljen tudi za kotne). Zdaj to zbrano kodo JS znova zbere brskalnik, tako da je mogoče upodobiti HTML. Prevajalnik AOT je že poskrbel za funkcije kotnih, zato brskalniku ni treba skrbeti veliko za odkrivanje sprememb, ustvarjanje komponent in vbrizgavanje odvisnosti.

AOT kompilacija

Tako kompilacijo premaknemo iz časa izvajanja (brskalnika) v generacijo izvorne kode. Tako se kompilacija zgodi le enkrat v času gradnje in nam ni več treba pošiljati kotnega prevajalnika in predloge HTML v paket.

V Angularju 5+ boste JiT lahko zanemarili in naredili poln AoT, tudi za razvojne uspehe !!!

Tok dogodkov s predčasno kompilacijo

  • Razvoj programa Angular s TypeScript → Kompilacija aplikacije z ngc → Izvaja kompilacije predloge s kotnim prevajalnikom in ustvarja (običajno) TypeScript
  • Kompilacija kode TypeScript v JavaScript → Združevanje → Minifikacija → Uvajanje
  • Naročnik → Prenesite vsa sredstva → Kotna zagonska orodja in upodabljanje aplikacij
Pregled skupine AOT

AOT funkcije

Hitrejše upodabljanje, manj asinhronih zahtev, manjša velikost prenosa kotnega okvira in prej zaznavanje napak v predlogi

Prevajalnik v React

JSX podpira Babel in TypeScript že od samega začetka, zaradi česar je bila integracija z gradnjo JavaScript enostavna in se ne odziva na različico, ki jo uporabljata tako Babel kot TypeScript, kar je manj skrbi.

Prevajalnik React oceni drevesa komponent React in opravi inteligentne optimizacije vaših komponent React. React prevajalnik mora poznati korensko komponento svežnja aplikacij in ko prejme, da mora samodejno razbrati celotno drevo sestavnih delov iz tega.

Če želite prevajalniku React povedati, kaj je korenska komponenta za vašo aplikacijo, morate uporabiti globalno funkcijo Prepack z imenom __optimizeReactComponentTree (MyRootReactComponent). Na primer v sourekodi (preden jo povežete in pošljete v Prepack):

// MyComponent.js
import React iz 'reagirati';
razred MyComponent razširja React.Component {
  render () {
    vrni se  Pozdravljeni svet! ;
  }
}
// __optimizeReactComponentTree je znan le v podjetju Prepack
// zato jo zavijemo v pogojno, da koda še vedno deluje
// za lokalno razvojno testiranje brez Prpeacka
if (globalno .__ optimizeReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

React prevaja na JavaScript kodo, ki manipulira z virtualnim DOM-om, medtem ko Angular prejema JavaScript kodo, ki neposredno upravlja DOM. Tako kotnega kot na ravni kode ni veliko razumevanja. Naj več raziskujem na naslednjem blogu. :)