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

โหลดเส้นทางล่วงหน้าล่วงหน้าเพื่อให้ผู้ใช้เร็วขึ้น การนำทาง

Minko Gechev

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คุณเพิ่มลิงก์ด่วนไปยังแอป 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 ได้
   • แอปพลิเคชันที่มีโมดูลจำนวนมากควรใช้กลยุทธ์การโหลดล่วงหน้าที่กำหนดเอง เช่น ลิงก์ด่วนของ Angular หรือการโหลดล่วงหน้าตามการคาดการณ์ ตามที่ใช้ใน Guess.js
2. กำหนดค่ากลยุทธ์การโหลดล่วงหน้าโดยตั้งค่าพร็อพเพอร์ตี้ preloadStrategy ของเราเตอร์ Angular