Mengoptimalkan Performa Pada Angular SPA

Aplikasi Halaman Tunggal (SPA) yang dibangun dengan Angular menawarkan pengalaman pengguna yang dinamis dan lancar, tetapi seiring dengan bertambahnya kompleksitas aplikasi, pengoptimalan kinerja menjadi sangat penting. Performa yang buruk dapat menyebabkan interaksi yang lamban, waktu pemuatan yang lama, dan pengalaman pengguna yang negatif. Artikel ini membahas strategi utama untuk mengoptimalkan kinerja di Angular SPA, memastikannya tetap cepat dan responsif.

1. Modul Pemuatan Malas

Lazy loading adalah salah satu fitur terpenting dalam angular untuk pengoptimalan kinerja. Angular memuat modul sesuai permintaan alih-alih memuat semua modul sekaligus. Hal ini meminimalkan waktu pemuatan dan meningkatkan kinerja aplikasi.

Untuk mengimplementasikan lazy loading, ubah konfigurasi perutean sebagai berikut:

const routes: Routes = [
{ path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];

Ini menjamin bahwa modul fitur akan dimuat hanya ketika pengguna beralih ke rute yang cocok.

sumber: codesandbox.io

2. Gunakan Strategi Deteksi Perubahan OnPush

Tidak semua orang mungkin mengetahui metode ini, tetapi kita sering menggunakannya sebagai mekanisme default deteksi perubahan di Angular. Ketika menggunakan strategi OnPush, hanya properti yang terikat pada input yang dilacak, sehingga menghilangkan siklus deteksi perubahan yang berlebihan.

@Component({
selector: 'app-example',
templateUrl: './example.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
@Input() data: any;
}

Dengan menggunakan ChangeDetectionStrategy.OnPush, Angular memeriksa perubahan hanya ketika referensi input berubah, yang mengarah pada peningkatan kinerja yang signifikan.

3. Pengocokan Pohon untuk Optimalisasi Ukuran Bundle

Tree shaking adalah metode untuk menghilangkan kode yang mati atau tidak terpakai pada saat build, yang menghasilkan bundle output yang lebih kecil. Pastikan Anda menggunakan mode build produksi Angular:

ng build --prod

Perintah ini memungkinkan kompilasi Ahead-of-Time (AOT) dan pengocokan pohon, sehingga menghasilkan bundel yang lebih kecil dan dioptimalkan.

4. Mengaktifkan Kompilasi Sebelum Waktu (AOT)

AOT menerjemahkan templat Angular menjadi kode JavaScript pada saat pembuatan, yang mengurangi overhead waktu proses. Ini meningkatkan kinerja dengan menghilangkan kebutuhan akan kompiler Just-in-Time (JIT) dalam produksi → AOT.

Untuk mengaktifkan kompilasi AOT, gunakan perintah berikut:

ng build --aot

AOT meningkatkan waktu muat dan meningkatkan keamanan aplikasi dengan mendeteksi kesalahan template selama waktu pembuatan, bukan pada saat runtime.

5. Mengoptimalkan Gambar dan Aset

Aplikasi Angular melambat karena gambar dan aset yang besar. Anda dapat menggunakan gambar yang dioptimalkan dan memanfaatkan format modern seperti WebP. Uji gambar yang mendukung CDN untuk latensi yang lebih rendah.

Contoh penggunaan WebP dalam HTML:

<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Optimized Image">
</picture>

Pendekatan ini memastikan browser modern menggunakan WebP sementara browser lama kembali ke JPEG.

6. Memanfaatkan Angular Universal untuk Server-Side Rendering (SSR)

Angular Universal melakukan pra-render halaman di server sebelum menayangkannya ke klien, sehingga meningkatkan kinerja secara signifikan, terutama untuk pemuatan halaman awal dan SEO.

Untuk menambahkan Angular Universal:

ng add @nguniversal/express-engine

Hal ini meningkatkan performa yang dirasakan dengan menyampaikan konten yang sudah dirender dengan cepat.

7. Mengurangi Ketergantungan Pihak Ketiga

Ukuran paket aplikasi juga dapat meningkat karena pustaka pihak ketiga yang tidak perlu. Bangun kebiasaan untuk mengaudit ketergantungan secara teratur dan hapus paket yang tidak digunakan:

npm prune

Selain itu, lebih memilih alternatif yang ringan atau solusi Angular asli untuk fungsi umum.

8. Gunakan Web Workers untuk Komputasi Berat

Web Workers memungkinkan Anda untuk membebani komputasi yang berat sehingga Anda tidak akan membekukan antarmuka DOM.

Membuat Pekerja Web:

ng generate web-worker worker

Pindahkan tugas-tugas yang intensif secara komputasi kepada pekerja untuk menjaga daya tanggap.

9. Optimalkan Permintaan HTTP dengan Caching

Menerapkan Strategi Caching Untuk Mengurangi Panggilan API yang Berlebihan Salah satu fitur yang sangat kuat ini adalah caching respons HTTP yang diberikan oleh HttpInterceptor dari Angular.

Contoh interceptor:

@Injectable()
export class CacheInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const cachedResponse = localStorage.getItem(req.url);
return cachedResponse ? of(JSON.parse(cachedResponse)) : next.handle(req).pipe(
tap(response => localStorage.setItem(req.url, JSON.stringify(response)))
);
}
}

Ini meningkatkan efisiensi dengan menghilangkan panggilan jaringan duplikat.

Kesimpulan

Mengoptimalkan kinerja di Angular SPA sangat penting untuk memberikan pengalaman pengguna yang cepat dan lancar. Dengan menerapkan strategi seperti lazy loading, kompilasi AOT, pengoptimalan deteksi perubahan, dan cache HTTP, pengembang dapat secara signifikan meningkatkan efisiensi aplikasi mereka. Audit rutin dan pembuatan profil kinerja memastikan bahwa aplikasi tetap dioptimalkan seiring dengan peningkatan skala. Dengan mengadopsi praktik terbaik ini, pengembang Angular dapat membangun SPA yang berkinerja tinggi dan responsif.

Kembali ke>>>> Membangun Aplikasi Halaman Tunggal (SPA) dengan Angular