Merutekan strategi pramuat di Angular

Pramuat rute terlebih dahulu untuk mempercepat navigasi pengguna.

Minko Gechev

Pemisahan kode tingkat rute dapat membantu Anda mengurangi waktu pemuatan awal aplikasi dengan menunda JavaScript yang terkait dengan rute yang awalnya tidak diperlukan. Dengan cara ini, router Angular menunggu hingga pengguna menavigasi ke rute tertentu sebelum memicu permintaan jaringan untuk mendownload JavaScript terkait.

Meskipun bagus untuk pemuatan halaman awal, teknik ini dapat memperlambat navigasi, bergantung pada latensi dan bandwidth jaringan pengguna. Salah satu cara untuk mengatasi masalah ini adalah pramuat rute. Dengan menggunakan pramuat, saat pengguna berada di rute tertentu, Anda dapat mendownload dan meng-cache JavaScript yang terkait dengan rute yang mungkin diperlukan berikutnya. Router Angular menyediakan fungsi ini secara langsung.

Dalam postingan ini, Anda akan mempelajari cara mempercepat navigasi saat menggunakan pemisahan kode tingkat rute dengan memanfaatkan pramuat JavaScript di Angular.

Merutekan strategi pramuat di Angular

Router Angular menyediakan properti konfigurasi bernama preloadingStrategy, yang menentukan logika untuk melakukan pramuat dan memproses modul Angular yang dimuat lambat. Kita akan membahas dua kemungkinan strategi:

  • PreloadAllModules, yang melakukan pramuat semua rute yang dimuat lambat, sesuai namanya
  • QuicklinkStrategy, yang hanya melakukan pramuat rute yang terkait dengan link di halaman saat ini.

Bagian selanjutnya dari postingan ini merujuk ke contoh aplikasi Angular. Anda dapat menemukan kode sumbernya di GitHub.

Menggunakan strategi PreloadAllModules

Aplikasi contoh memiliki beberapa rute yang dimuat lambat. Untuk melakukan pramuat semuanya menggunakan strategi PreloadAllModules—yang disertakan dalam Angular—tentukan sebagai nilai untuk properti preloadingStrategy di konfigurasi router:

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

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

Sekarang tayangkan aplikasi dan lihat panel Network di Chrome DevTools:

  1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
  2. Klik tab Network

Anda akan melihat bahwa router mendownload nyan-nyan-module.js dan about-about-module.js di latar belakang saat Anda membuka aplikasi:

Penerapan strategi PreloadAllModules.

Router juga mendaftarkan deklarasi rute modul sehingga saat Anda menavigasi ke URL yang terkait dengan salah satu modul bawaan, transisi akan berlangsung seketika.

PreloadAllModules berguna dalam banyak kasus. Namun, jika Anda memiliki lusinan modul, pramuat yang agresif dapat benar-benar meningkatkan penggunaan jaringan. Selain itu, karena router perlu mendaftarkan rute di semua modul yang dimuat sebelumnya, hal ini dapat menyebabkan komputasi intensif di UI thread dan menyebabkan pengalaman pengguna yang lambat.

Library quicklink memberikan strategi yang lebih baik untuk aplikasi yang lebih besar. Kode ini menggunakan IntersectionObserver API untuk melakukan pramuat modul yang terkait dengan link yang saat ini terlihat di halaman saja.

Anda dapat menambahkan quicklink ke aplikasi Angular dengan menggunakan paket ngx-quicklink. Mulailah dengan menginstal paket dari npm:

npm install --save ngx-quicklink

Setelah tersedia di project, Anda dapat menggunakan QuicklinkStrategy dengan menentukan preloadingStrategy router dan mengimpor QuicklinkModule:

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

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

Sekarang saat membuka aplikasi lagi, Anda akan melihat bahwa router hanya melakukan pramuat nyan-nyan-module.js karena tombol di tengah halaman memiliki link router ke tombol tersebut. Dan saat membuka navigasi samping, Anda akan melihat bahwa router kemudian melakukan pramuat rute "About":

Demo strategi pramuat link cepat.

Contoh di atas akan berfungsi untuk aplikasi dasar, tetapi jika aplikasi Anda berisi beberapa modul yang dimuat lambat, Anda harus mengimpor QuicklinkModule ke modul bersama, mengekspornya, lalu mengimpor modul bersama ke modul yang dimuat lambat.

Impor QuicklinkModule dari ngx-quicklink terlebih dahulu ke dalam modul bersama, lalu ekspor:

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

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

Kemudian, impor SharedModule Anda ke semua modul yang dimuat dengan lambat:

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

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

Quicklinks sekarang akan tersedia di modul pemuatan lambat Anda.

Lebih dari sekadar pramuat dasar

Meskipun pramuat selektif melalui quicklink dapat mempercepat navigasi secara signifikan, Anda dapat membuat strategi pramuat menjadi lebih efisien jaringan dengan menggunakan pramuat prediktif—yang diterapkan oleh Guess.js. Dengan menganalisis laporan dari Google Analytics atau penyedia analisis lainnya, Guess.js dapat memprediksi perjalanan navigasi pengguna dan hanya melakukan pramuat potongan JavaScript yang mungkin diperlukan berikutnya.

Anda dapat mempelajari cara menggunakan Guess.js dengan Angular di halaman ini dari situs Guess.js.

Kesimpulan

Untuk mempercepat navigasi saat menggunakan pemisahan kode tingkat rute:

  1. Pilih strategi pramuat yang tepat bergantung pada ukuran aplikasi Anda:
    • Aplikasi dengan beberapa modul dapat menggunakan strategi PreloadAllModules bawaan Angular.
    • Aplikasi dengan banyak modul harus menggunakan strategi pramuat kustom, seperti quicklink Angular, atau pramuat prediktif, seperti yang diimplementasikan di Guess.js.
  2. Konfigurasi strategi pramuat dengan menetapkan properti preloadStrategy router Angular.