แชร์กรณีศึกษา Debug ฝั่ง Frontend ของ Cashnote - บนเครื่องผมมันใช้ได้จริงนะ...

 (spilist.notion.site)
11 คะแนน โดย spilist2 2021-09-23 | 2 ความคิดเห็น | แชร์ทาง WhatsApp

แชร์กรณีศึกษาในการ debug ปัญหา CSS 3 อย่างที่ทีม frontend ของ Cashnote (https://cashnote.kr) พบระหว่างดูแลโปรดักต์ React ในช่วงหลายเดือนที่ผ่านมา

  • ทั้งหมดมีจุดร่วมคือใช้ CSS module บน create-react-app และเป็นปัญหาที่ไม่พบในสภาพแวดล้อมพัฒนา แต่ไปพบในสภาพแวดล้อมจริง

ปัญหา 1: หลังเข้าไปยังบางหน้าแล้ว รูปภาพในทุกหน้าถัดมามีอาการบิดเบี้ยว

  • สาเหตุคือมีการนิยาม CSS style ในรูปแบบที่ CSS module ไม่สามารถทำ hashing ได้

  • แก้ไขโดยเพิ่ม stylelint plugin เพื่อไม่ให้สามารถเขียน style แบบนี้ได้

ปัญหา 2: CSS style แสดงผลต่างกันระหว่างสภาพแวดล้อมพัฒนาและสภาพแวดล้อมจริง

  • สาเหตุคือมีบางคอมโพเนนต์ override style ของคอมโพเนนต์จาก design system แต่ในสภาพแวดล้อมจริง CSS ของคอมโพเนนต์ design system ถูก inject ช้ากว่า จึงไม่เกิดการ override style

  • ตอนแรกแก้โดยปรับการตั้งค่า Webpack แต่เป็นการตัดสินใจที่ต้องแลกกับประสิทธิภาพในสภาพแวดล้อมจริง จึงไม่ค่อยพอใจนัก

  • ระหว่างหาวิธีอื่น พบว่าสามารถทำให้ override ได้ด้วยการเปลี่ยนการตั้งค่า bundler (rollup) ฝั่ง design system จึงปรับให้ CSS ที่ design system inject เข้ามาอยู่ด้านบนสุดของ head เสมอ

ปัญหา 3: รันในสภาพแวดล้อมพัฒนาไม่มีปัญหา แต่ production build ล้มเหลว

  • ระหว่างที่ Webpack plugin สร้าง CSS chunk มีคำเตือนว่ามีการ import ไฟล์ CSS สองไฟล์ในลำดับที่ต่างกัน จึงอาจทำให้ผลลัพธ์ style ของสอง chunk ออกมาต่างกัน และทำให้ build สำหรับสภาพแวดล้อมจริงล้มเหลว

  • แต่เนื่องจาก Cashnote ใช้ CSS module ไฟล์ CSS แต่ละไฟล์จึงทำงานแยกจากกันอย่างอิสระ ดังนั้น order conflict นี้จึงไม่ทำให้เกิดผลลัพธ์ style ที่ต่างกัน จึงเปลี่ยนการตั้งค่า Webpack ให้มองข้ามคำเตือนนี้

แม้สองปัญหาหลังจะมีอาการที่เห็นบนผิวต่างกัน แต่ก็คล้ายกันในแง่ที่มีต้นตอมาจาก “ความเข้าใจที่ยังไม่เพียงพอเกี่ยวกับวิธีการทำงานของเฟรมเวิร์ก frontend อย่าง create-react-app ในสภาพแวดล้อมจริง”

  • เพื่อการปรับปรุงในระดับรากฐาน จึงกำลังเพิ่มความเข้าใจต่อ CRA และ Webpack และเตรียมความพร้อมสำหรับการถอด CRA ออกในอนาคต

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
xguru 2021-09-23

ขอบคุณที่แชร์ประสบการณ์สนุก ๆ ครับ อย่างที่คิด บนเครื่องโลคัลมักจะทำงานได้ดีเสมอเลย!
 
spilist2 2021-09-23

ขอบคุณครับ การสรุปบทความให้สั้นกระชับก็ไม่ใช่เรื่องง่ายเหมือนกันนะครับ ฮ่าๆ