Pemisahan kode level rute di Angular

Tingkatkan performa aplikasi Anda menggunakan pemisahan kode tingkat rute.

Minko Gechev

Postingan ini menjelaskan cara menyiapkan pemisahan kode tingkat rute dalam aplikasi Angular, yang dapat mengurangi ukuran paket JavaScript dan meningkatkan Waktu untuk Interaktif secara signifikan.

Anda dapat menemukan contoh kode dari artikel ini di GitHub. Contoh perutean segera tersedia di cabang eager. Contoh pemisahan kode tingkat rute ada di cabang lambat.

Alasan pentingnya pembagian kode

Kompleksitas aplikasi web yang terus berkembang telah menyebabkan peningkatan signifikan dalam jumlah JavaScript yang dikirimkan kepada pengguna. File JavaScript yang besar dapat sangat memperlambat interaktivitas, sehingga menjadi sumber daya yang mahal, terutama di perangkat seluler.

Cara paling efisien untuk mengurangi paket JavaScript tanpa mengorbankan fitur dalam aplikasi Anda adalah dengan memperkenalkan pemisahan kode yang agresif.

Pemisahan kode memungkinkan Anda membagi JavaScript aplikasi menjadi beberapa bagian yang terkait dengan rute atau fitur yang berbeda. Pendekatan ini hanya mengirimkan JavaScript kepada pengguna yang mereka butuhkan selama pemuatan aplikasi awal, sehingga waktu pemuatan tetap rendah.

Teknik pemisahan kode

Pemisahan kode dapat dilakukan di dua tingkat: tingkat komponen dan tingkat rute.

  • Dalam pemisahan kode tingkat-komponen, Anda memindahkan komponen ke potongan JavaScript-nya sendiri dan memuatnya dengan lambat saat dibutuhkan.
  • Dalam pemisahan kode tingkat rute, Anda mengenkapsulasi fungsi setiap rute ke dalam potongan terpisah. Saat pengguna menavigasi aplikasi Anda, mereka mengambil potongan yang berkaitan dengan masing-masing rute dan mendapatkan fungsionalitas terkait saat mereka membutuhkannya.

Postingan ini berfokus pada penyiapan pemisahan tingkat rute di Angular.

Contoh aplikasi

Sebelum mempelajari cara menggunakan pemisahan kode tingkat rute di Angular, mari kita lihat aplikasi contoh:

Lihat implementasi modul aplikasi. Di dalam AppModule, dua rute ditentukan: rute default yang terkait dengan HomeComponent dan rute nyan yang terkait dengan NyanComponent:

@NgModule({
  ...
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: '',
        component: HomeComponent,
        pathMatch: 'full'
      },
      {
        path: 'nyan',
        component: NyanComponent
      }
    ])
  ],
  ...
})
export class AppModule {}

Pemisahan kode tingkat rute

Untuk menyiapkan pemisahan kode, rute cepat nyan perlu difaktorkan ulang.

Angular CLI versi 8.1.0 dapat melakukan semuanya dengan perintah ini:

ng g module nyan --module app --route nyan

Ini akan menghasilkan: - Modul pemilihan rute baru bernama NyanModule - Rute di AppModule yang disebut nyan yang akan memuat NyanModule secara dinamis - Rute default di NyanModule - Komponen bernama NyanComponent yang akan dirender saat pengguna mencapai rute default

Mari kita lakukan langkah-langkah ini secara manual agar kita mendapatkan pemahaman yang lebih baik tentang penerapan pemisahan kode dengan Angular.

Saat pengguna membuka rute nyan, router akan merender NyanComponent di stopkontak router.

Untuk menggunakan pemisahan kode tingkat rute di Angular, tetapkan properti loadChildren deklarasi rute dan gabungkan dengan impor dinamis:

{
  path: 'nyan',
  loadChildren: () => import('./nyan/nyan.module').then(m => m.NyanModule)
}

Ada dua perbedaan utama dari cara cepat:

  1. Anda menetapkan loadChildren, bukan component. Saat menggunakan pemisahan kode tingkat rute, Anda harus menunjuk ke modul yang dimuat secara dinamis, bukan komponen.
  2. Di loadChildren, setelah promise diselesaikan, Anda akan menampilkan NyanModule, bukan menunjuk ke NyanComponent.

Cuplikan di atas menentukan bahwa saat pengguna membuka nyan, Angular harus memuat nyan.module secara dinamis dari direktori nyan dan merender komponen yang terkait dengan rute default yang dideklarasikan dalam modul.

Anda dapat mengaitkan rute default dengan komponen menggunakan deklarasi ini:

import { NgModule } from '@angular/core';
import { NyanComponent } from './nyan.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [NyanComponent],
  imports: [
    RouterModule.forChild([{
      path: '',
      pathMatch: 'full',
      component: NyanComponent
    }])
  ]
})
export class NyanModule {}

Kode ini merender NyanComponent saat pengguna membuka https://example.com/nyan.

Untuk memeriksa apakah router Angular mendownload nyan.module dengan lambat di lingkungan lokal Anda:

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

  2. Klik tab Jaringan.

  3. Klik NYAN di aplikasi contoh.

  4. Perhatikan bahwa file nyan-nyan-module.js akan muncul di tab jaringan.

Pemuatan lambat paket JavaScript dengan pemisahan kode tingkat rute

Temukan contoh ini di GitHub.

Menampilkan indikator lingkaran berputar

Saat ini, ketika pengguna mengklik tombol NYAN, aplikasi tidak menunjukkan bahwa aplikasi sedang memuat JavaScript di latar belakang. Untuk memberikan masukan kepada pengguna saat memuat skrip, Anda mungkin perlu menambahkan indikator lingkaran berputar.

Untuk melakukannya, mulailah dengan menambahkan markup untuk indikator di dalam elemen router-outlet pada app.component.html:

<router-outlet>
  <span class="loader" *ngIf="loading"></span>
</router-outlet>

Kemudian, tambahkan class AppComponent untuk menangani peristiwa perutean. Class ini akan menetapkan tanda loading ke true saat mendengar peristiwa RouteConfigLoadStart dan menyetel tanda ke false saat mendengar peristiwa RouteConfigLoadEnd.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loading: boolean;
  constructor(router: Router) {
    this.loading = false;
    router.events.subscribe(
      (event: RouterEvent): void => {
        if (event instanceof NavigationStart) {
          this.loading = true;
        } else if (event instanceof NavigationEnd) {
          this.loading = false;
        }
      }
    );
  }
}

Pada contoh di bawah ini, kami telah memperkenalkan latensi buatan 500 md sehingga Anda dapat melihat indikator lingkaran berputar tersebut sedang beraksi.

Kesimpulan

Anda dapat mengecilkan ukuran paket aplikasi Angular Anda dengan menerapkan pemisahan kode tingkat rute:

  1. Gunakan generator modul yang dimuat lambat di Angular CLI untuk otomatis menyusun rute yang dimuat secara dinamis.
  2. Tambahkan indikator pemuatan saat pengguna membuka rute lambat untuk menunjukkan bahwa ada tindakan yang sedang berlangsung.