การคอมไพล์ Just-in-Time (JiT) กับ Ahead-of-Time (AoT) ใน Angular

ฉันอ้างถึงเอกสารนี้และเจอแนวคิดการรวบรวม หนึ่งสามารถใช้การรวบรวม JIT หรือ AOT อย่างไรก็ตามฉันพบว่ามันสั้นมากและจำเป็นต้องทราบรายละเอียดต่อไปนี้

• ความแตกต่างระหว่างสองเทคนิคนี้
• คำแนะนำเกี่ยวกับเวลาที่ควรใช้

JIT - คอมไพล์ TypeScript ทันเวลาสำหรับการเรียกใช้งาน

• คอมไพล์ในเบราว์เซอร์
• แต่ละไฟล์คอมไพล์แยกกัน
• ไม่จำเป็นต้องสร้างหลังจากเปลี่ยนรหัสของคุณและก่อนที่จะโหลดหน้าเบราว์เซอร์ใหม่
• เหมาะสำหรับการพัฒนาท้องถิ่น.

AOT - คอมไพล์ TypeScript ระหว่างขั้นตอนการสร้าง

• คอมไพล์โดยเครื่องเองผ่าน command line (Faster)
• โค้ดทั้งหมดถูกคอมไพล์เข้าด้วยกันโดยมีการใส่ HTML / CSS ไว้ในสคริปต์
• ไม่จำเป็นต้องปรับใช้คอมไพเลอร์ (ครึ่งหนึ่งของขนาดเชิงมุม)
• ปลอดภัยยิ่งขึ้นและไม่เปิดเผยแหล่งที่มาดั้งเดิม
• เหมาะสำหรับงานสร้าง

แม้ว่าจะมีคำตอบอยู่บ้าง แต่ฉันก็อยากจะเพิ่มข้อค้นพบของฉันด้วยเช่นกันเพราะฉันสับสนมากกับสิ่งที่กำลังรวบรวมในทุกกรณีTS-> JSการแปลงเกิดขึ้น ฉันใช้พาราจากบล็อกของเจฟฟ์เป็นข้อมูลอ้างอิง

JIT

TSโค้ดที่เขียนโดยนักพัฒนาจะถูกรวบรวมเพื่อJSรหัส ตอนนี้jsโค้ดที่คอมไพล์นี้ถูกคอมไพล์โดยเบราว์เซอร์อีกครั้งเพื่อให้htmlสามารถแสดงผลแบบไดนามิกตามการดำเนินการของผู้ใช้และตามรหัสสำหรับangular (สำหรับส่วนประกอบการตรวจจับการเปลี่ยนแปลงการฉีดขึ้นข้างเคียง) จะถูกสร้างขึ้นที่รันไทม์ด้วย

(คอมไพเลอร์เบราว์เซอร์คือสิ่งที่ใช้คำสั่งและส่วนประกอบของแอปพลิเคชันพร้อมกับ HTML และ CSS ที่เกี่ยวข้องและสร้างโรงงานส่วนประกอบเพื่อประทับตราอินสแตนซ์อย่างรวดเร็วด้วยตรรกะการสร้างมุมมองทั้งหมด)

เมื่อแอปพลิเคชัน Angular 2 ถูกบูตในเบราว์เซอร์คอมไพเลอร์ JIT จะทำงานจำนวนมากเพื่อวิเคราะห์ส่วนประกอบในแอปพลิเคชันขณะรันไทม์และสร้างโค้ดในหน่วยความจำ เมื่อรีเฟรชเพจงานทั้งหมดที่ทำเสร็จแล้วจะถูกทิ้งไปและคอมไพเลอร์ JIT จะทำงานทั้งหมดอีกครั้ง

ทอท

TSโค้ดที่เขียนโดยนักพัฒนาจะถูกรวบรวมเพื่อJSรหัสนี้jsได้รับการเรียบเรียงสำหรับมุมเช่นกัน ตอนนี้โค้ดที่คอมไพล์ นี้jsถูกคอมไพล์โดยเบราว์เซอร์อีกครั้งเพื่อให้htmlสามารถแสดงผลได้ แต่สิ่งที่จับได้ก็คือคุณสมบัติของคอมไพเลอร์angularได้รับการดูแลAOTแล้วดังนั้นเบราว์เซอร์จึงไม่ต้องกังวลมากเกี่ยวกับการสร้างส่วนประกอบการตรวจจับการเปลี่ยนแปลงการฉีดพึ่งพา ดังนั้นเรามี:

การแสดงผลที่เร็วขึ้น

ด้วย AOT เบราว์เซอร์จะดาวน์โหลดแอปพลิเคชันเวอร์ชันที่รวบรวมไว้ล่วงหน้า เบราว์เซอร์โหลดโค้ดปฏิบัติการเพื่อให้สามารถแสดงแอปพลิเคชันได้ทันทีโดยไม่ต้องรอให้รวบรวมแอปก่อน

คำขอแบบอะซิงโครนัสน้อยลง

คอมไพเลอร์จะแทรกเทมเพลต HTML ภายนอกและสไตล์ชีต CSS ไว้ภายใน JavaScript ของแอปพลิเคชันโดยกำจัดการร้องขอ ajax แยกต่างหากสำหรับไฟล์ต้นฉบับเหล่านั้น

ขนาดดาวน์โหลดเฟรมเวิร์กเชิงมุมที่เล็กกว่า

ไม่จำเป็นต้องดาวน์โหลดคอมไพเลอร์ Angular หากคอมไพล์แอพแล้ว คอมไพเลอร์มีขนาดประมาณครึ่งหนึ่งของ Angular ดังนั้นการละเว้นจะช่วยลดน้ำหนักบรรทุกของแอปพลิเคชันได้อย่างมาก

ตรวจหาข้อผิดพลาดของเทมเพลตก่อนหน้านี้

คอมไพลเลอร์ AOT ตรวจพบและรายงานข้อผิดพลาดในการผูกเทมเพลตระหว่างขั้นตอนการสร้างก่อนที่ผู้ใช้จะเห็น

ความปลอดภัยที่ดีขึ้น

AOT รวบรวมเทมเพลตและส่วนประกอบ HTML ไว้ในไฟล์ JavaScript นานก่อนที่จะให้บริการแก่ลูกค้า เนื่องจากไม่มีเทมเพลตให้อ่านและไม่มีการประเมิน HTML หรือ JavaScript ฝั่งไคลเอ็นต์ที่มีความเสี่ยงจึงมีโอกาสน้อยลงสำหรับการโจมตีแบบฉีด

ความแตกต่างที่เหลืออยู่แล้วในหัวข้อย่อยของ Benyamin, Nisar & Gaurang

อย่าลังเลที่จะแก้ไขฉัน

Benyamin และ Nisar กล่าวถึงจุดดีบางประการที่นี่ ฉันจะเพิ่มมัน

ในทางทฤษฎี AOT ดูเป็นตัวเลือกที่น่าสนใจกว่า JIT สำหรับวัตถุประสงค์ในการผลิต แต่ฉันมีข้อสงสัยว่า AOT คุ้มจริงหรือไม่!

ฉันพบสถิติที่ดีของเจฟฟ์ครอสและพิสูจน์ได้ว่าทอท. ช่วยลดเวลาในการบูตเครื่องของแอปได้อย่างมาก ด้านล่างสแน็ปจากโพสต์ของ Jeff Cross จะให้ความคิดที่รวดเร็ว

การรวบรวม JiT (ทันเวลา)

ชื่อนั้นอธิบายถึงการทำงานมันรวบรวมโค้ดในช่วงเวลาของการโหลดหน้าเว็บในเบราว์เซอร์ เบราว์เซอร์จะดาวน์โหลดคอมไพเลอร์และสร้างรหัสแอปพลิเคชันและแสดงผล

จะดีต่อสภาพแวดล้อมการพัฒนา

AoT (ก่อนเวลา) การรวบรวม

รวบรวมรหัสทั้งหมดในเวลาที่สร้างแอปพลิเคชัน ดังนั้นเบราว์เซอร์จึงไม่ต้องการดาวน์โหลดคอมไพเลอร์และคอมไพล์โค้ด ในเบราว์เซอร์วิธีนี้สามารถแสดงผลแอปพลิเคชันได้อย่างง่ายดายเพียงแค่โหลดโค้ดที่คอมไพล์แล้ว

สามารถใช้ในสภาพแวดล้อมการผลิต

เราสามารถเปรียบเทียบการรวบรวม JiT และ AoT ได้ดังต่อไปนี้

JIT (การรวบรวมแบบทันเวลา)

Just-in-Time (JIT) คือการคอมไพล์ประเภทหนึ่งที่รวบรวมแอปของคุณในเบราว์เซอร์ขณะรันไทม์

ng build
ng serve

ทอท. (รวบรวมล่วงหน้า)

Ahead-of-Time (AOT) คือการรวบรวมประเภทหนึ่งที่รวบรวมแอปของคุณในเวลาที่สร้าง

ng build --aot
ng serve --aot

ในตอนท้ายของวัน AOT (Ahead-of-Time) และ JIT (Just-in-Time) ทำสิ่งเดียวกัน ทั้งคู่รวบรวมโค้ด Angular ของคุณเพื่อให้สามารถทำงานในสภาพแวดล้อมดั้งเดิม (หรือที่เรียกว่าเบราว์เซอร์) ความแตกต่างที่สำคัญคือเมื่อการรวบรวมเกิดขึ้น ด้วย AOT รหัสของคุณจะถูกรวบรวมก่อนดาวน์โหลด App ในเบราว์เซอร์ ด้วย JIT โค้ดของคุณจะถูกคอมไพล์ที่รันไทม์ในเบราว์เซอร์

นี่คือการเปรียบเทียบ:

ประโยชน์ของทอท.:

• เริ่มต้นได้เร็วขึ้นเนื่องจากการแยกวิเคราะห์และการรวบรวมจะไม่เกิดขึ้นในเบราว์เซอร์
• เทมเพลตได้รับการตรวจสอบระหว่างการพัฒนา (ซึ่งหมายถึงข้อผิดพลาดทั้งหมดที่เราเห็นในคอนโซล javascript ในแอพที่กำลังทำงานอยู่มิฉะนั้นจะถูกโยนทิ้งในกระบวนการสร้างของเรา)
• ขนาดไฟล์ที่เล็กลงเนื่องจากคุณสมบัติที่ไม่ได้ใช้สามารถถอดออกได้และตัวคอมไพเลอร์เองจะไม่ถูกจัดส่ง

มีคอมไพเลอร์ Angular เพียงตัวเดียว ความแตกต่างระหว่าง AOT และ JIT เป็นเรื่องของเวลาและเครื่องมือ ด้วย AOT คอมไพเลอร์จะทำงานครั้งเดียวในเวลาสร้างโดยใช้ไลบรารีชุดเดียว ด้วย JIT จะรันทุกครั้งสำหรับผู้ใช้ทุกคนที่รันไทม์โดยใช้ชุดของไลบรารีที่แตกต่างกัน

JIT คอมไพเลอร์ที่เราใช้ในระหว่างการพัฒนาโครงการเชิงมุม ในการคอมไพล์นี้ (การแปลง TS เป็น JS) เกิดขึ้นระหว่างรันไทม์ของแอปพลิเคชัน ในกรณีที่ AOT ใช้ในระหว่างการสร้างรหัสแอปพลิเคชันสำหรับการปรับใช้แอปพลิเคชันในการผลิตครั้งนั้นเราสร้างรหัสแอปพลิเคชันของเราโดยใช้คำสั่ง ng build --prod ซึ่งสร้างโฟลเดอร์ที่เรียกว่า webpack webpack จะมีบันเดิลของไฟล์ทั้งหมด (HTML , CSS และ typescript) ในรูปแบบจาวาสคริปต์ที่บีบอัด

ขนาดของโฟลเดอร์ webpack ที่สร้างขึ้นสำหรับการใช้งานจริงนั้นน้อยกว่าโฟลเดอร์ที่สร้างขึ้นสำหรับสภาพแวดล้อมการพัฒนา (โดยใช้คำสั่ง ... ng build) เนื่องจากไม่มีคอมไพลเลอร์อยู่ในโฟลเดอร์ webpack ซึ่งจะช่วยปรับปรุงประสิทธิภาพของแอปพลิเคชัน .