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.
Untuk melihat cara kerjanya, berikut adalah aplikasi yang dipaketkan dengan webpack yang memungkinkan Anda memberikan suara untuk kucing favorit Anda.
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.
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 di permintaan pull, jadi buka link ini untuk mendapatkan token bundlesize yang akan disimpan di 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 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.
Di Glitch, klik Tools > Git, Import, and Export > Export to GitHub.
Di pop-up, masukkan nama pengguna GitHub Anda dan nama repo sebagai
username/repo
. Glitch akan mengekspor aplikasi Anda ke cabang baru bernama "glitch".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 terlalu besar dan tidak lulus pemeriksaan anggaran performa. Paket utama berukuran 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 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.
Klik tombol Alat.
Kemudian, klik tombol Console. Tindakan ini akan membuka konsol di tab lain.
Di konsol, ketik
webpack
dan tunggu hingga selesai mem-build.Ekspor kode ke GitHub dari Alat > Git, Impor, dan Ekspor > Ekspor ke GitHub.
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 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.