งบประมาณด้านประสิทธิภาพด้วย Angular CLI

ตรวจสอบขนาดของ Bundle เมื่อเวลาผ่านไปเพื่อให้แอปพลิเคชันของคุณทำงานได้เร็ว

Minko Gechev

การเพิ่มประสิทธิภาพแอปพลิเคชัน Angular มีความสำคัญ แต่คุณจะแน่ใจได้อย่างไรว่าประสิทธิภาพจะไม่ถดถอยเมื่อเวลาผ่านไป ด้วยการแนะนำเมตริกประสิทธิภาพและตรวจสอบเมตริกเหล่านั้นในการเปลี่ยนแปลงโค้ดแต่ละครั้ง

เมตริกที่สำคัญอย่างหนึ่งคือขนาดของ JavaScript ที่มาพร้อมกับแอปพลิเคชัน การใช้งบประมาณด้านประสิทธิภาพที่คอยตรวจสอบคำขอบิลด์หรือคำขอพุลแต่ละรายการ จะช่วยให้การเพิ่มประสิทธิภาพยังคงอยู่เมื่อเวลาผ่านไป

คำนวณงบประมาณด้านประสิทธิภาพ

คุณสามารถใช้เครื่องคำนวณงบประมาณออนไลน์นี้เพื่อประมาณ JavaScript ที่แอปสามารถโหลดได้ โดยขึ้นอยู่กับเวลาที่ใช้ในการโต้ตอบที่คุณต้องการ

กำหนดค่างบประมาณด้านประสิทธิภาพใน Angular CLI

เมื่อมีงบประมาณ JavaScript เป้าหมายแล้ว คุณจะบังคับใช้ได้โดยใช้อินเทอร์เฟซบรรทัดคำสั่ง Angular (CLI) ดูวิธีการทำงานได้ที่แอปตัวอย่างนี้ใน GitHub

คุณจะเห็นว่าได้กำหนดค่างบประมาณต่อไปนี้ใน angular.json แล้ว

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

ข้อมูลที่ระบุไว้โดยสรุปมีดังนี้

• มีงบประมาณสำหรับกลุ่ม JavaScript ที่ชื่อ main
• หากแพ็กเกจ main มีขนาดใหญ่กว่า 170 KB Angular CLI จะแสดงคำเตือนในคอนโซลเมื่อคุณสร้างแอป
• หากแพ็กเกจ main มีขนาดใหญ่กว่า 250 KB บิลด์จะไม่สำเร็จ

คราวนี้ให้ลองสร้างแอปโดยเรียกใช้ ng build --prod

คุณควรเห็นข้อผิดพลาดนี้ในคอนโซล

หากต้องการแก้ไขข้อผิดพลาดในการสร้าง โปรดดูที่ app.component.ts ซึ่งมีการนำเข้าจาก rxjs/internal/operators นี่คือการนำเข้าแบบส่วนตัวที่ผู้บริโภคของ rxjs ไม่ควรใช้งาน ช่วยเพิ่มขนาดกลุ่มได้มาก เมื่อคุณอัปเดตเป็นการนำเข้าที่ถูกต้อง rxjs/operators และเรียกใช้บิลด์อีกครั้ง คุณจะเห็นว่าเวอร์ชันผ่านการตรวจสอบงบประมาณสำเร็จแล้ว

โปรดทราบว่าเนื่องจากการโหลดที่แตกต่างกันจะเปิดใช้อยู่โดยค่าเริ่มต้นใน Angular CLI คำสั่ง ng build จะสร้างแอป 2 บิลด์ดังนี้

• บิลด์สำหรับเบราว์เซอร์ที่มีการรองรับ ECMAScript 2015 บิลด์นี้มี Polyfill น้อยลงและมีไวยากรณ์ JavaScript ที่ทันสมัยมากขึ้น ไวยากรณ์ดังกล่าวสื่อความหมายชัดเจนกว่า ซึ่งทำให้กลุ่มมีขนาดเล็กลง
• บิลด์สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่มีการรองรับ ECMAScript 2015 ไวยากรณ์ที่เก่ากว่าจะแสดงได้น้อยกว่าและต้องใช้ Polyfill มากกว่า ซึ่งจะนำไปสู่แพ็กเกจที่ใหญ่ขึ้น

ไฟล์ index.html ของแอปตัวอย่างจะอ้างถึงบิลด์ทั้ง 2 เวอร์ชันเพื่อให้เบราว์เซอร์ที่ทันสมัยสามารถใช้ประโยชน์จากบิลด์ ECMAScript 2015 ที่มีขนาดเล็กลงมา และเบราว์เซอร์รุ่นเก่าจะถอยกลับไปใช้บิลด์ ECMAScript 5 ได้

ใช้งบประมาณเป็นส่วนหนึ่งของการผสานรวมอย่างต่อเนื่อง

การผสานรวมอย่างต่อเนื่อง (CI) ช่วยให้ตรวจสอบงบประมาณของแอปเมื่อเวลาผ่านไปได้อย่างสะดวก โชคดีที่วิธีที่รวดเร็วที่สุดในการตั้งค่าคือการสร้างแอปด้วย Angular CLI โดยไม่จำเป็นต้องทำขั้นตอนเพิ่มเติม เมื่อใดก็ตามที่กลุ่ม JavaScript ใช้งบประมาณเกินงบประมาณ กระบวนการจะออกด้วยรหัส 1 และการสร้างจะล้มเหลว

นอกจากนี้ คุณยังกำหนดงบประมาณด้านประสิทธิภาพโดยใช้ bundlesize และ Lighthouse ได้หากต้องการ ความแตกต่างที่สำคัญระหว่างงบประมาณด้านประสิทธิภาพใน Angular CLI และ Lighthouse คือเมื่อมีการตรวจสอบ Angular CLI จะทำการตรวจสอบ ณ เวลาบิลด์ โดยดูที่เนื้อหาการใช้งานจริงและยืนยันขนาดของชิ้นงาน อย่างไรก็ตาม Lighthouse จะเปิดแอปพลิเคชันเวอร์ชันที่ทำให้ใช้งานได้แล้วและวัดขนาดเนื้อหา ทั้ง 2 วิธีนี้มีทั้งข้อดีและข้อเสีย การตรวจสอบที่ Angular CLI มีประสิทธิภาพน้อยกว่าแต่เร็วกว่ามากเนื่องจากเป็นการค้นหาดิสก์เพียงครั้งเดียว ในทางตรงกันข้าม LightWallet ของ Lighthouse จะตรวจสอบได้อย่างแม่นยำมากโดยพิจารณาทรัพยากรที่โหลดแบบไดนามิก แต่ต้องทำให้แอปใช้งานได้และเปิดแอปทุกครั้งที่ทำงาน

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

บทสรุป

ตั้งงบประมาณด้านประสิทธิภาพด้วย Angular CLI เพื่อให้แน่ใจว่าประสิทธิภาพของแอป Angular จะไม่ถดถอยเมื่อเวลาผ่านไป

1. กําหนดเกณฑ์พื้นฐานสําหรับขนาดทรัพยากรโดยใช้เครื่องคํานวณงบประมาณหรือทําตามแนวทางปฏิบัติขององค์กร
2. กำหนดค่าขนาดงบประมาณใน angular.json ที่น้อยกว่า projects.[PROJECT-NAME].architect.build.configurations.production.budgets
3. ระบบจะบังคับใช้งบประมาณโดยอัตโนมัติในแต่ละบิลด์ที่มี Angular CLI
4. ลองใช้การตรวจสอบงบประมาณโดยเป็นส่วนหนึ่งของการผสานรวมอย่างต่อเนื่อง (ซึ่งทำได้โดยใช้ Angular CLI)