Cashnote frontend hata ayıklama vakaları paylaşımı - Benim bilgisayarımda çalışıyordu ama...

 (spilist.notion.site)
11 puan yazan spilist2 2021-09-23 | 2 yorum | WhatsApp'ta paylaş

Son birkaç ayda Cashnote(https://cashnote.kr) frontend ekibinin React prodüğünü işletirken yaşadığı 3 CSS sorununu nasıl debug ettiğine dair bir paylaşım

  • Hepsinin ortak noktası, create-react-app içinde CSS module kullanılırken geliştirme ortamında hiç görülmeyen sorunların prodüksiyon ortamında ortaya çıkmış olması

Sorun 1: Belirli bir sayfaya girdikten sonra tüm sayfalarda görsellerin bozulması

  • Bunun nedeni, CSS module'ün hashleyemediği bir biçimde CSS stilinin tanımlanmış olmasıydı

  • Bu tür stillerin tanımlanmasını engellemek için stylelint plugin'i ekleyerek çözdüler

Sorun 2: Geliştirme ortamı ile prodüksiyon ortamında CSS stillerinin farklı görünmesi

  • Belirli bir component, design system component'inin stilini override ediyordu; ancak prodüksiyon ortamında design system component'inin CSS'i daha geç inject edildiği için stil override uygulanmıyordu

  • İlk başta Webpack ayarını değiştirerek çözdüler, ancak bu karar prodüksiyon performansından ödün vermeyi gerektirdiği için içlerine sinmedi

  • Başka bir yöntem ararken, design system tarafındaki bundler(rollup) ayarını değiştirerek override'ın mümkün hale getirilebildiğini fark ettiler. Design system'in inject ettiği CSS artık her zaman head'in üst kısmına yerleşecek şekilde değiştirildi

Sorun 3: Geliştirme ortamında çalıştırıldığında sorun yokken prodüksiyon build'inin başarısız olması

  • Webpack plugin'i CSS Chunk oluşturma sürecinde iki CSS dosyasının farklı sıralarla import edildiğini, bu nedenle iki chunk'ta farklı stil çıktıları oluşabileceğini söyleyen bir uyarı verdiği için prodüksiyon build'i başarısız oluyordu

  • Cashnote CSS module kullandığı için her CSS dosyası bağımsız çalışıyordu; dolayısıyla order conflict farklı stil çıktıları üretmiyordu. Bu nedenle uyarıyı yok sayacak şekilde Webpack ayarı değiştirildi

Son iki sorun, yüzeydeki belirtileri farklı olsa da, “create-react-app adlı frontend framework'ünün prodüksiyon ortamında nasıl çalıştığına dair yetersiz anlayış”tan kaynaklanmaları bakımından benzerdi

  • Temel bir iyileştirme için CRA ve Webpack hakkındaki anlayışı artırıyorlar; ayrıca daha ileri gidip CRA'yı devreden çıkarmaya hazırlanıyorlar

İlgili okumalar

2 yorum

 
xguru 2021-09-23

Bu ilginç deneyimi paylaştığınız için teşekkürler. Gerçekten de lokalde her şey hep sorunsuz çalışır!
 
spilist2 2021-09-23

Teşekkürler. Yazıyı kısaca özetlemek de pek kolay değilmiş haha