Burchaklar {{AOT vs JIT}} vs React kompilyatori: Part - I

Tarjimon va Kompilyatorni taqqoslashdan boshlaylik

X dan Y gacha bo'lgan kompilyator - bu biron bir dasturni biron bir X tilidan semantikaviy ekvivalenti bo'lgan dasturni p tiliga Y dasturining semantikasi saqlanib qoladigan tarzda tarjima qiladigan dastur, ya'ni p ′ ni tarjimon bilan tarjima qilish. Y uchun bir xil natijalar beradi va X uchun tarjimon bilan pni tarjima qilish kabi ta'sir qiladi.

Tuzuvchi === Tarjimon

Tuzuvchi va tarjimon

A tilining tarjimoni bu X tilida yozilgan har qanday dasturni bajaradigan dastur bo'lib, u effektlarni bajaradi va X spetsifikatsiyasida belgilangan natijalarni baholaydi.

Interceptor === ijrochi

1-burchakdagi kompilyator

Umumiy kompilyator

AngularJS 1.x kompilyatori tabiatda juda umumiy bo'lib, u dinamik hisoblashlar to'plamini bajarish orqali har qanday shablonga ishlaydi. Shu sababli JavaScript Virtual Machine pastki darajadagi hisoblashni optimallashtirish bilan kurashmoqda. Buning asosiy sababi:

"VM iflos mantiqiy kontekstni ta'minlaydigan ob'ektlarning shakllarini bilmaydi (ya'ni," soha "deb ataladi), o'rnatilgan keshlar juda ko'p xatolarga yo'liqib, ularning bajarilishini sekinlashtiradi"

Burchak 2 ++ kompilyatorlari

JIT

Brauzerga yuklanganida Angular 2 dasturining dastlabki bosqichida JIT kompilyatori ko'p ishlarni bajaradi (foydalanuvchi veb-sahifani ochganda har safar komponentlar shablonlarini tahlil qiladi, HTML-shablonlarni ishga tushadigan kodga aylantiradigan qism). dastur ish vaqtida va xotirada kodni yaratish. Sahifa yangilanganda, bajarilgan barcha ishlar tashlab yuboriladi va JIT kompilyatori bu ishni yana takrorlaydi. Bu AOT uchun katta muvaffaqiyatsizlik bo'ldi

Just-in-Time kompilyatsiyasi bilan voqealar oqimi

  • TypeScript yordamida burchakli dasturni ishlab chiqish va Tsc yordamida dasturni tuzish.
  • To'plam → Minifikatsiya → Joylashtirish
  • Mijozda → JavaScript-ning barcha aktivlarini yuklab olish → Burchagi yuklash chiziqlari → Burchaklar JiT kompilyatsiya jarayonidan o'tadi → Ilova taqdim etiladi
JIT to'plamiga umumiy nuqtai

AOT

Tuzuvchi TS kodini JS kodiga o'zgartiradi (bu JS allaqachon burchak uchun ham tuzilgan). Endi ushbu kompilyatsiya qilingan JS kod yana brauzer tomonidan kompilyatsiya qilinadi, shunda HTMLni ko'rsatish mumkin bo'ladi. Shunday qilib, burchakning xususiyatlari AOT kompilyatori tomonidan allaqachon e'tiborga olingan va shuning uchun brauzer o'zgarishni aniqlash, komponentlarni yaratish va bog'liqlik in'ektsiyasi haqida ko'p tashvishlanishga hojat yo'q.

AOT kompilyatsiyasi

Shunday qilib, biz kompilyatsiyani ish vaqtidan tashqarida (brauzer) manba kodlarini yaratishga o'tkazamiz. Bu usul kompilyatsiya faqat bir marta amalga oshiriladi va biz endi burchak to'plamchisini va HTML shablonlarini to'plamga yuborishimiz shart emas.

5+ burchagida siz JiT-ni e'tiborsiz qoldirib, to'liq AoT-ga o'tishingiz mumkin, hatto rivojlanish uchun ham !!!

Oldindagi kompilyatsiya bilan voqealar oqimi

  • TypeScript yordamida burchakli dasturni ishlab chiqish → Ngc bilan dasturni kompilyatsiya qilish Angular kompilyatori yordamida shablonlarni kompilyatsiya qilishni amalga oshiradi va (odatda) TypeScript-ni yaratadi
  • JavaScript-ga TypeScript kodni kompilyatsiya qilish → To'plamga kiritish → Minimatsiya → Joylashtirish
  • Mijoz → Barcha aktivlarni yuklab olish → Burchaklar va dasturlarni taqdim qilish
AOT to'plamiga umumiy nuqtai

AOT xususiyatlari

Tezroq ishlash, kamroq asenkron talablar, Kichik burchakli ramkalarni yuklab olish hajmi va shablon xatolarini oldinroq aniqlash

Reaktsiyada kompilyator

JSX ikkala Babel va TypeScript-ni qo'llab-quvvatlaydi, bunda JavaScript bilan integratsiyani osonlashtirgan va reaktsiya qilgan Babel va TypeScript ikkalasi ham foydalanadigan versiyani ahamiyatsiz qiladi.

Birinchi React kompilyatori React komponentlarining daraxtlarini baholaydi va sizning React tarkibiy qismlariga aqlli optimizm qiladi. Reaktiv kompilyator dastur to'plamining ildiz tarkibiy qismini bilishi kerak va shu bilan tarkibiy qismlarning butun tarkibiy daraxtini avtomatik ravishda aniqlab olishi kerak.

React kompilyatoriga sizning dasturingiz uchun asosiy tarkibiy qism nima ekanligini aytish uchun __optimizeReactComponentTree (MyRootReactComponent) deb nomlangan Prepack global funktsiyasidan foydalanishingiz kerak. Masalan, o'zingizning dastlabki kodingizda (to'plamdan va to'plamga topshirishdan oldin) quyidagilarni qilishingiz mumkin:

// MyComponent.js
'reaktsiya' dan import qilish reaktsiyasi;
MyComponent sinfi React.Componentni kengaytiradi {
  render () {
    return  Salom dunyo! ;
  }
}
// __optimizeReactComponentTree faqat Prepack-ga ma'lum
// shuning uchun biz uni shartli ravishda o'rab olamiz, shuning uchun kod hali ham ishlaydi
// Prpeacksiz mahalliy rivojlanish sinovlari uchun
if (global .__ optimizReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

Virtual DOMni boshqaradigan JavaScript kodiga reaktsiya kompilyatorlari, Angular esa DOMni to'g'ridan-to'g'ri boshqaradigan JavaScript kodiga kompilyatsiya qiladi. Burchaklar va kodlar darajasida unchalik chuqur tushuncha yo'q. Keyingi blogimda ko'proq ma'lumot olishimga imkon bering. :)