Pemisahan kode level rute di Angular

Tingkatkan performa aplikasi Anda dengan 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 secara drastis meningkatkan Waktu untuk Interaktif.

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

Alasan pentingnya pemisahan kode

Kompleksitas aplikasi web yang semakin kompleks telah mengakibatkan peningkatan signifikan dalam jumlah JavaScript yang dikirimkan kepada pengguna. File JavaScript yang besar dapat sangat menunda interaktivitas, sehingga menjadi sumber daya yang mahal, terutama di perangkat seluler.

Cara paling efisien untuk memperkecil 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 berbagai rute atau fitur. Pendekatan ini hanya mengirimkan JavaScript yang dibutuhkan pengguna selama pemuatan aplikasi awal, sehingga waktu pemuatan tetap rendah.

Teknik pemisahan kode

Pemisahan kode dapat dilakukan pada 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 diperlukan.
  • Dalam pemisahan kode tingkat rute, Anda mengenkapsulasi fungsionalitas setiap rute menjadi potongan terpisah. Ketika pengguna menavigasi aplikasi Anda, mereka mengambil potongan yang terkait dengan setiap 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 harus 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 pemilihan rute 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 mencapai rute default

Mari kita lakukan langkah-langkah ini secara manual agar kita mendapatkan pemahaman yang lebih baik tentang mengimplementasikan 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 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 cepat:

  1. Anda menetapkan loadChildren, bukan component. Saat menggunakan pemisahan kode tingkat rute, Anda harus mengarahkan kursor ke modul yang dimuat secara dinamis, bukan komponen.
  2. Di loadChildren, setelah promise diselesaikan, Anda akan menampilkan NyanModule, bukan mengarah 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 Network

  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, Anda mungkin perlu menambahkan 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;
        }
      }
    );
  }
}

Pada 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 yang dimuat lambat Angular CLI untuk membuat scaffold secara otomatis pada rute yang dimuat secara dinamis.
  2. Tambahkan indikator pemuatan saat pengguna membuka rute lambat untuk menunjukkan bahwa ada tindakan yang sedang berlangsung.