Menggunakan bundlesize dengan Travis CI

Milica Mihajlija

Dengan menggunakan bundlesize dengan Travis CI, Anda dapat menentukan anggaran performa dengan penyiapan minimal dan menerapkannya sebagai bagian dari alur kerja pengembangan. 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 lulus.

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

Untuk melihat penerapannya, berikut adalah aplikasi yang di-bundle dengan webpack yang memungkinkan Anda memilih anak kucing favorit Anda.

Menetapkan anggaran performa

Glitch ini sudah berisi bundlesize.

• Klik Remix to Edit untuk membuat project dapat diedit.

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

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

Untuk menjaga ukuran paket JavaScript yang dikompresi 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 lakukan inisialisasi dengan README.md.

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

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

Mengizinkan bundlesize untuk memposting di pull request

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

Di dasbor Travis project Anda, buka More options > Settings > Environment variables.

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

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

Dengan langkah ini, Anda sudah siap dan bundlesize 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 tidak akan terlewatkan.

Cobalah

Memicu pengujian ukuran paket pertama Anda

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

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

2. Di jendela 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 New pull request di halaman beranda repositori.

Anda kini akan melihat pemeriksaan status yang sedang berlangsung di halaman pull request.

Tidak akan lama hingga semua pemeriksaan selesai. Sayangnya, aplikasi pemungutan suara kucing agak membengkak dan tidak lulus pemeriksaan anggaran performa. Paket utama berukuran 266 KB dan anggaran yang tersedia adalah 170 KB.

Optimalkan

Untungnya, ada beberapa peningkatan performa mudah yang bisa 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 hanya database (auth, storage, messaging, dll.).

Perbaiki masalah ini dengan mengimpor hanya paket yang dibutuhkan 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 membuat file bundle 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 paket yang baru adalah 125,5 KB dan semua pemeriksaan telah lulus. 🎉

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

Memantau

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