Travis CI ile paket boyutunu kullanma

Milica Mihajlija

bundlesize'ı Travis CI ile birlikte kullanarak performans bütçelerini minimum kurulumla tanımlayabilir ve geliştirme iş akışınızın bir parçası olarak uygulayabilirsiniz. Travis CI, GitHub'a her kod aktardığınızda uygulamanız için bulutta testler çalıştıran bir hizmettir. Deponuzu, paket boyutu testleri geçilmediği sürece çekme isteklerinin birleştirilmesine izin vermeyecek şekilde yapılandırabilirsiniz.

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

Bu özelliği kullanırken nasıl bir deneyim yaşayacağınızı görmek için webpack ile paketlenmiş ve en sevdiğiniz kediyi oylamanıza olanak tanıyan bir uygulamaya göz atın.

Performans bütçesini belirleme

Bu Glitch zaten bundlesize içeriyor.

• Projeyi düzenlenebilir hale getirmek için Düzenlemek İçin Remiksle'yi tıklayın.

Bu uygulamanın ana paketi, herkese açık klasörde bulunuyor. 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 maxSize alanında performans bütçesini 170 KB olarak ayarlayın.

Bundlesize, glob desenlerini destekler ve dosya yolundaki * joker karakteri, public klasöründeki tüm paket adlarıyla eşleşir.

Test komut dosyası oluşturma

Travis'in çalışması için teste ihtiyacı olduğundan package.json'ya bir test komut dosyası ekleyin:

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

Sürekli entegrasyon ayarlama

GitHub ve Travis CI'ı 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 hesap kaydetmeniz ve profilinizin Ayarlar bölümünde GitHub Apps entegrasyonunu etkinleştirmeniz gerekir.

Hesabınız olduğunda profilinizdeki Ayarlar'a gidin, Hesabı senkronize et düğmesini tıklayın ve yeni deponuzun Travis'te listelendiğinden emin olun.

bundlesize'ın çekme isteklerine yayın göndermesine izin verme

Bundlesize'ın çekme isteklerine 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 More options (Diğer seçenekler) > Settings (Ayarlar) > Environment variables (Ortam değişkenleri) bölümüne gidin.

Değer alanı olarak jetonun, ad olarak da BUNDLESIZE_GITHUB_TOKEN'ın kullanıldığı yeni bir ortam değişkeni ekleyin.

Sürekli entegrasyonu başlatmak için son olarak Travis CI'ya ne yapması gerektiğini söyleyen bir .travis.yml dosyasına ihtiyacınız var. Bu dosya, işlemleri hızlandırmak için projeye önceden dahil edilmiştir ve uygulamanın NodeJS kullandığını belirtir.

Bu adımla birlikte kurulumu tamamlamış olursunuz ve JavaScript'iniz bütçeyi aşarsa bundlesize sizi uyarır. Başlangıçta her şey yolunda olsa bile zamanla yeni özellikler ekledikçe kilobaytlar birikebilir. Otomatik performans bütçesi izleme sayesinde, bütçenizin gözden kaçmayacağını bilerek rahat bir şekilde çalışabilirsiniz.

Deneyin

İlk paket boyutu testinizi tetikleme

Uygulamanın performans bütçesine kıyasla nasıl performans gösterdiğini görmek için kodu 3. adımda oluşturduğunuz GitHub deposuna ekleyin.

1. Glitch'te Tools (Araçlar) > Git, Import, and Export (Git, İçe Aktarma ve Dışa Aktarma) > Export to GitHub'u (GitHub'a Dışa Aktar) tıklayın.

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

3. Deponun ana sayfasında New pull request (Yeni pull isteği) düğmesini tıklayarak yeni bir pull isteği oluşturun.

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

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

Optimize etme

Neyse ki kullanılmayan kodu kaldırarak kolayca performans artışı sağlayabilirsiniz. src/index.js içinde iki ana içe aktarma işlemi 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 veritabanından (kimlik doğrulama, depolama, mesajlaşma vb.) çok daha fazlasını içeren firebase paketinin tamamını içe aktarıyor.

Bu sorunu düzeltmek için src/index.js dosyasında yalnızca uygulamanın ihtiyaç duyduğu paketi içe aktarın:

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 oluşturma işleminin tamamlanmasını bekleyin.

4. Kodu Araçlar > Git, İçe Aktarma ve Dışa Aktarma > GitHub'a Dışa Aktar'dan GitHub'a aktarın.

5. GitHub'da pull isteği sayfasına gidin ve tüm kontrollerin tamamlanmasını bekleyin.

Başarılı aktarım Paketin yeni boyutu 125,5 KB ve tüm kontroller başarılı oldu. 🎉

Firebase'in aksine, Moment kitaplığının bölümlerini içe aktarmak o kadar kolay olmasa da denemeye değer. Uygulamayı daha da nasıl optimize edebileceğinizi öğrenmek için Kullanılmayan kodu kaldırma codelab'ine göz atın.

Gözle

Uygulama artık bütçe dahilinde ve her şey yolunda. Travis CI ve bundlesize, uygulamanızın hızlı kalmasını sağlamak için performans bütçesini sizin adınıza izlemeye devam eder.