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

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

Minko Gechev

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

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

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

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

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

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

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

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

แอปตัวอย่างมีเส้นทางแบบโหลดล่าช้าหลายเส้นทาง หากต้องการโหลดล่วงหน้าทั้งหมดโดยใช้กลยุทธ์ 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 ในเบื้องหลังเมื่อเปิดแอปพลิเคชัน

กลยุทธ์ PreloadAllModules กำลังทํางาน

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

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

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

การสาธิตกลยุทธ์การโหลดลิงก์ด่วนล่วงหน้า

ตัวอย่างข้างต้นใช้ได้กับแอปพลิเคชันพื้นฐาน แต่หากแอปพลิเคชันของคุณมีหลายโมดูลที่โหลดแบบเลื่อนเวลา คุณจะต้องนําเข้า 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