Anggaran performa dengan Angular CLI

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

Minko Gechev

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

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

Menghitung anggaran performa

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

Kalkulator anggaran

Mengonfigurasi anggaran performa di Angular CLI

Setelah memiliki anggaran JavaScript target, Anda dapat menerapkannya menggunakan Angular command line interface (CLI). Untuk mengetahui 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 ringkasan hal yang ditentukan:

  • Ada anggaran untuk paket JavaScript yang disebut main.
  • Jika paket main menjadi lebih besar dari 170 KB, Angular CLI akan menampilkan peringatan di konsol saat Anda mem-build aplikasi.
  • Jika ukuran paket main melebihi 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 seharusnya digunakan oleh konsumen rxjs. Hal ini akan sangat meningkatkan ukuran paket. Saat memperbarui ke impor yang benar, rxjs/operators, dan menjalankan build lagi, Anda akan melihat bahwa build berhasil lulus pemeriksaan anggaran.

Perhatikan bahwa karena pemuatan diferensial diaktifkan secara default di Angular CLI, perintah ng build 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 membutuhkan lebih banyak polyfill, sehingga menyebabkan paket yang lebih besar.

File index.html aplikasi contoh merujuk pada 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 yang mudah untuk memantau anggaran aplikasi Anda dari waktu ke waktu. Dan, untungnya, cara tercepat untuk menyiapkannya adalah dengan mem-build aplikasi Anda dengan Angular CLI—tidak perlu langkah tambahan. Setiap kali paket JavaScript melebihi anggaran, prosesnya akan ditutup 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 membuka versi aplikasi yang di-deploy dan mengukur ukuran aset. Kedua pendekatan ini memiliki pro dan kontra. Pemeriksaan yang dilakukan Angular CLI kurang tangguh tetapi jauh lebih cepat karena berupa pencarian disk tunggal. Di sisi lain, LightWallet dari Lighthouse dapat melakukan pemeriksaan yang sangat akurat dengan mempertimbangkan resource yang dimuat secara dinamis, tetapi perlu men-deploy dan membuka aplikasi setiap kali dijalankan.

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 regresi dari waktu ke waktu:

  1. Tetapkan dasar pengukuran untuk ukuran resource, baik dengan menggunakan kalkulator anggaran maupun dengan mengikuti praktik organisasi Anda.
  2. Konfigurasi anggaran ukuran di angular.json di bawah 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 continuous integration (yang juga dapat dilakukan dengan Angular CLI).