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 test ç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.

Not: bundlesize parametresini Circle CI, Wrecker ve Drone ile de kullanabilirsiniz.

Bu özelliğin nasıl çalıştığını görmek için webpack ile birlikte sunulan ve en sevdiğiniz kediye oy vermenize olanak tanıyan bir uygulamayı burada bulabilirsiniz.

Performans bütçesini ayarlama

Bu Glitch zaten bundlesize 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"
  }
]

Not: Farklı dosyalar için farklı eşikler de ayarlayabilirsiniz. Bu, özellikle uygulamanızda bir paketi bölüyorsanız yararlıdır.

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

Bundlesize, genel desenleri destekler ve dosya yolundaki * joker karakteri, herkese açık klasördeki tüm paket adlarıyla eşleşir.

Not: bundlesize, varsayılan olarak sıkıştırılmış boyutları test eder. Brotli sıkıştırmasına geçmek veya sıkıştırmayı tamamen devre dışı bırakmak için sıkıştırma seçeneğini kullanabilirsiniz.

Test komut dosyası oluşturma

Travis'in çalışması 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'yi entegre etme

Öncelikle GitHub hesabınızda bu proje için yeni bir depo oluşturun ve 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şturduktan sonra profilinizin altındaki 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, çekme isteklerinde yayınlayabilmesi için yetkilendirilmesi gerekir. Bu nedenle, Travis yapılandırmasında depolanacak bundlesize 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 ihtiyacınız olan son şey, Travis CI'ye ne yapacağını söyleyen bir .travis.ymldosyasıdır. İşlemleri hızlandırmak için bu dosya projeye zaten eklenmiş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. Başlangıçta iyi bir boyuta sahip olsanız bile zaman içinde yeni özellikler ekledikçe kilobayt sayısı artabilir. 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çesiyle karşılaştırması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'ta GitHub kullanıcı adınızı ve username/repo olarak deponun adını girin. Glitch, uygulamanızı "glitch" adlı yeni bir dala aktarır.

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

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

Tüm kontrollerin yapılması uzun sürmez. Maalesef kedi oylama uygulaması biraz şişman ve performans bütçesi kontrolünü geçmiyor. 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'te iki ana içe aktarma vardır:

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

Uygulama, verileri depolamak için Firebase Realtime Database'i kullanıyor ancak yalnızca bir veritabanından çok daha fazlasını (kimlik doğrulama, depolama, mesajlaşma vb.) içeren Firebase paketinin tamamını 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';

Not: Farklı hizmetlerin her biri için API yüzeyini ayarlayan firebase/app içe aktarma işlemi her zaman gereklidir.

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 isteği 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 artık 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.