Merutekan strategi pramuat di Angular

Pramuat rute terlebih dahulu untuk mempercepat perjalanan pengguna navigasi.

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 untuk latensi dan bandwidth jaringan. 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.

Merutekan strategi pramuat 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 melakukan pramuat semua rute yang dimuat dengan lambat, sesuai namanya
  • QuicklinkStrategy, yang hanya melakukan pramuat 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 dengan lambat. Untuk melakukan pramuat semuanya menggunakan strategi PreloadAllModules—yang dibangun ke 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 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 membuka aplikasi:

Strategi PreloadAllModules dalam penerapannya.

{i>Router<i} juga telah mendaftarkan modul' pernyataan rute sehingga saat Anda membuka URL yang terkait dengan modul bawaan apa pun, transisi akan berlangsung secara instan.

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

Library link cepat 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 link cepat 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 melakukan pramuat nyan-nyan-module.js karena tombol di tengah halaman memiliki link router. Saat membuka navigasi samping, Anda akan melihat {i>router<i} kemudian melakukan pramuat "About" rute:

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 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 lambat dimuat:

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

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

Quicklinks kini akan tersedia di modul yang lambat dimuat.

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 melakukan pramuat hanya 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 link cepat Angular, atau pramuat prediktif, seperti yang diterapkan di Guess.js.
  2. Konfigurasi strategi pramuat dengan menetapkan properti preloadStrategy dari router Angular.