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

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

Minko Gechev

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

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

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

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

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

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

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

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

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

• มีงบประมาณสำหรับกลุ่ม JavaScript ชื่อ main
• หาก App Bundle 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)