Berbagi kasus debugging frontend Cashnote - Di komputer saya tadinya jalan...

 (spilist.notion.site)
11 poin oleh spilist2 2021-09-23 | 2 komentar | Bagikan ke WhatsApp

Berbagi kasus debugging atas 3 masalah CSS yang dialami tim frontend Cashnote (https://cashnote.kr) selama beberapa bulan terakhir saat mengoperasikan produk React

  • Semuanya sama-sama ditemukan di lingkungan produksi, bukan di lingkungan pengembangan, saat menggunakan CSS module di create-react-app

Masalah 1: Setelah masuk ke halaman tertentu, gambar di semua halaman menjadi terdistorsi

  • Penyebabnya adalah gaya CSS didefinisikan dalam bentuk yang tidak bisa di-hash oleh CSS module

  • Diselesaikan dengan menambahkan plugin stylelint agar gaya seperti ini tidak bisa didefinisikan

Masalah 2: Gaya CSS muncul berbeda antara lingkungan pengembangan dan produksi

  • Komponen tertentu menimpa style komponen design system, tetapi di lingkungan produksi waktu injeksi CSS komponen design system lebih lambat sehingga style override tidak terjadi

  • Awalnya diselesaikan dengan mengubah konfigurasi Webpack, tetapi keputusan itu mengorbankan performa lingkungan produksi sehingga terasa kurang memuaskan

  • Saat mencari cara lain, ditemukan bahwa override bisa dimungkinkan dengan mengubah konfigurasi bundler (rollup) di sisi design system. CSS yang disuntikkan oleh design system kemudian diubah agar selalu berada di bagian atas head

Masalah 3: Tidak ada masalah saat dijalankan di lingkungan pengembangan, tetapi build production gagal

  • Build lingkungan produksi gagal karena peringatan dari plugin Webpack saat membuat CSS Chunk: dua file CSS di-import dalam urutan yang berbeda, sehingga dua chunk dapat menghasilkan style yang berbeda

  • Karena Cashnote menggunakan CSS module, setiap file CSS bekerja secara independen, sehingga order conflict tidak menghasilkan perbedaan hasil style. Karena itu, konfigurasi Webpack diubah untuk mengabaikan peringatan tersebut

Dua masalah terakhir tampak berbeda di permukaan, tetapi serupa dalam hal keduanya berasal dari “kurangnya pemahaman tentang bagaimana framework frontend create-react-app bekerja di lingkungan produksi”

  • Untuk perbaikan yang lebih mendasar, mereka sedang meningkatkan pemahaman tentang CRA dan Webpack, sekaligus menyiapkan langkah untuk melepaskan CRA di masa depan

Bacaan terkait

2 komentar

 
xguru 2021-09-23

Terima kasih sudah berbagi pengalaman yang menarik. Memang, di lingkungan lokal biasanya semuanya selalu berjalan mulus!
 
spilist2 2021-09-23

Terima kasih. Ternyata tidak mudah juga merangkum tulisan ini secara singkat haha