Pemisahan kode level rute di Angular

Tingkatkan performa aplikasi Anda dengan menggunakan pemisahan kode tingkat rute.

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

Anda dapat menemukan contoh kode dari artikel ini di GitHub. Contoh pemilihan rute cepat tersedia di cabang cepat. 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 menunda interaktivitas secara signifikan, sehingga dapat menjadi resource yang mahal, terutama di perangkat seluler.

Cara paling efisien untuk memperkecil paket JavaScript tanpa mengorbankan fitur di 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 yang diperlukan pengguna 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 bagian JavaScript-nya sendiri dan memuat komponen secara lambat saat diperlukan.
  • Dalam pemisahan kode tingkat rute, Anda mengenkapsulasi fungsi setiap rute ke dalam bagian terpisah. Saat pengguna menavigasi aplikasi Anda, mereka mengambil bagian yang terkait dengan setiap rute dan mendapatkan fungsi 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 contoh aplikasi:

Lihat implementasi modul aplikasi. Di dalam AppModule, dua rute ditentukan: rute default yang dikaitkan dengan HomeComponent dan rute nyan yang dikaitkan 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 untuk Anda dengan perintah ini:

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

Tindakan ini akan menghasilkan: - Modul perutean baru bernama NyanModule - Rute di AppModule bernama nyan yang akan memuat NyanModule secara dinamis - Rute default di NyanModule - Komponen bernama NyanComponent yang akan dirender saat pengguna membuka rute default

Mari kita ikuti 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 outlet router.

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

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

Ada dua perbedaan utama dari rute yang dimuat secara otomatis:

  1. Anda menetapkan loadChildren, bukan component. Saat menggunakan pemisahan kode tingkat rute, Anda harus mengarahkan 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 secara 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 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, sebaiknya tambahkan indikator lingkaran berputar.

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

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

Kemudian, tambahkan class AppComponent untuk menangani peristiwa pemilihan rute. Class ini akan menetapkan tanda loading ke true saat mendengar peristiwa RouteConfigLoadStart dan menetapkan 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;
        }
      }
    );
  }
}

Dalam contoh di bawah, kami telah memperkenalkan latensi buatan 500 md sehingga Anda dapat melihat cara kerja indikator lingkaran berputar.

Kesimpulan

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

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