Travis CI ile paket boyutunu kullanma

Milica Mihajlija

Travis CI ile bundlesize'ı kullanmak, performans bütçelerini minimum kurulumla tanımlamanıza ve geliştirme iş akışınızın bir parçası olarak uygulamanıza olanak tanır. Travis CI, GitHub'a her kod aktarma işleminizde uygulamanız için bulutta testler çalıştıran bir hizmettir. Paket boyutu testleri geçilmedikçe çekme isteklerinin birleştirilmesine izin vermeyecek şekilde depolama alanınızı yapılandırabilirsiniz.

Bundlesize'ın GitHub kontrolleri, ana dalla boyut karşılaştırması ve boyutta büyük bir artış olması durumunda uyarı içerir.

Nasıl çalıştığını görmek için webpack ile paket halinde sunulan kedinize oy vermenize olanak tanıyan uygulamaya göz atabilirsiniz.

Performans bütçesini belirleme

Bu Glitch zaten bundlesize değerini içeriyor.

• Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.

Bu uygulamanın ana paketi herkese açık klasördedir. Boyutunu test etmek için package.json dosyasına aşağıdaki bölümü ekleyin:

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

Sıkıştırılmış JavaScript paketi boyutunu önerilen sınırın altında tutmak için performans bütçesini maxSize alanında 170 KB olarak ayarlayın.

Bundlesize glob kalıplarını destekler ve dosya yolundaki * joker karakter karakteri ortak klasördeki tüm paket adlarıyla eşleşir.

Test komut dosyası oluşturma

Travis'in çalıştırılması için bir teste ihtiyacı olduğundan package.json dosyasına bir test komut dosyası ekleyin:

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

Sürekli entegrasyon ayarlama

GitHub ve Travis CI'yı entegre etme

Öncelikle, GitHub hesabınızda bu proje için yeni bir depo oluşturun ve bu depoyu README.md ile başlatın.

Travis'te bir hesap kaydettirmeniz ve profilinizin Ayarlar bölümünde GitHub Apps entegrasyonunu etkinleştirmeniz gerekir.

Hesabınız oluşturulduktan sonra profilinizin altında Ayarlar'a gidin, Hesabı senkronize et düğmesini tıklayın ve yeni deponuzun Travis'te listelendiğinden emin olun.

Paket boyutunun, çekme isteklerinde yayınlanması için yetkilendirme

Bundlesize'ın pull isteklerinde yayın yapabilmesi için yetkilendirme gerekir. Bu nedenle, Travis yapılandırmasında depolanacak paket boyutu jetonunu almak için bu bağlantıyı ziyaret edin.

Projenizin Travis kontrol panelinde Diğer seçenekler > Ayarlar > Ortam değişkenleri'ne gidin.

Değer alanı olarak jetonu, ad olarak da BUNDLESIZE_GITHUB_TOKEN değerini içeren yeni bir ortam değişkeni ekleyin.

Sürekli entegrasyonu başlatmak için son olarak, Travis CI'ya ne yapılacağını bildiren bir .travis.yml dosyası gerekir. İşleri hızlandırmak için bu dosya zaten projeye dahil edilmiştir ve uygulamanın NodeJS kullandığını belirtir.

Bu adımla kurulumunuz tamamlanır ve JavaScript'iniz bütçeyi aşarsa bundlesize sizi uyarır. Harika bir başlangıç yapsanız bile, zaman içinde yeni özellikler eklendikçe kilobaytlar birikebilir. Otomatik performans bütçesi izleme sayesinde, bu durumun gözden kaçmayacağını bilerek rahatlayabilirsiniz.

Deneyin

İlk paket boyutu testinizi tetikleme

Uygulamanın, performans bütçesine göre performansını görmek için kodu, 3. adımda oluşturduğunuz GitHub deposuna ekleyin.

1. Glitch'te Araçlar > Git, İçe Aktar ve Dışa Aktar > GitHub'a aktar'ı tıklayın.

2. Pop-up pencerede GitHub kullanıcı adınızı ve deponun adını username/repo olarak girin. Glitch, uygulamanızı "glitch" adlı yeni bir dala aktarır.

3. Deponun ana sayfasındaki Yeni pull isteği düğmesini tıklayarak yeni bir pull isteği oluşturun.

Artık alma isteği sayfasında devam eden durum kontrollerini göreceksiniz.

Tüm kontrollerin tamamlanması uzun sürmez. Maalesef kedi oylama uygulaması biraz şişman ve performans bütçesi kontrolünü geçemiyor. Ana paket 266 KB, bütçe ise 170 KB'tır.

Optimize etme

Neyse ki kullanılmayan kodu kaldırarak kolayca performans kazanabilirsiniz. src/index.js bölgesinde iki ana içe aktarma işlemi yapılır:

import firebase from "firebase";
import * as moment from 'moment';

Uygulama, verileri depolamak için Firebase Realtime Database'i kullanıyor ancak bir veritabanından (kimlik doğrulama, depolama, mesajlaşma vb.) çok daha fazlasını içeren tüm Firebase paketini içe aktarıyor.

Yalnızca uygulamanın ihtiyaç duyduğu paketi src/index.js dosyasına aktararak bu sorunu düzeltin:

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

Testi yeniden çalıştır

Kaynak dosya güncellendiğinden yeni paket dosyasını oluşturmak için webpack'i çalıştırmanız gerekir.

1. Araçlar düğmesini tıklayın.

2. Ardından Konsol düğmesini tıklayın. Bu işlem, konsolu başka bir sekmede açar.

3. Konsolda webpack yazın ve derlemenin tamamlanmasını bekleyin.

4. Araçlar > Git, İçe Aktarma ve Dışa Aktarma > GitHub'a dışa aktar'ı seçerek kodu GitHub'a aktarın.

5. GitHub'daki pull istek sayfasına gidin ve tüm kontrollerin tamamlanmasını bekleyin.

Başarıyla gerçekleştirildi. Paketin yeni boyutu 125,5 KB'tır ve tüm kontroller geçmiştir. 🎉

Firebase'den farklı olarak, an an kütüphanesinin bölümlerini içe aktarmak o kadar kolay değildir ancak denemeye değer. Kullanılmayan kodları kaldırma codelab'inde uygulamayı nasıl daha da optimize edebileceğinize göz atın.

Gözle

Uygulama şu anda bütçenin altında ve her şey yolunda. Travis CI ve bundlesize, performans bütçesini sizin için izleyerek uygulamanızın hızlı kalmasını sağlar.