Performans bütçesi belirlemek için Lighthouse Bot'u kullanma

Milica Mihajlija

Hızlı olmak için çok çalıştınız. Şimdi Lighthouse Bot ile performans testini otomatikleştirerek hızınızı korumaya çalışın.

Lighthouse, uygulamanızı 5 kategoride notlandırır. Bunlardan biri performanstır. Kodunuzu her düzenlediğinizde DevTools veya Lighthouse CLI ile performans değişikliklerini izlemeyi hatırlamaya çalışabilirsiniz ancak bunu yapmanız gerekmez. Araçlar sizi daha fazla yorabilir bazı ipuçları vereceğim. Travis CI, her yeni kod gönderdiğinizde uygulamanız için bulutta otomatik olarak testler çalıştıran mükemmel bir hizmettir.

Lighthouse Bot'u Travis CI ile entegre olur ve performans bütçesi özelliği, performansınızın yanlışlıkla düşürülmemesini sağlayabilirsiniz. Lighthouse puanları belirlediğiniz eşiğin altına düşerse (ör. < 96/100) çekme isteklerinin birleştirilmesine izin vermeyecek şekilde depolama alanınızı yapılandırabilirsiniz.

Performansı localhost'ta test edebilseniz de siteniz genellikle canlı sunucularda farklı performans gösterir. Daha gerçekçi bir resim elde etmek için sitenizi bir hazırlık sunucusuna dağıtmanız önerilir. İstediğiniz barındırma hizmetini kullanabilirsiniz. bu Firebase barındırma rehberini ele alacağız bir deneyin.

1. Kurulum

Bu basit uygulama üç sayıyı sıralamanıza yardımcı olur.

GitHub'daki örneği klonlayın, ve GitHub hesabınıza depo olarak eklediğinizden emin olun.

2. Firebase'e dağıtma

Başlamak için bir Firebase hesabınız olmalıdır. Bunu hallettikten sonra, Firebase konsolunda yeni proje oluşturun “Proje ekle”yi tıklayın:

Firebase'e dağıtma

Uygulamayı dağıtmak için Firebase CLI'ye ihtiyacınız vardır. CLI zaten yüklüyse bile CLI'yi bu komutla sık sık en son sürüme güncellemeniz önerilir:

npm install -g firebase-tools

Firebase CLI'ı 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:

• Özellik seçmeniz istendiğinde "Barındırma"yı seçin.
• Varsayılan Firebase projesi için şurada oluşturduğunuz projeyi seçin: Firebase konsolu.
• Herkese açık dizin olarak "public" yazın.
• Tek sayfalık uygulama olarak yapılandırmak için "N" (hayır) yazın.

Bu işlem, proje dizininizin kökünde bir firebase.json yapılandırma dosyası oluşturur.

Tebrikler, dağıtıma hazırsınız! Çalıştırma:

firebase deploy

Uygulamanız anında yayınlanır.

3. Travis'i ayarlama

Travis'te hesap kaydetmeniz ve ardından profilinizin Ayarlar bölümünde GitHub Uygulamaları entegrasyonunu etkinleştirin.

Hesabınızı oluşturduktan sonra

Profilinizin altındaki Ayarlar'a gidin, Hesabı senkronize et düğmesine basın ve ve proje deponuzun Travis’te listelendiğini göreceksiniz.

Sürekli entegrasyonu başlatmak için iki şeye ihtiyacınız vardır:

1. Kök dizinde bir .travis.yml dosyası olmasını sağlamak
2. Normal bir eski git push işlemi yaparak bir derlemeyi tetiklemek için

lighthouse-bot-starter deposunda zaten bir .travis.yml YAML dosyası 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ı oluşturmasını söyler. Şimdi örnek uygulamayı kendi GitHub deponuza gönderme 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'teki Ayarlar bölümünden deponuzu tıklayın. Her şey yolundaysa yapınızın sarıdan yeşile döndüğünü göreceksiniz. birkaç dakika içinde. 🎉

4. Travis ile Firebase dağıtımını otomatikleştirme

2. Adımda Firebase hesabınıza giriş yaptınız ve uygulamayı komut satırından firebase deploy ekleyin. Travis'in uygulamanızı Firebase'i yetkilendirmeniz gerekir. Bunu nasıl yapıyorsunuz? Firebase jetonu ile. 🗝️🔥

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. Bundan sonra konsola tekrar baktığınızda yeni basılan jetonunuzu görürsünüz. Bu kimliği kopyalayıp Travis'e geri dönü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şkene FIREBASE_TOKEN adını verin ve ekleyin.

Travis kurulumunuza dağıtım ekleme

Travis'e her başarılı derlemeden sonra uygulamayı dağıtmasını söylemek için aşağıdaki satırlara ihtiyacınız vardır. Bu dosyaları .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 göz attığınızda kısa süre içinde ✔️ Dağıtım tamamlandı!

Artık uygulamanızda yaptığınız değişiklikler otomatik olarak Firebase'e dağıtılır.

5. Lighthouse Bot'u ayarlama

Samimi Lighthouse Bot'u, uygulamanızın Lighthouse puanlarını bildirir. Bunun için reponuza davetiye gönderilmesi yeterlidir.

GitHub'da projenizin ayarlarına gidin ve "bubblebot" ifadesini ekleyin ortak çalışan olarak (Ayarlar > Ortak çalışanlar):

Bu istekler manuel olarak onaylandığından her zaman anında gerçekleşmez. Teste başlamadan önce deniz fenerinin durumu hakkında daha fazla bilgi edinin. Bu arada, projenin ortam değişkenlerini nasıl kullanacağınızı belirler. E-posta adresinizi bırakın buradan gelen kutunuza bir Lighthouse Bot anahtarı gönderilir. 📬

Travis'te bu anahtarı ortam değişkeni olarak ekleyin ve LIGHTHOUSE_API_KEY olarak adlandırın:

Lighthouse Bot'u projenize ekleme

Ardından, aşağıdaki komutu çalıştırarak Lighthouse Bot'u projenize ekleyin:

npm i --save-dev https://github.com/ebidel/lighthousebot

Ardından, package.json alanına şunu ekleyin:

"scripts": {
  "lh": "lighthousebot"
}

Travis yapılandırmanıza Lighthouse Bot'u ekleyin

Son ipucu olarak, her çekme isteğinden sonra uygulamanın performansını test edin.

.travis.yml dosyasında, after_success bölümüne başka bir adım ekleyin:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

Belirtilen URL'de bir Lighthouse denetimi çalıştırır. Bu nedenle, Uygulamanızın URL'sini içeren https://staging.example.com (bu, uygulamanız-123.firebaseapp.com).

Standartlarınızı yüksek tutun ve ayarları değiştirerek uygulama için performans puanını 95'in altına indirin:

- npm run lh -- --perf=95 https://staging.example.com

Travis'te Lighthouse Bot testini tetiklemek için bir çekme isteği gönderin

Lighthouse Bot yalnızca çekme isteklerini test eder. Bu nedenle, şu anda ana dala gönderirseniz Travis günlüğünüzde "Bu komut dosyası yalnızca Travis PR isteklerinde çalıştırılabilir" ifadesini görürsünüz.

Lighthouse bot testini tetiklemek için:

1. Yeni bir şubeye göz atma
2. GitHub'a aktarın
3. Push isteğinde bulunma

Lütfen çekme isteği sayfasını bekleyin ve Lighthouse Bot'un şarkı söylemesini bekleyin. 🎤

Performans puanı mükemmel, uygulama bütçenin altında ve kontrol geçti.

Diğer Lighthouse seçenekleri

Lighthouse'un 5 farklı kategoriyi nasıl test ettiğini hatırlıyor musunuz? Lighthouse bot işaretleri olan tüm öğeler 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 düşerse veya SEO puanı 100'ün altına düşerse PR başarısız olur.

Dilerseniz Lighthouse Bot'un yorumlarını --no-comment ile almamayı da seçebilirsiniz seçeneğini belirleyin.