Hızlanmak için çok çalıştınız. Şimdi Lighthouse Bot ile performans testini otomatik hale getirerek hızınızı koruyun.
Lighthouse uygulamanızı 5 kategoride derecelendirir; bu kategorilerden biri performanstır. Kodunuzu her düzenlediğinizde DevTools veya Lighthouse CLI'yi kullanarak performans değişikliklerini izlemeyi hatırlamayı deneyebilirsiniz ancak bunu yapmanız gerekmez. Araçlar bu yorucu işi sizin yerinize yapabilir. Travis CI, her yeni kod aktardığınızda uygulamanız için otomatik olarak testler çalıştıran mükemmel bir hizmettir.
Lighthouse Bot, Travis CI ile entegre olur ve performans bütçesi özelliği, farkına varmadan yanlışlıkla performansınızı düşürmenizi sağlar. Lighthouse puanları, belirlediğiniz eşiğin altına düşerse (ör. < 96/100) pull isteklerinin birleştirilmesine izin vermeyecek şekilde deponuzu yapılandırabilirsiniz.
Performansı localhost'ta test edebilseniz de, siteniz canlı sunucularda genellikle farklı performans gösterir. Daha gerçekçi bir resim elde etmek için en iyisi, sitenizi bir hazırlık sunucusuna dağıtmaktır. Herhangi bir barındırma hizmetini kullanabilirsiniz. Bu kılavuzda Firebase barındırma ile ilgili biraz bilgi edinebilirsiniz.
1. Kurulum
Bu basit uygulama üç sayıyı sıralamanıza yardımcı olur.
Örneği GitHub'dan klonlayın ve GitHub hesabınıza bir depo olarak eklediğinizden emin olun.
2. Firebase'e dağıtma
Başlamak için Firebase hesabınızın olması gerekir. Bu işlemi tamamladıktan sonra "Proje ekle"yi tıklayarak Firebase konsolunda yeni bir proje oluşturun:
Firebase'e dağıtma
Uygulamayı dağıtmak için Firebase CLI'ya ihtiyacınız var. Uygulamayı zaten yüklemiş olsanız bile, şu komutla KSA'yı sık sık en son sürüme güncellemek iyi bir uygulamadır:
npm install -g firebase-tools
Firebase CLI'yi yetkilendirmek için şu komutu çalıştırın:
firebase login
Şimdi projeyi başlatın:
firebase init
Konsol, kurulum sırasında size bir dizi soru sorar:
- Özellikleri seçmeniz istendiğinde "Barındırma"yı seçin.
- Varsayılan Firebase projesi için Firebase konsolunda oluşturduğunuz projeyi seçin.
- Genel dizininiz olarak "public" (herkese açık) yazın.
- Tek sayfalık uygulama olarak yapılandırmak için "N" (hayır) yazın.
Bu işlem, proje dizininizin kök dizininde bir firebase.json yapılandırma dosyası oluşturur.
Tebrikler, dağıtıma hazırsınız! Çalıştır:
firebase deploy
Bir saniye içinde yayında bir uygulamanız olacak.
3. Travis'i kurma
Travis'te bir hesap kaydettirmeniz ve ardından profilinizin Ayarlar bölümünde GitHub Apps entegrasyonunu etkinleştirmeniz gerekir.
Hesabınızı oluşturduktan sonra
Profilinizin altındaki Ayarlar'a gidin, Hesabı senkronize et düğmesine basın ve proje deponuzun Travis'te listelendiğinden emin olun.
Sürekli entegrasyonu başlatmak için iki şeye ihtiyacınız vardır:
- Kök dizinde bir
.travis.ymldosyasının bulunması - Normal bir eski Git push yaparak bir derlemeyi tetiklemek için
lighthouse-bot-starter deposunda .travis.yml YAML dosyası zaten var:
language: node_js
node_js:
- "8.1.3"
install:
- npm install
before_script:
- npm install -g firebase-tools
script:
- webpack
YAML dosyası Travis'e tüm bağımlılıkları yüklemesini ve uygulamanızı derlemesini söyler. Şimdi örnek uygulamayı kendi GitHub deponuza aktarma sırası sizde. Henüz yapmadıysanız aşağıdaki komutu çalıştırın:
git push origin main
Projenizin Travis kontrol panelini görmek için Travis'te Settings (Ayarlar) altındaki deponuzu tıklayın. Her şey yolundaysa birkaç dakika içinde yapınızın sarıdan yeşile döndüğünü göreceksiniz. 🎉
4. Travis ile Firebase dağıtımını otomatikleştirme
2. Adımda Firebase hesabınıza giriş yaptınız ve uygulamayı firebase deploy ile komut satırından dağıttınız. Travis'in uygulamanızı Firebase'e dağıtabilmesi için
uygulamayı yetkilendirmeniz gerekir. Bunu nasıl yapacaksınız? Firebase jetonuyla.
🗝️🔥
Firebase'i yetkilendirin
Jetonu oluşturmak için şu komutu çalıştırın:
firebase login:ci
Firebase'in sizi doğrulayabilmesi için tarayıcı penceresinde yeni bir sekme açılır. Ardından yeniden konsola baktığınızda yeni basılmış jetonunuzu görürsünüz. Kopyala ve Travis'e geri dön.
Projenizin Travis kontrol panelinde Diğer seçenekler > Ayarlar > Ortam değişkenleri'ne gidin.
Jetonu değer alanına yapıştırın, değişkeni FIREBASE_TOKEN olarak adlandırın ve ekleyin.
Travis kurulumunuza dağıtım ekleyin
Her başarılı derlemeden sonra Travis'e uygulamayı dağıtmasını bildirmek için aşağıdaki satırlara ihtiyacınız vardır.
.travis.yml dosyasının sonuna ekleyin. 🔚
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
Bu değişikliği GitHub'a aktarın ve ilk otomatik dağıtımınızı bekleyin. Travis günlüğünüze baktığınızda kısa süre içinde ✔️ Dağıtım tamamlandı!
Uygulamanızda yaptığınız değişiklikler artık otomatik olarak Firebase'e dağıtılacak.
5. Lighthouse Bot'unu ayarlama
Friendly Lighthouse Bot'u uygulamanızın Lighthouse skorları hakkında sizi bilgilendirir. Yalnızca deponuza davet edilmesi gerekir.
GitHub'da projenizin ayarlarına gidin ve "lighthousebot"u ortak çalışan olarak ekleyin (Ayarlar>Ortak Çalışanlar):
Bu isteklerin onaylanması manuel bir işlemdir, dolayısıyla her zaman anında gerçekleşmez. Teste başlamadan önce, lighthousebot'un ortak çalışan durumunu onayladığından emin olun. Bu arada, Travis'te projenizin ortam değişkenlerine bir anahtar daha eklemeniz gerekir. E-postanızı buraya bırakın. Gelen kutunuza bir Lighthouse Bot anahtarı gönderilir. 📬
Travis'te bu anahtarı ortam değişkeni olarak ekleyip LIGHTHOUSE_API_KEY olarak adlandırın:
Projenize Lighthouse Bot'u ekleme
Ardından, aşağıdaki komutu çalıştırarak Lighthouse Bot'u projenize ekleyin:
npm i --save-dev https://github.com/ebidel/lighthousebot
Bu biti de package.json bölümüne ekleyin:
"scripts": {
"lh": "lighthousebot"
}
Travis yapılandırmanıza Lighthouse Bot'u ekleme
Son ipucu olarak, her pull isteğinden sonra uygulamanın performansını test edin.
.travis.yml içinde, after_success değerine bir adım daha ekleyin:
after_success:
- firebase deploy --token $FIREBASE_TOKEN --non-interactive
- npm run lh -- https://staging.example.com
Belirtilen URL'de Lighthouse denetimi gerçekleştirir. Bu nedenle https://staging.example.com yerine uygulamanızın URL'sini (yani your-app-123.firebaseapp.com) yazın.
Uygulamada 95'in altına düşecek değişiklikleri kabul etmemek için standartlarınızı yüksek tutun ve ayarları değiştirin:
- npm run lh -- --perf=95 https://staging.example.com
Travis'te Lighthouse Bot testini tetiklemek için pull isteği oluştur
Lighthouse Bot, yalnızca çekme isteklerini test eder. Bu nedenle, şimdi ana dala aktarırsanız Travis günlüğünüzde "This komut dosyası yalnızca Travis PR isteklerinde çalıştırılabilir" mesajını görürsünüz.
Lighthouse Bot testini tetiklemek için:
- Yeni bir şube için ödeme yapın
- GitHub'a aktarın
- Pull isteği gönderme
Çekme isteği sayfasında durun ve Lighthouse Bot'un şarkı söylemesini bekleyin. 🎤
Performans puanı çok iyi, uygulama bütçesinin altında ve denetim başarılı oldu.
Diğer Lighthouse seçenekleri
Lighthouse'un 5 farklı kategoriyi nasıl test ettiğini hatırlıyor musunuz? Lighthouse Bot işaretlerine sahip olanlar için puanları zorunlu kılabilirsiniz:
--perf # performance
--pwa # progressive web app score
--a11y # accessibility score
--bp # best practices score
--seo # SEO score
Örnek:
npm run lh -- --perf=93 --seo=100 https://staging.example.com
Performans puanı 93'ün altına veya SEO puanı 100'ün altına düşerse PR'de başarısız olur.
Dilerseniz --no-comment seçeneğini kullanarak Lighthouse Bot'un yorumlarını almamayı da tercih edebilirsiniz.