GitHub, Pull Request Diff Satırlarını Nasıl Hızlandırdı

GitHub, pull request inceleme deneyiminin merkezinde yer alan Files changed sekmesini React tabanlı yeni mimariyle yeniden tasarladı. Özellikle binlerce dosya ve milyonlarca satır içeren büyük pull request'lerde JavaScript heap kullanımının 1 GB'ı, DOM düğüm sayısının 400.000'i aştığı ve etkileşimlerin kullanılamaz hale geldiği tespit edildi. Interaction to Next Paint (INP) skorları da kabul edilebilir seviyelerin çok üzerindeydi.

Ekip, tek bir çözüm yerine pull request büyüklüğüne göre farklılaşan stratejiler geliştirdi: diff-satır bileşenlerinde odaklı optimizasyonlar, en büyük pull request'ler için sanallaştırma ile kademeli düşüş, ve tüm ölçeklerde etkili olan temel bileşen iyileştirmeleri. İlk sürümde (v1) her diff satırı, unified görünümde yaklaşık 10, split görünümde ise 15 DOM elemanı ve 8-13 React bileşeni gerektiriyordu; ayrıca satır başına 20'den fazla event handler bağlanıyordu. Bu yapı küçük ölçekte sorun yaratmasa da binlerce satırlık pull request'lerde ciddi performans kaybına yol açıyordu.

v2 sürümünde bileşen ağacı sadeleştirildi: split ve unified görünümler için ayrı, özel bileşenler oluşturularak paylaşılan wrapper bileşenlerin getirdiği ek yük ortadan kaldırıldı ve satır başına bileşen sayısı sekizden ikiye indi. Event handling, data-attribute değerleri kullanan tek bir üst düzey handler'a taşındı. Yorum ve context menü gibi karmaşık state'ler, yalnızca ilgili alt bileşenlere taşınarak diff-satır bileşeninin tek sorumluluğunun kod render etmek olması sağlandı. Bu değişiklikler, büyük ölçekli sistemlerde küçük görünen optimizasyonların nasıl katlanarak büyük etkiler yarattığını gösteren somut bir mühendislik örneği sunuyor.