6 เคล็ดลับและเทคนิคการปรับแต่งประสิทธิภาพเชิงมุม
เผยแพร่แล้ว: 2023-02-03Angular เป็นเฟรมเวิร์ก 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
ปรับปรุงการโหลดหน้า
มีหลายวิธีในการปรับปรุงการโหลดหน้าของแอปพลิเคชันเชิงมุม ซึ่งบางวิธีรวมถึง:
- การแยกโค้ด: ดังที่ได้กล่าวไว้ก่อนหน้านี้ การแยกโค้ดเป็นเทคนิคที่เกี่ยวข้องกับการแบ่งโค้ดของแอปพลิเคชันออกเป็นชิ้นเล็กๆ ที่สามารถโหลดได้ตามต้องการ สิ่งนี้สามารถปรับปรุงเวลาโหลดเริ่มต้นของแอปพลิเคชันได้อย่างมาก
- การโหลดแบบขี้เกียจ: การโหลดแบบขี้เกียจเป็นเทคนิคที่เกี่ยวข้องกับการโหลดโมดูลเมื่อจำเป็นเท่านั้น นอกจากนี้ยังสามารถช่วยปรับปรุงเวลาในการโหลดครั้งแรกของแอปพลิเคชันโดยลดจำนวนโค้ดที่ต้องโหลดในการโหลดครั้งแรก
- การปรับรูปภาพให้เหมาะสม: การปรับรูปภาพให้เหมาะสมโดยการบีบอัดและใช้รูปแบบรูปภาพที่เหมาะสมยังช่วยปรับปรุงการโหลดหน้าเว็บด้วยการลดขนาดของรูปภาพที่ต้องดาวน์โหลด
- การใช้การแคชของเบราว์เซอร์: การเปิดใช้งานการแคชของเบราว์เซอร์ยังช่วยปรับปรุงการโหลดหน้าเว็บด้วยการอนุญาตให้เบราว์เซอร์จัดเก็บทรัพยากรไว้ในเครื่อง เพื่อจะได้ไม่ต้องดาวน์โหลดอีกครั้ง
คำสุดท้าย
สรุปได้ว่า Angular เป็นเฟรมเวิร์กที่ทรงพลังและหลากหลายที่สามารถใช้สร้างเว็บแอปพลิเคชันที่ซับซ้อนและมีประสิทธิภาพสูง อย่างไรก็ตาม เช่นเดียวกับเฟรมเวิร์กอื่นๆ มีวิธีปฏิบัติและเทคนิคที่ดีที่สุดบางอย่างที่สามารถใช้เพื่อเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชันเชิงมุม ด้วยการใช้เทคนิคต่างๆ เช่น การแบ่งโค้ด การโหลดแบบ Lazy Loading เป็นต้น นักพัฒนาสามารถปรับปรุงเวลาในการโหลดและประสิทธิภาพโดยรวมของแอปพลิเคชันเชิงมุมได้อย่างมาก
Smarsh Infotech บริษัทเอาต์ซอร์สบริการด้านไอทียอดนิยมสามารถเป็นหุ้นส่วนการพัฒนาแอปพลิเคชันในอนาคตของคุณได้ หากคุณกำลังวางแผนที่จะพัฒนาธุรกิจของคุณบนแพลตฟอร์มดิจิทัล เราสามารถช่วยคุณได้ทุกวิถีทาง มาเชื่อมต่อและหารือเกี่ยวกับแนวคิดโครงการของคุณ
อ่านเพิ่มเติม: The New Angular 14: อ่านทั้งหมดเกี่ยวกับเรื่องนี้