React.lazy'i güvenle kullanın: Hızlı iterasyon yaparken bileşenleri yüklemek için güvenli bir yol

İkilem#

Günümüzde, yazılım geliştirme popüler "hızlı hareket et ve bir şeyleri bozulmasına izin ver" felsefesi altında daha hızlı bir şekilde ilerliyor. Burada eleştirmek değil niyetim - bu, sadece işlerin mevcut durumu. Ancak, bu hızlı tempo bazen özellikle React'te bileşen yükleme konusunda sorunlara yol açabiliyor.

Eğer React.lazy kullanarak bileşenleri talep üzerine yükleyen bir projede çalışıyorsan, ChunkLoadError ve Loading chunk failed gibi sorunlarla karşılaşmış olabilirsin. İşte bazı olası nedenler:

• Kullanıcının internet bağlantısının yavaş veya dengesiz olduğu bir ağ sorunu var.
• Kullanıcı, uygulamanın eski bir sürümünü kullanıyor ve tarayıcı artık mevcut olmayan bir parçayı yüklemeye çalışıyor.

Genellikle, sayfanın basit bir yenilenmesi sorunu çözebilir, ancak bu kullanıcı için harika bir deneyim değildir. Kullanıcı başka bir rotaya geçerken beyaz bir ekran göründüğünü hayal et - bu, uygulaman için iyi bir izlenim bırakmaz.

Hız ihtiyacı ile sorunsuz bir kullanıcı deneyimi arasında denge kurabilir miyiz? Tabii ki. Size nasıl yapılacağını göstereyim (Tabii ki TypeScript ile).

Çözüm#

Kaba bir çözüm, tüm parçaların sürümlerini sunucuda kaydetmek olabilir, böylece "eksik parça" sorunu ortadan kalkar. Ancak uygulamanız büyüdükçe, bu çözüm artan disk alanı gereksinimleri nedeniyle uygulanamaz hale gelebilir ve ağ sorununu da çözmez.

Bir yeniden denedikten veya sayfayı yeniledikten sonra sorun çözülüyorsa, bu çözümleri kodumuza ekleyebiliriz. Sorun genellikle kullanıcı başka bir rotaya geçtiğinde ortaya çıktığından, bunu kullanıcı fark etmeden çözebiliriz. Yapmamız gereken tek şey, React.lazy fonksiyonu etrafında yeniden denemeler ve yenilemelerle ilgilenecek bir sarmalayıcı oluşturmaktır.

Bu tür bir çözümü nasıl uygulayacağınızı anlatan harika makaleler zaten var, bu yüzden ben fikrin ve çözümün iç işleyişine odaklanacağım.

Sarmalayıcıyı oluşturun#

İlk adım, React.lazy fonksiyonu etrafında bir sarmalayıcı oluşturmaktır:

Yeniden denemeleri işleyin#

Ağ sorunları için, importFunction'ı bir tryImport fonksiyonuna sararak yeniden denemeleri işleyebiliriz:

Basit görünüyor, değil mi? Yeniden denemeleri daha verimli bir şekilde işlemek için üstel geri çekilme algoritmasını da uygulayabilirsiniz.

Sayfa yenilemelerini işleyin#

Eski sürüm sorununu çözmek için hatayı yakalayabilir ve sayfayı yenileyebiliriz:

Ancak, bu uygulama çok tehlikelidir, çünkü hatanın bir yenileme ile çözülememesi durumunda sonsuz bir yenileme döngüsü yaratabilir. Bu arada, yenileme sırasında uygulama durumu kaybolacaktır. Bu yüzden sayfayı yenilemeye çalıştığımız mesajı saklamak için sessionStorage'ın yardımına ihtiyacımız var:

Artık safeLazy fonksiyonundan gelen hatayı yakaladığımızda bir yenilemeyle çözülemeyecek bir sorun olduğunu biliyoruz.

Aynı sayfada birden fazla lazy bileşeni#

Mevcut uygulamada gizli bir tuzak daha var. Eğer aynı sayfada birden fazla lazy bileşeniniz varsa, diğer bileşenler sessionStorage değerini sıfırlayabileceğinden sonsuz bir yenileme döngüsü hala meydana gelebilir. Bu sorunu çözmek için her bileşen için benzersiz bir anahtar kullanabiliriz:

Artık her bileşenin kendi sessionStorage anahtarı olacak ve sonsuz yenileme döngüsü önlenecek. Çözümü incelemeye devam edebiliriz, örneğin:

• Tüm anahtarları bir dizide toplamak, böylece sadece bir depolama anahtarı gerekli olur.
• Bir hata atmadan önce sayfayı bir defadan fazla yenilemeyi denemek için bir yenileme sınırı belirleyin.

Ama sanırım fikri anladınız. Testler ve yapılandırmalarla tamamlanmış kapsamlı bir TypeScript çözümü GitHub deposunda mevcuttur. React-safe-lazy paketini de NPM'de yayımladım, böylece hemen projenizde kullanabilirsiniz.

Sonuç#

Yazılım geliştirme hassas bir iştir ve en küçük detaylar bile çözmek için çaba gerektirebilir. Bu makalenin, React.lazy ile ilgili sorunları zarif bir şekilde ele almanıza ve uygulamanızın kullanıcı deneyimini iyileştirmenize yardımcı olabileceğini umuyorum.