Anda telah bekerja keras untuk menjadi cepat, sekarang pastikan Anda tetap cepat dengan mengotomatiskan pengujian performa menggunakan Lighthouse Bot.
Lighthouse menilai aplikasi Anda dalam 5 kategori, dan salah satunya adalah performa. Meskipun Anda dapat mencoba mengingat untuk memantau perubahan performa dengan DevTools atau Lighthouse CLI setiap kali Anda mengedit kode, Anda tidak perlu melakukannya. {i>Tool<i} dapat melakukan hal-hal yang membosankan untuk Anda. Travis CI adalah layanan hebat yang secara otomatis menjalankan pengujian untuk aplikasi Anda di cloud setiap kali Anda mengirim kode baru.
Lighthouse Bot terintegrasi dengan Travis CI, dan fitur anggaran performanya memastikan Anda tidak akan mendowngrade performa secara tidak sengaja tanpa menyadarinya. Anda dapat mengonfigurasi repositori sehingga tidak akan mengizinkan penggabungan permintaan pull jika skor Lighthouse berada di bawah nilai minimum yang Anda tetapkan (misalnya < 96/100).
Meskipun Anda dapat menguji performa di localhost, performa situs sering kali akan berbeda pada server aktif. Untuk mendapatkan gambaran yang lebih realistis, sebaiknya deploy situs Anda ke server staging. Anda dapat menggunakan layanan hosting apa pun. Panduan ini akan memandu Firebase hosting.
1. Penyiapan
Aplikasi sederhana ini membantu Anda mengurutkan tiga angka.
Buat clone contoh dari GitHub, dan pastikan untuk menambahkannya sebagai repositori di akun GitHub Anda.
2. Men-deploy ke Firebase
Untuk memulai, Anda memerlukan akun Firebase. Setelah Anda mengatasinya, buat project baru di Firebase console dengan mengklik "Tambahkan project":
Men-deploy ke Firebase
Anda memerlukan Firebase CLI untuk men-deploy aplikasi. Meskipun Anda sudah menginstalnya, sebaiknya selalu update CLI ke versi terbaru dengan perintah ini:
npm install -g firebase-tools
Untuk mengizinkan Firebase CLI, jalankan:
firebase login
Sekarang, inisialisasi project:
firebase init
Konsol akan mengajukan serangkaian pertanyaan selama penyiapan:
- Ketika diminta untuk memilih fitur, pilih "{i>Hosting<i}".
- Untuk project Firebase default, pilih project yang telah Anda buat di Firebase console.
- Ketik "{i>public<i}" sebagai direktori publik Anda.
- Ketik "N" (tidak) untuk mengonfigurasi sebagai aplikasi satu halaman.
Proses ini akan membuat file konfigurasi firebase.json di root direktori project Anda.
Selamat, Anda siap men-deploy! Jalankan:
firebase deploy
Dalam waktu sepersekian detik, Anda akan memiliki aplikasi yang sudah tayang.
3. Menyiapkan Travis
Anda harus mendaftarkan akun di Travis, lalu mengaktifkan integrasi Aplikasi GitHub di bagian Setelan profil Anda.
Setelah Anda memiliki akun
Buka Settings di profil Anda, tekan tombol Sync account, dan pastikan repo project Anda tercantum di Travis.
Untuk memulai continuous integration, Anda memerlukan dua hal:
- Untuk memiliki file
.travis.ymldi direktori root - Untuk memicu build dengan melakukan git push lama secara reguler
Repositori lighthouse-bot-starter sudah memiliki file YAML .travis.yml:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
File YAML memberi tahu Travis untuk menginstal semua dependensi dan membangun aplikasi. Sekarang giliran Anda untuk mengirim aplikasi contoh ke repositori GitHub Anda sendiri. Jalankan perintah berikut jika Anda belum melakukannya:
git push origin main
Klik repositori Anda di bagian Settings in Travis untuk melihat dasbor Travis project Anda. Jika tidak ada masalah, warna build akan berubah dari kuning menjadi hijau dalam beberapa menit. 🎉
4. Mengotomatiskan deployment Firebase dengan Travis
Pada Langkah 2, Anda telah login ke akun Firebase dan men-deploy aplikasi dari command line dengan firebase deploy. Agar Travis dapat men-deploy aplikasi ke Firebase, Anda harus mengizinkannya. Bagaimana Anda melakukannya? Dengan token Firebase.
🗝️🔥
Otorisasi Firebase
Untuk membuat token, jalankan perintah ini:
firebase login:ci
Tindakan ini akan membuka tab baru di jendela browser sehingga Firebase dapat memverifikasi Anda. Setelah itu, lihat kembali konsol, dan Anda akan melihat token yang baru dicetak. Salin dan kembali ke Travis.
Di dasbor Travis project Anda, buka More options > Settings > Environment variables.
Tempelkan token di kolom nilai, beri nama variabel FIREBASE_TOKEN, dan tambahkan.
Menambahkan deployment ke konfigurasi Travis
Anda memerlukan baris berikut untuk memberi tahu Travis agar men-deploy aplikasi setelah setiap build berhasil.
Tambahkan ke akhir file .travis.yml. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Kirim perubahan ini ke GitHub dan tunggu deployment otomatis pertama Anda. Jika Anda melihat log Travis, seharusnya segera tertulis ✔️ Deploy selesai!
Sekarang, setiap kali Anda membuat perubahan pada aplikasi, perubahan tersebut akan di-deploy secara otomatis ke Firebase.
5. Menyiapkan Bot Lighthouse
Friendly Lighthouse Bot memberikan info terbaru tentang skor Lighthouse aplikasi Anda. Hanya perlu undangan ke repo Anda.
Di GitHub, buka setelan project Anda dan tambahkan "cumerbot" sebagai kolaborator (Settings>Collaborators):
Menyetujui permintaan ini adalah proses manual sehingga tidak selalu terjadi secara instan. Sebelum memulai pengujian, pastikan mercusuarbot telah menyetujui status kolaboratornya. Sementara itu, Anda juga perlu menambahkan kunci lain ke variabel lingkungan project Anda di Travis. Tinggalkan email Anda di sini, dan Anda akan mendapatkan kunci Bot Lighthouse di kotak masuk. 📬
Di Travis, tambahkan kunci ini sebagai variabel lingkungan dan beri nama LIGHTHOUSE_API_KEY:
Menambahkan Bot Lighthouse ke project Anda
Selanjutnya, tambahkan Bot Lighthouse ke project Anda dengan menjalankan:
npm i --save-dev https://github.com/ebidel/lighthousebot
Dan tambahkan bit ini ke package.json:
"scripts": {
"lh": "lighthousebot"
}
Menambahkan Bot Lighthouse ke konfigurasi Travis Anda
Untuk trik terakhir, uji performa aplikasi setelah setiap permintaan pull.
Di .travis.yml, tambahkan langkah lain dalam after_berhasil:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Audit ini akan menjalankan audit Lighthouse pada URL yang ditentukan. Jadi, ganti https://staging.example.com dengan URL aplikasi Anda (yaitu your-app-123.firebaseapp.com).
Tetapkan standar yang tinggi dan sesuaikan penyiapan sehingga Anda tidak menerima perubahan apa pun pada aplikasi yang membuat skor performa di bawah 95:
- npm run lh -- --perf=95 https://staging.example.com
Buat permintaan pull untuk memicu pengujian Bot Lighthouse di Travis
Lighthouse Bot hanya akan menguji permintaan pull, jadi jika Anda mengirim ke cabang utama sekarang, Anda hanya akan mendapatkan "This script can only be run on Travis PR requests" di log Travis Anda.
Untuk memicu pengujian Bot Lighthouse:
- Checkout cabang baru
- Kirim ke GitHub
- Membuat permintaan pull
Tunggu halaman permintaan pull itu dan tunggu hingga Lighthouse Bot bernyanyi! 🎤
Skor performanya bagus, aplikasi berada di bawah anggaran, dan pemeriksaan telah lulus.
Opsi Lighthouse lainnya
Ingat bagaimana Lighthouse menguji 5 kategori berbeda? Anda dapat menerapkan skor untuk semua skor dengan flag Bot Lighthouse:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Contoh:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
Tindakan ini akan menggagalkan PR jika skor performa turun di bawah 93 atau skor SEO turun di bawah 100.
Anda juga dapat memilih untuk tidak mendapatkan komentar Lighthouse Bot dengan opsi --no-comment.