กลยุทธ์การโหลดเส้นทางล่วงหน้าใน 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 Loading หลายเส้นทาง หากต้องการโหลดรายการทั้งหมดล่วงหน้าโดยใช้กลยุทธ์ 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 ที่เชื่อมโยงกับโมดูลใดๆ ที่โหลดไว้ล่วงหน้า การเปลี่ยนแปลงจะเกิดขึ้นทันที

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

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 ในโมดูลที่โหลดแบบ Lazy Loading หลายโมดูล

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

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

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

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

จากนั้นนำเข้า SharedModule ไปยังโมดูลที่โหลดแบบ Lazy Loading ทั้งหมดของคุณ ดังนี้

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

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

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

ทำได้มากกว่าการโหลดล่วงหน้าแบบพื้นฐาน

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

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

บทสรุป

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

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