กลยุทธ์การโหลดเส้นทางล่วงหน้าใน Angular

โหลดเส้นทางล่วงหน้าก่อนเวลาเพื่อให้ผู้ใช้ไปยังส่วนต่างๆ ได้เร็วขึ้น

Minko Gechev

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

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

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

กลยุทธ์การโหลดเส้นทางล่วงหน้าใน Angular

เราเตอร์ Angular มีฟีเจอร์การกำหนดค่าที่เรียกว่า preloadingStrategy ซึ่งกำหนดตรรกะสำหรับการโหลดล่วงหน้าและการประมวลผลโมดูล Angular ที่โหลดแบบ Lazy Loading เราจะพูดถึงกลยุทธ์ 2 แบบที่เป็นไปได้ ดังนี้

• PreloadAllModules ซึ่งจะโหลดเส้นทางแบบ Lazy Load ทั้งหมดไว้ล่วงหน้าตามชื่อที่ระบุ
• QuicklinkStrategy ซึ่งจะโหลดเส้นทางที่เชื่อมโยงกับลิงก์ในหน้าปัจจุบันไว้ล่วงหน้าเท่านั้น

ส่วนที่เหลือของโพสต์นี้เป็นตัวอย่างแอป Angular คุณสามารถค้นหาซอร์สโค้ดได้ใน GitHub

การใช้กลยุทธ์ PreloadAllModules

แอปตัวอย่างมีเส้นทางแบบ Lazy Load หลายเส้นทาง หากต้องการโหลดล่วงหน้าทั้งหมดโดยใช้กลยุทธ์ PreloadAllModules ซึ่งฝังอยู่ใน Angular ให้ระบุกลยุทธ์ดังกล่าวเป็นค่าสำหรับพร็อพเพอร์ตี้ preloadingStrategy ในการกำหนดค่าเราเตอร์ ดังนี้

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

ตอนนี้ให้แสดงแอปพลิเคชันและดูที่แผงเครือข่ายในเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome

1. กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
2. คลิกแท็บเครือข่าย

คุณควรเห็นว่าเราเตอร์ดาวน์โหลด nyan-nyan-module.js และ about-about-module.js ในเบื้องหลังเมื่อคุณเปิดแอปพลิเคชัน

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

การใช้กลยุทธ์การโหลด Quicklink ล่วงหน้า

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

ไลบรารี Quicklink นำเสนอกลยุทธ์ที่ดีกว่าสำหรับแอปขนาดใหญ่ โดยใช้ IntersectionObserver API เพื่อโหลดโมดูลที่เชื่อมโยงกับลิงก์ที่แสดงอยู่ในหน้าเว็บเท่านั้น

คุณเพิ่มลิงก์ด่วนไปยังแอป Angular ได้โดยใช้แพ็กเกจ ngx-quicklink เริ่มต้นด้วยการติดตั้งแพ็กเกจจาก npm โดยทำดังนี้

npm install --save ngx-quicklink

เมื่อพร้อมใช้งานในโปรเจ็กต์แล้ว คุณจะใช้ QuicklinkStrategy ได้โดยระบุ preloadingStrategy ของเราเตอร์และนําเข้า QuicklinkModule ดังนี้

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

ตอนนี้เมื่อเปิดแอปพลิเคชันอีกครั้ง คุณจะเห็นว่าเราเตอร์โหลด nyan-nyan-module.js ล่วงหน้าเท่านั้น เนื่องจากปุ่มตรงกลางหน้าเว็บมีลิงก์ไปยังเราเตอร์ และเมื่อเปิดการนําทางด้านข้าง คุณจะเห็นว่าเราเตอร์โหลดเส้นทาง "เกี่ยวกับ" ไว้ล่วงหน้าแล้ว

การใช้กลยุทธ์การโหลด Quicklink ล่วงหน้าในหลายข้อบังคับการโหลดแบบเลื่อนเวลา

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

ก่อนอื่น โปรดนำเข้า QuicklinkModule จาก ngx-quicklink ไปยังโมดูลที่แชร์ แล้วส่งออก

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

จากนั้นนําเข้า SharedModule ไปยังโมดูลที่โหลดแบบเลื่อนเวลาทั้งหมดโดยทำดังนี้

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

ตอนนี้ Quicklinks จะพร้อมใช้งานในโมดูลที่โหลดแบบเลื่อนลงแล้ว

ประโยชน์เพิ่มเติมจากการโหลดล่วงหน้าขั้นพื้นฐาน

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

คุณสามารถเรียนรู้วิธีใช้ Guess.js กับ Angular ได้ในหน้านี้จากเว็บไซต์ Guess.js

บทสรุป

เพิ่มความเร็วในการไปยังส่วนต่างๆ โดยใช้การแยกโค้ดระดับเส้นทางดังนี้

1. เลือกกลยุทธ์การโหลดล่วงหน้าที่เหมาะสมตามขนาดของแอปพลิเคชัน ดังนี้
   • แอปพลิเคชันที่มีโมดูลจำนวนน้อยจะใช้กลยุทธ์ PreloadAllModules ในตัวของ Angular ได้
   • แอปพลิเคชันที่มีโมดูลจํานวนมากควรใช้กลยุทธ์การโหลดล่วงหน้าที่กําหนดเอง เช่น Quicklink ของ Angular หรือการโหลดล่วงหน้าแบบคาดการณ์ตามที่ติดตั้งใช้งานใน Guess.js
2. กำหนดค่ากลยุทธ์การโหลดล่วงหน้าโดยการตั้งค่าพร็อพเพอร์ตี้ preloadStrategy ของเราเตอร์ Angular