โหลดเส้นทางล่วงหน้าก่อนเวลาเพื่อเร่งความเร็วการนำทางของผู้ใช้
การแยกโค้ดระดับเส้นทางจะช่วยลดเวลาที่ใช้ในการโหลดเริ่มต้นของแอปพลิเคชันโดยชะลอ 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 โดยทำดังนี้
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บเครือข่าย
คุณควรจะเห็นว่าเราเตอร์ได้ดาวน์โหลด 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
บทสรุป
หากต้องการเพิ่มความเร็วในการไปยังส่วนต่างๆ เมื่อใช้การแยกรหัสระดับเส้นทาง ให้ทำดังนี้
- เลือกกลยุทธ์การโหลดล่วงหน้าที่เหมาะสมตามขนาดแอปพลิเคชัน ดังนี้
- แอปพลิเคชันที่มีโมดูลจำนวนน้อยสามารถใช้กลยุทธ์
PreloadAllModules
ในตัวของ Angular ได้ - แอปพลิเคชันที่มีโมดูลจำนวนมากควรใช้กลยุทธ์การโหลดล่วงหน้าที่กำหนดเอง เช่น Quicklink ของ Angular หรือการโหลดล่วงหน้าแบบคาดการณ์ ดังที่นำมาใช้ใน Guess.js
- แอปพลิเคชันที่มีโมดูลจำนวนน้อยสามารถใช้กลยุทธ์
- กำหนดค่ากลยุทธ์การโหลดล่วงหน้าโดยการตั้งค่าพร็อพเพอร์ตี้
preloadStrategy
ของเราเตอร์ Angular