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 akan menunggu hingga pengguna membuka rute tertentu sebelum memicu permintaan jaringan untuk mendownload JavaScript terkait.

Meskipun teknik ini bagus untuk pemuatan halaman awal, teknik ini dapat memperlambat navigasi, bergantung pada bandwidth dan latensi 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 menyimpan 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.

Strategi pramuat rute di Angular

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

  • PreloadAllModules, yang memuat semua rute yang dimuat lambat, seperti namanya
  • QuicklinkStrategy, yang hanya memuat ulang rute yang terkait dengan link di halaman saat ini.

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

Menggunakan strategi PreloadAllModules

Aplikasi contoh memiliki beberapa rute yang dimuat lambat. Untuk memuat semua komponen tersebut secara otomatis menggunakan strategi PreloadAllModules—yang di-build ke dalam Angular—tentukan strategi tersebut sebagai nilai untuk properti preloadingStrategy dalam konfigurasi router:

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

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

Sekarang, tayangkan aplikasi dan lihat panel Jaringan di Chrome DevTools:

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

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

Strategi PreloadAllModules sedang berjalan.

Router juga mendaftarkan deklarasi rute modul sehingga saat Anda membuka URL yang terkait dengan modul yang dimuat sebelumnya, transisi akan langsung dilakukan.

PreloadAllModules berguna dalam banyak kasus. Namun, jika Anda memiliki puluhan modul, pramuat agresifnya 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. API ini menggunakan IntersectionObserver API untuk melakukan pramuat modul yang terkait dengan link yang saat ini saja terlihat di halaman saja.

Anda dapat menambahkan quicklink ke aplikasi Angular 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 kembali aplikasi, Anda akan melihat bahwa router hanya memuat nyan-nyan-module.js karena tombol di bagian tengah halaman memiliki link router ke sana. Dan saat membuka navigasi samping, Anda akan melihat bahwa router kemudian memuat ulang rute "Tentang":

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 dalam modul bersama, mengekspornya, lalu mengimpor modul bersama ke dalam modul yang dimuat lambat.

Pertama, impor QuicklinkModule dari ngx-quicklink ke modul bersama Anda lalu ekspor:

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

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

Kemudian, impor SharedModule ke semua modul yang dimuat lambat:

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

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

Quicklinks kini akan tersedia di modul yang dimuat lambat.

Lebih dari sekadar pramuat dasar

Meskipun pramuat selektif melalui quicklink dapat mempercepat navigasi secara signifikan, Anda dapat membuat strategi pramuat Anda lebih efisien di 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 memuat sebagian JavaScript yang kemungkinan akan 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 diterapkan di Guess.js.
  2. Konfigurasikan strategi pramuat dengan menetapkan properti preloadStrategy router Angular.