Menggunakan bundlesize dengan Travis CI

Dengan menggunakan bundlesize bersama 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 mendorong 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.

Pemeriksaan ukuran paket di GitHub

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

Aplikasi pemungutan suara kucing

Menetapkan anggaran performa

Glitch ini sudah berisi bundlesize.

  • Klik Remix to Edit untuk membuat 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 GitHub dan mengaktifkan integrasi Aplikasi GitHub di bagian Setelan di profil Anda.

Integrasi Aplikasi GitHub di Travis CI

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

Tombol Sinkronisasi Travis CI

Mengizinkan bundlesize untuk memposting di permintaan pull

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

token bundlesize

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

Menambahkan variabel lingkungan di Travis CI

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

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

Pemeriksaan GitHub sedang berlangsung

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

Pemeriksaan ukuran paket gagal

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 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 selesai mem-build.

  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.

Lulus pemeriksaan ukuran paket

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 untuk mencobanya. Lihat cara mengoptimalkan aplikasi lebih lanjut di codelab Menghapus kode yang tidak digunakan.

Memantau

Aplikasi kini berada di bawah anggaran dan semuanya baik-baik saja. Travis CI dan bundlesize akan terus memantau anggaran performa untuk Anda, sehingga memastikan aplikasi Anda tetap cepat.