Вуглавы {{AOT супраць JIT}} супраць кампілятара React: Частка - я

Пачнем з параўнання перакладчыка і складальніка

Кампілятар з X на Y - гэта праграма, якая перакладае любую праграму p з нейкай мовы X у семантычна эквівалентную праграму p 'на нейкай мове Y такім чынам, што семантыка праграмы захоўваецца, то ёсць інтэрпрэтацыя p' з перакладчыкам для Y дадуць тыя ж вынікі і будуць мець тыя ж эфекты, што і інтэрпрэтацыя p з перакладчыкам для X.

Складальнік === Перакладчык

Складальнік Vs Interpreter

Перакладчык мовы - гэта праграма, якая выконвае любую праграму p, напісаную мовай X такім чынам, што яна выконвае эфекты і ацэньвае вынікі, як гэта прадпісана спецыфікацыяй X.

Перахопнік === Кат

Складальнік у куце 1

Агульны складальнік

Кампілятар AngularJS 1.x мае даволі агульны характар, які працуе для любога шаблону, выконваючы набор дынамічных вылічэнняў. Дзякуючы такому характару, віртуальная машына JavaScript змагаецца з аптымізацыяй разлікаў на ніжнім узроўні. Асноўная прычына:

"VM не ведае формы аб'ектаў, якія ствараюць кантэкст для логікі бруднай праверкі (г.зн. так званай вобласці), убудаваныя кэшы могуць атрымаць шмат недахопаў, што запавольвае выкананне"

Складальнікі ў куце 2 ++

JIT

На пачатковай фазе прыкладання Angular 2 пры загрузцы ў браўзэры кампілятар JIT выконвае вялікую працу (разбірае шаблоны кампанентаў кожны раз, калі карыстальнік адкрывае вэб-старонку, частку, якая ператварае шаблоны HTML у код, які можна выканаць) для аналізу кампанентаў. у дадатку падчас выканання і генераваць код у памяці. Калі старонка абнаўляецца, усе зробленыя працы выкідваюцца, і кампілятар JIT зноў усё працуе. Гэта стала сур'ёзнай няўдачай для AOT

Паток падзей са складаннем часу

  • Распрацоўка прыкладання Angular з TypeScript і кампіляцыя прыкладання з Tsc.
  • Звязванне → Звядзенне → Разгортванне
  • У кліента → Загрузіце ўсе актывы JavaScript → Вуглавыя загрузачныя сістэмы → Angular праходзіць працэс кампіляцыі JiT → Прыкладанне аказваецца
Агляд пакета JIT

AOT

Кампілятар пераўтварае код ТС у код JS (гэты JS ужо быў скампіляваны і для вуглавых). Цяпер гэты кампіляваны код JS зноў складаецца браўзэрам, каб HTML мог быць аказаны. Такім чынам, магчымасці кутняга ўжо паклапаціліся кампілятарам AOT, і таму браўзэр не павінен моцна хвалявацца з нагоды выяўлення змяненняў, стварэння кампанентаў і ўвядзення залежнасці.

Складанне AOT

Такім чынам, мы перамяшчаем кампіляцыю з часу выканання (браўзэра) на стварэнне зыходнага кода. Такім чынам, кампіляцыя адбываецца толькі адзін раз падчас зборкі, і нам больш не трэба дастаўляць у камплект кутні кампілятар і HTML-шаблоны.

У Angular 5+ вы зможаце грэбаваць JiT і прайсці поўны AoT, нават пры распрацоўках.

Паток падзей з апярэджваннем часу

  • Распрацоўка вуглавых прыкладанняў з TypeScript → Кампіляцыя прыкладання з ngc → Выконвае кампіляцыю шаблонаў з вуглавым кампілятарам і стварае (звычайна) TypeScript
  • Кампіляцыя кода TypeScript у JavaScript → Згушчэнне → Змяненне → Разгортванне
  • Кліент → Загрузіце ўсе актывы → Вуглавыя загрузкі і аказанне прыкладанняў
Агляд пакета AOT

Асаблівасці AOT

Больш хуткае рэндэрынг, меншая колькасць асінхронных запытаў, меншы памер загрузкі рамкі і выяўленне памылак у шаблоне раней

Укладальнік у Рэакт

JSX падтрымлівае як Babel, так і TypeScript з самага пачатку, што зрабіла інтэграцыю з зборкай JavaScript простым і рэагаваць не хвалюе версія, якая выкарыстоўваецца Babel і TypeScript, што менш турбуе.

Кампілятар First React ацэньвае дрэвы кампанентаў React і робіць інтэлектуальныя аптымізацыі кампанентаў React. Кампілятар рэагавання павінен ведаць каранёвы кампанент пакета прыкладанняў і адразу ж улічваючы, што ён павінен аўтаматычна высветліць усё кампанентнае дрэва кампанентаў з гэтага.

Каб паведаміць кампілятару React, што з'яўляецца каранёвым кампанентам вашага прыкладання, вы павінны выкарыстоўваць глабальную функцыю Prepack пад назвай __optimizeReactComponentTree (MyRootReactComponent). Напрыклад, у вашым sourecode (перад тым, як звязаць яго і перадаць яго ў Prepack), вы можаце:

// MyComponent.js
import React ад «рэагаваць»;
клас MyComponent пашырае React.Component {
  render () {
    вярнуцца  Прывітанне, свет! ;
  }
}
// __optimizeReactComponentTree вядомы толькі ў Prepack
// таму мы загартоўваем яго ўмоўна, каб код усё яшчэ працаваў
// для тэставання мясцовага развіцця без Prpeack
калі (глабальны .__ optimizeReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

React кампілюе код JavaScript, які маніпулюе віртуальным DOM, у той час як Angular кампілюе код JavaScript, які кіруе DOM непасрэдна. Існуе не вельмі глыбокае разуменне як вуглавога, так і рэагавання на ўзроўні кода. Давайце даведаемся больш на маім наступным блогу. :)