6 เคล็ดลับและเทคนิคการปรับแต่งประสิทธิภาพเชิงมุม

เผยแพร่แล้ว: 2023-02-03

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

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

เรามาเริ่มกันที่เทคนิคเบื้องต้นสำหรับการปรับแต่งประสิทธิภาพแอปเชิงมุมอย่างง่าย

เคล็ดลับสำหรับการปรับแต่งประสิทธิภาพเชิงมุม

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

  • ใช้การรวบรวม AoT
  • ใช้กลยุทธ์การตรวจจับการเปลี่ยนแปลง OnPush
  • ใช้ท่อบริสุทธิ์
  • การใช้ TrackBy บน ngFor
  • การแยกรหัส
  • ปรับปรุงการโหลดหน้า

มาเรียนรู้เกี่ยวกับแต่ละรายละเอียดกัน

ใช้การรวบรวม AoT

เคล็ดลับสำคัญประการหนึ่งสำหรับการปรับปรุงประสิทธิภาพของแอปพลิเคชันเชิงมุมของคุณคือการใช้การคอมไพล์ Ahead-of-Time (AoT) AoT เป็นเทคนิคที่คอมไพล์ส่วนประกอบและเทมเพลตเชิงมุมของคุณไว้ล่วงหน้าในขณะสร้าง แทนที่จะคอมไพล์ในขณะรันไทม์ สิ่งนี้สามารถปรับปรุงเวลาในการโหลดแอปพลิเคชันของคุณได้อย่างมาก เนื่องจากเบราว์เซอร์ไม่จำเป็นต้องใช้เวลาในการรวบรวมเทมเพลตและส่วนประกอบเมื่อโหลดแอปพลิเคชันครั้งแรก

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

ในการเปิดใช้งานการคอมไพล์ AoT ในแอปพลิเคชันเชิงมุมของคุณ คุณต้องใช้ Angular CLI เพื่อสร้างแอปพลิเคชันของคุณด้วยแฟล็ก “–aot” สิ่งนี้จะเปิดใช้งานการคอมไพล์ AoT สำหรับแอปพลิเคชันของคุณ และบิลด์ผลลัพธ์จะได้รับการปรับให้เหมาะสมสำหรับประสิทธิภาพ นอกจากนี้ คุณสามารถใช้เครื่องมือต่างๆ เช่น คอมไพเลอร์ "ngc" ได้โดยตรง ซึ่งเป็นเครื่องมือบรรทัดคำสั่งที่ Angular CLI ใช้สำหรับการคอมไพล์ AoT

ใช้กลยุทธ์การตรวจจับการเปลี่ยนแปลง OnPush

กลยุทธ์การตรวจจับการเปลี่ยนแปลง OnPush เป็นวิธีการปรับปรุงประสิทธิภาพของแอปพลิเคชันเชิงมุมโดยการตรวจสอบการเปลี่ยนแปลงในส่วนประกอบเมื่อมีการเปลี่ยนแปลงคุณสมบัติอินพุตหรือเหตุการณ์เท่านั้น ซึ่งตรงข้ามกับกลยุทธ์ “OnPush” เริ่มต้น ซึ่งจะตรวจสอบการเปลี่ยนแปลงในส่วนประกอบและส่วนประกอบย่อยทั้งหมดทุกครั้งที่มีรอบการตรวจจับการเปลี่ยนแปลง

หากต้องการใช้กลยุทธ์ OnPush คุณต้องนำเข้าโมดูล ChangeDetectorRef และตั้งค่าคุณสมบัติ changeDetection ของ @Component decorator ของคอมโพเนนต์เป็น ChangeDetectionStrategy.OnPush

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

ใช้ท่อบริสุทธิ์

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

ในการสร้างท่อบริสุทธิ์ในเชิงมุม คุณต้องเพิ่มคุณสมบัติ pure: true ให้กับ @Pipe decorator ของท่อของคุณ

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

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

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

การใช้ TrackBy บน ngFor

trackBy เป็นคุณสมบัติใน Angular ที่ให้คุณระบุตัวระบุเฉพาะสำหรับแต่ละรายการในลูป ngFor สิ่งนี้สามารถปรับปรุงประสิทธิภาพของแอปพลิเคชันเชิงมุมโดยลดจำนวนองค์ประกอบ DOM ที่ต้องสร้างและทำลายเมื่อคอลเลกชันเปลี่ยนแปลง

หากต้องการใช้ trackBy ในลูป ngFor คุณต้องส่งฟังก์ชันเป็นค่าของแอตทริบิวต์ trackBy ฟังก์ชันควรใช้ดัชนีของรายการปัจจุบันและตัวรายการเอง และส่งคืนตัวระบุเฉพาะสำหรับรายการนั้น

<div *ngFor=”ปล่อยให้รายการของรายการ; trackBy: trackByFn”>{{ item.name }}</div>

trackByFn(ดัชนี: หมายเลข รายการ: ใดๆ) {

ส่งคืน item.id;

}

ในตัวอย่างนี้ ฟังก์ชัน trackByFn จะส่งคืนตัวระบุเฉพาะของแต่ละรายการเป็นคุณสมบัติ id

การแยกรหัส

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

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

ปรับปรุงการโหลดหน้า

มีหลายวิธีในการปรับปรุงการโหลดหน้าของแอปพลิเคชันเชิงมุม ซึ่งบางวิธีรวมถึง:

  1. การแยกโค้ด: ดังที่ได้กล่าวไว้ก่อนหน้านี้ การแยกโค้ดเป็นเทคนิคที่เกี่ยวข้องกับการแบ่งโค้ดของแอปพลิเคชันออกเป็นชิ้นเล็กๆ ที่สามารถโหลดได้ตามต้องการ สิ่งนี้สามารถปรับปรุงเวลาโหลดเริ่มต้นของแอปพลิเคชันได้อย่างมาก
  2. การโหลดแบบขี้เกียจ: การโหลดแบบขี้เกียจเป็นเทคนิคที่เกี่ยวข้องกับการโหลดโมดูลเมื่อจำเป็นเท่านั้น นอกจากนี้ยังสามารถช่วยปรับปรุงเวลาในการโหลดครั้งแรกของแอปพลิเคชันโดยลดจำนวนโค้ดที่ต้องโหลดในการโหลดครั้งแรก
  3. การปรับรูปภาพให้เหมาะสม: การปรับรูปภาพให้เหมาะสมโดยการบีบอัดและใช้รูปแบบรูปภาพที่เหมาะสมยังช่วยปรับปรุงการโหลดหน้าเว็บด้วยการลดขนาดของรูปภาพที่ต้องดาวน์โหลด
  4. การใช้การแคชของเบราว์เซอร์: การเปิดใช้งานการแคชของเบราว์เซอร์ยังช่วยปรับปรุงการโหลดหน้าเว็บด้วยการอนุญาตให้เบราว์เซอร์จัดเก็บทรัพยากรไว้ในเครื่อง เพื่อจะได้ไม่ต้องดาวน์โหลดอีกครั้ง

คำสุดท้าย

สรุปได้ว่า Angular เป็นเฟรมเวิร์กที่ทรงพลังและหลากหลายที่สามารถใช้สร้างเว็บแอปพลิเคชันที่ซับซ้อนและมีประสิทธิภาพสูง อย่างไรก็ตาม เช่นเดียวกับเฟรมเวิร์กอื่นๆ มีวิธีปฏิบัติและเทคนิคที่ดีที่สุดบางอย่างที่สามารถใช้เพื่อเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันเชิงมุม ด้วยการใช้เทคนิคต่างๆ เช่น การแบ่งโค้ด การโหลดแบบ Lazy Loading เป็นต้น นักพัฒนาสามารถปรับปรุงเวลาในการโหลดและประสิทธิภาพโดยรวมของแอปพลิเคชันเชิงมุมได้อย่างมาก

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

อ่านเพิ่มเติม: The New Angular 14: อ่านทั้งหมดเกี่ยวกับเรื่องนี้