- Geliştirmenin ilk dönemlerinde derleme süresi yaklaşık 30 saniyeydi ve kabul edilebilirdi, ancak zamanla özellikler eklendikçe bu süre 1 dakika 10 saniyeye kadar çıktı
- Uzun derleme süresi geliştirme sürecini yavaşlatıyor, yeni geliştiricilerin onboarding süresini uzatıyor ve günlük işlerde odaklanmayı zorlaştırıyordu
Hackathon ile iyileştirme denemesi
- Ocak ayında veri toplandı, hackathon proje teklifi hazırlandı, mevcut derleme sistemi daha iyi anlaşılmaya çalışıldı ve profiling yöntemleri araştırıldı
- Tüm derleme süreci OpenTelemetry ve Jaeger kullanılarak profillendi
- Profiling sonucunda, derleme süresinin büyük bölümünü Webpack/Rollup çalıştırmalarının kapladığı görüldü
- Küçük bağımlılıkların tek tek derlendiği ve bu nedenle paralel işleme için çok sayıda fırsat bulunduğu keşfedildi
- Başlangıçta bazı yoğun işlemlerin gerekenden uzun sürdüğü ve derleme sürecinin geri kalanını geciktirdiği tespit edildi
- Hackathon sırasında, esbuild kullanarak bundle alma süresini kısaltmaya odaklanıldı
- Webpack/Rollup loader’ı olarak esbuild kullanılarak performans büyük ölçüde artırıldı (Rollup için %80 kısalma)
- esbuild, Webpack/Rollup’un tamamen yerine geçen bir bundler olarak kullanılarak bundle alma süresi %90 kısaltıldı
- Hackathon projesinin sonucunda, uzantı derleme süresi %70’ten fazla azaltılarak yaklaşık 15 saniyeye indirildi
Prodüksiyona uygulamak için yapılan çalışmalar
- Hackathon projesinde çok sayıda geçici çözüm kullanıldığı için, bunu prodüksiyona taşımak adına gerçek çözümlerle değiştirmek gerekti
- Webpack ve Rollup kullanımı tamamen esbuild’e geçirildi
- Derleme süreci tek bir yerde birleştirildi
- Grafik asset işleme sorunları çözüldü
- TypeScript tür denetimi derleme sürecine yeniden eklendi
- Prodüksiyon derlemeleri test edildi; boyut ve işlev karşılaştırmaları yapıldı
- İç bağımlılıklardaki değişiklikler yansıtıldı
- Sentry derleme adımı gibi önceki derleme sisteminin diğer yönleri yeniden oluşturuldu
- Chrome dışındaki tarayıcılar, polyfill’ler ve mağaza bazlı derleme gereksinimleri için ek işlemler eklendi
- Özellikle tür denetimi ve bundle boyutu optimizasyonuna odaklanan çalışmalar yapıldı
esbuild’e tür denetimi ekleme
tsc yavaş olduğu için, esbuild’in hızlı derleme süreciyle birlikte kullanılması zorduesbuild-plugin-typecheck topluluk eklentisi kullanılarak tsc worker thread içinde çalıştırıldı ve incremental compilation kullanıldı- Her paket kökü için paralel
tsc CLI süreçleri çalıştıran basit bir tür denetimi eklentisi şirket içinde geliştirildi
tsc derleme tanı mesajları, okunabilirliği artırmak için esbuild’in yerel biçimine dönüştürüldütsc --listFilesOnly bayrağı ve esbuild’in Metafile’ı kullanılarak tüm derleme girdilerinin tür denetiminden geçtiği otomatik olarak doğrulandı
Prodüksiyon bundle boyutunu iyileştirme
- esbuild’in bundle boyutu analiz aracı kullanılarak prodüksiyon bundle’ı analiz edildi
- UI bileşen kütüphanesinin hem ESM hem de CJS derlemelerinin bundle içine dahil edildiği sorun keşfedildi
- İç kütüphanedeki hatalı yapılandırma düzeltilerek bundle boyutu küçültüldü (3.3MB -> 2.1MB)
- Birden fazla entrypoint genelinde dosya boyutunun azaldığı görüldü
Etki ve sonuç
- Prodüksiyon uygulamasının sonucunda, warm build süresi %90’dan fazla kısaltılarak yaklaşık 5 saniyeye indirildi
- Watch modunda, TypeScript dosyası değiştiğinde 1 saniyenin altında yeniden derleme mümkün hale geldi
- Geliştiriciler, yeni derleme sistemi sayesinde çalışma verimliliklerinin büyük ölçüde arttığı yönünde geri bildirim verdi
- QA ekibi ve gönüllü geliştiricilerin çabaları sayesinde yeni derleme sistemine geçiş sorunsuz şekilde gerçekleşti
- Geliştirici memnuniyeti anketinde, derleme süresinden memnuniyetsizlik oranı %97’den %5’e dramatik biçimde düştü
- esbuild mükemmel bir araç ve hackathon projeleri bu tür işler için son derece uygun
Henüz yorum yok.