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 di cloud setiap kali Anda mengirim kode ke GitHub. Anda dapat mengonfigurasi repositori sehingga repositori tidak mengizinkan penggabungan permintaan pull kecuali jika pengujian ukuran paket telah lulus.

Pemeriksaan GitHub Bundlesize menyertakan perbandingan ukuran dengan cabang utama dan peringatan jika terjadi lompatan besar dalam ukuran.

Untuk melihat cara kerjanya, berikut adalah aplikasi yang dipaketkan dengan webpack yang memungkinkan Anda memilih kucing favorit Anda.

Menetapkan anggaran performa

This Glitch sudah berisi bundlesize.

• Klik Remix untuk Mengedit agar 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 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 Settings di bagian profil, klik tombol Sync account, dan pastikan repo baru Anda tercantum di Travis.

Mengizinkan ukuran paket untuk memposting pada permintaan pull

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

Pada dasbor Travis project Anda, buka More options > Settings > Environment Variables.

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

Hal terakhir yang Anda perlukan untuk memulai continuous integration 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 bundlesize akan memperingatkan Anda jika JavaScript Anda melebihi anggaran. Meskipun Anda memulai dengan hebat, seiring waktu Anda menambahkan fitur baru, {i>kilobyte<i} bisa menumpuk. Dengan pemantauan anggaran performa otomatis, Anda dapat merasa tenang karena mengetahui bahwa hal itu tidak akan luput dari perhatian.

Cobalah

Picu 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 jendela pop-up, masukkan nama pengguna GitHub Anda dan nama repo sebagai username/repo. Glitch akan mengekspor aplikasi Anda ke cabang baru yang bernama "glitch".

3. Buat permintaan pull baru dengan mengklik tombol New pull request 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 agak berat dan tidak lulus pemeriksaan anggaran performa. Paket utama adalah 266 KB dan anggarannya 170 KB.

Pengoptimalan

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

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

Aplikasi ini menggunakan Firebase Realtime Database untuk menyimpan data, tetapi mengimpor seluruh paket firebase yang terdiri dari lebih dari sekadar database (auth, penyimpanan, pesan, dll.).

Perbaiki masalah ini dengan mengimpor hanya paket yang diperlukan aplikasi di 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 membangun file paket baru.

1. Klik tombol Tools.

2. Lalu klik tombol Konsol. Ini akan membuka konsol di tab lain.

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

4. Ekspor kode ke GitHub dari Tools > Git, Import, and Export > Export to GitHub.

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

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

Tidak seperti Firebase, mengimpor bagian library momen tidak dapat dilakukan dengan mudah, tetapi tidak ada salahnya mencoba. Lihat cara mengoptimalkan aplikasi lebih lanjut di Codelab Menghapus kode yang tidak digunakan.

Memantau

Aplikasi tersebut sekarang berada di bawah anggaran dan semuanya berjalan dengan baik. Travis CI dan bundlesize akan terus memantau anggaran performa untuk Anda sehingga memastikan aplikasi Anda tetap cepat.