Anggaran performa dengan Angular CLI

Pantau ukuran paket dari waktu ke waktu untuk memastikan aplikasi Anda tetap cepat.

Minko Gechev

Mengoptimalkan aplikasi Angular memang penting, tetapi bagaimana cara memastikan performanya tidak mengalami regresi dari waktu ke waktu? Dengan memperkenalkan metrik performa dan memantaunya pada setiap perubahan kode.

Salah satu metrik penting adalah ukuran JavaScript yang dikirimkan bersama aplikasi Anda. Dengan memperkenalkan anggaran performa yang Anda pantau di setiap build atau permintaan pull, Anda dapat memastikan pengoptimalan Anda tetap ada dari waktu ke waktu.

Menghitung anggaran performa

Anda dapat menggunakan kalkulator anggaran online ini untuk memperkirakan jumlah JavaScript yang dapat dimuat aplikasi Anda, bergantung pada Waktu Hingga Interaktif yang Anda targetkan.

Kalkulator anggaran

Mengonfigurasi anggaran performa di Angular CLI

Setelah memiliki target anggaran JavaScript, Anda dapat menerapkannya menggunakan antarmuka command line (CLI) Angular. Untuk melihat cara kerjanya, lihat aplikasi contoh ini di GitHub.

Anda akan melihat bahwa anggaran berikut telah dikonfigurasi di angular.json:

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

Berikut adalah ringkasan dari hal yang ditentukan:

  • Ada anggaran untuk paket JavaScript bernama main.
  • Jika paket main menjadi lebih besar dari 170 KB, Angular CLI akan menampilkan peringatan di konsol saat Anda mem-build aplikasi.
  • Jika paket main menjadi lebih besar dari 250 KB, build akan gagal.

Sekarang, coba bangun aplikasi dengan menjalankan ng build --prod.

Anda akan melihat error ini di konsol:

Kegagalan anggaran

Untuk memperbaiki error build, lihat app.component.ts, yang menyertakan impor dari rxjs/internal/operators. Ini adalah impor pribadi yang tidak boleh digunakan oleh konsumen rxjs. Hal ini akan sangat meningkatkan ukuran paket. Saat mengupdate ke impor yang benar, rxjs/operators, dan menjalankan build lagi, Anda akan melihat bahwa build tersebut berhasil lulus pemeriksaan anggaran.

Perhatikan bahwa karena pemuatan diferensial diaktifkan secara default di Angular CLI, perintah ng build akan menghasilkan dua build aplikasi:

  • Build untuk browser dengan dukungan ECMAScript 2015. Build ini menyertakan lebih sedikit polyfill dan sintaksis JavaScript yang lebih modern. Sintaksis tersebut lebih ekspresif, sehingga menghasilkan paket yang lebih kecil.
  • Build untuk browser lama tanpa dukungan ECMAScript 2015. Sintaksis yang lebih lama kurang ekspresif dan memerlukan lebih banyak polyfill, yang menyebabkan paket yang lebih besar.

File index.html aplikasi contoh merujuk ke kedua build sehingga browser modern dapat memanfaatkan build ECMAScript 2015 yang lebih kecil dan browser lama dapat kembali ke build ECMAScript 5.

Menerapkan anggaran sebagai bagian dari continuous integration

Continuous integration (CI) menawarkan cara mudah untuk memantau anggaran aplikasi Anda dari waktu ke waktu. Untungnya, cara tercepat untuk menyiapkannya adalah dengan mem-build aplikasi Anda menggunakan Angular CLI—tanpa perlu langkah tambahan. Setiap kali paket JavaScript melebihi anggaran, proses akan keluar dengan kode 1, dan build akan gagal.

Jika ingin, Anda juga dapat menerapkan anggaran performa menggunakan bundlesize dan Lighthouse. Perbedaan utama antara anggaran performa di Angular CLI dan Lighthouse adalah saat pemeriksaan dilakukan. Angular CLI melakukan pemeriksaan pada waktu build, dengan melihat aset produksi dan memverifikasi ukurannya. Namun, Lighthouse akan membuka versi aplikasi yang di-deploy dan mengukur ukuran aset. Kedua pendekatan ini memiliki pro dan kontra. Pemeriksaan yang dilakukan Angular CLI kurang andal, tetapi jauh lebih cepat karena merupakan pencarian disk tunggal. Di sisi lain, LightWallet Lighthouse dapat melakukan pemeriksaan yang sangat akurat dengan mempertimbangkan resource yang dimuat secara dinamis, tetapi perlu men-deploy dan membuka aplikasi setiap kali aplikasi berjalan.

bundlesize sangat mirip dengan pemeriksaan anggaran Angular CLI; perbedaan utamanya adalah bundlesize dapat menampilkan hasil pemeriksaan langsung di antarmuka pengguna GitHub.

Kesimpulan

Tetapkan anggaran performa dengan Angular CLI untuk memastikan performa aplikasi Angular Anda tidak mengalami regresi dari waktu ke waktu:

  1. Tetapkan dasar pengukuran untuk ukuran resource menggunakan kalkulator anggaran atau dengan mengikuti praktik organisasi Anda.
  2. Mengonfigurasi anggaran ukuran di angular.json pada bagian projects.[PROJECT-NAME].architect.build.configurations.production.budgets
  3. Anggaran akan otomatis diterapkan pada setiap build dengan Angular CLI.
  4. Pertimbangkan untuk memperkenalkan pemantauan anggaran sebagai bagian dari integrasi berkelanjutan (yang juga dapat dilakukan dengan Angular CLI).