Menggunakan bundlesize dengan Travis CI

Milica Mihajlija

Penggunaan bundlesize dengan Travis CI memungkinkan Anda menentukan anggaran performa dengan penyiapan minimal dan menerapkannya sebagai bagian dari alur kerja pengembangan Anda. Travis CI adalah layanan yang menjalankan pengujian untuk aplikasi Anda di cloud setiap kali Anda mengirim kode ke GitHub. Anda dapat mengonfigurasi repositori agar tidak mengizinkan penggabungan permintaan pull kecuali jika pengujian ukuran paket telah berhasil.

Pemeriksaan GitHub Bundlesize mencakup perbandingan ukuran dengan cabang utama dan peringatan jika terjadi lonjakan ukuran yang besar.

Untuk melihat cara kerjanya, berikut aplikasi yang dipaketkan dengan webpack agar Anda dapat memilih untuk kucing favorit Anda.

Menetapkan anggaran performa

Glitch ini sudah berisi bundlesize.

• Klik Remix to Edit untuk menjadikan project dapat diedit.

Paket utama aplikasi ini berada di folder publik. Untuk menguji ukurannya, tambahkan bagian berikut ke file package.json:

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

Agar ukuran paket JavaScript yang dikompresi tetap di bawah batas yang direkomendasikan, tetapkan anggaran performa ke 170 KB di kolom maxSize.

Bundlesize mendukung pola glob dan karakter pengganti * di jalur file akan cocok dengan semua nama paket di folder publik.

Membuat skrip pengujian

Karena Travis memerlukan pengujian untuk dijalankan, tambahkan skrip pengujian ke package.json:

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

Menyiapkan continuous integration

Mengintegrasikan GitHub dan Travis CI

Pertama, buat repositori baru untuk project ini di akun GitHub Anda dan inisialisasi dengan README.md.

Anda harus mendaftarkan akun di Travis dan mengaktifkan integrasi Aplikasi GitHub di bagian Settings di profil Anda.

Setelah memiliki akun, buka Setelan di bagian profil, klik tombol Sinkronkan akun, dan pastikan repo baru Anda tercantum di Travis.

Mengizinkan bundlesize untuk memposting di permintaan pull

Bundlesize memerlukan otorisasi agar dapat memposting pada permintaan pull, jadi buka link ini untuk mendapatkan token bundlesize yang akan disimpan dalam konfigurasi Travis.

Di dasbor Travis project Anda, buka Opsi lainnya > Setelan > Variabel lingkungan.

Tambahkan variabel lingkungan baru dengan token sebagai kolom nilai dan BUNDLESIZE_GITHUB_TOKEN sebagai namanya.

Hal terakhir yang Anda perlukan untuk memulai integrasi berkelanjutan adalah file .travis.yml, yang memberi tahu Travis CI apa yang harus dilakukan. Untuk mempercepat prosesnya, file ini sudah disertakan dalam project dan menentukan bahwa aplikasi menggunakan NodeJS.

Dengan langkah ini, Anda sudah siap dan ukuran paket akan memperingatkan Anda jika JavaScript Anda melebihi anggaran. Meskipun Anda memulai dengan baik, seiring waktu, saat Anda menambahkan fitur baru, kilobyte dapat menumpuk. Dengan pemantauan anggaran performa otomatis, Anda dapat merasa tenang karena anggaran tidak akan terlewat.

Cobalah

Memicu pengujian ukuran paket pertama Anda

Untuk melihat perbandingan aplikasi dengan anggaran performa, tambahkan kode ke repo GitHub yang Anda buat di langkah 3.

1. Di Glitch, klik Tools > Git, Import, and Export > Export to GitHub.

2. Di pop-up, masukkan nama pengguna GitHub Anda dan nama repo sebagai username/repo. Glitch akan mengekspor aplikasi Anda ke cabang baru bernama "glitch".

3. Buat permintaan pull baru dengan mengklik tombol Permintaan pull baru di halaman beranda repositori.

Sekarang Anda akan melihat pemeriksaan status yang sedang berlangsung di halaman permintaan pull.

Tidak perlu waktu lama hingga semua pemeriksaan selesai. Sayangnya, aplikasi pemungutan suara kucing sedikit membengkak dan tidak lulus pemeriksaan anggaran performa. Paket utama adalah 266 KB dan anggarannya adalah 170 KB.

Optimalkan

Untungnya, ada beberapa peningkatan performa mudah yang dapat Anda lakukan dengan menghapus kode yang tidak digunakan. Ada dua impor utama di src/index.js:

import firebase from "firebase";
import * as moment from 'moment';

Aplikasi menggunakan Firebase Realtime Database untuk menyimpan data, tetapi mengimpor seluruh paket Firebase yang terdiri dari banyak hal selain database (autentikasi, penyimpanan, pesan, dll.).

Perbaiki masalah ini dengan hanya mengimpor paket yang diperlukan aplikasi dalam file src/index.js:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

Jalankan kembali pengujian

Karena file sumber telah diperbarui, Anda perlu menjalankan webpack untuk mem-build file paket baru.

1. Klik tombol Alat.

2. Kemudian, klik tombol Console. Tindakan ini akan membuka konsol di tab lain.

3. Di konsol, ketik webpack dan tunggu hingga build selesai.

4. Ekspor kode ke GitHub dari Alat > Git, Impor, dan Ekspor > Ekspor ke GitHub.

5. Buka halaman permintaan pull di GitHub dan tunggu hingga semua pemeriksaan selesai.

Berhasil! Ukuran baru paket adalah 125,5 KB dan semua pemeriksaan telah lulus. 🎉

Tidak seperti Firebase, mengimpor bagian-bagian library momen tidak dapat dilakukan dengan mudah, tetapi ada baiknya dicoba. Lihat cara mengoptimalkan aplikasi lebih lanjut di codelab Menghapus kode yang tidak digunakan.

Memantau

Aplikasi ini sekarang di bawah anggaran dan semuanya berjalan lancar. Travis CI dan bundlesize akan terus memantau anggaran performa untuk Anda, sehingga memastikan aplikasi Anda tetap cepat.