𝗦𝗶𝗻𝗴𝗹𝗲𝗦𝗣𝗔 𝗪𝗼𝗿𝗸𝘀. 𝗜𝗺𝗽𝗼𝗿𝘁 𝗠𝗮𝗽𝘀 𝗗𝗼𝗻'𝘁 𝗠𝗮𝗻𝗮𝗴𝗲 𝗧𝗵𝗲𝗺𝘀𝗲𝗹𝘃𝗲𝘀
SingleSPA ใช้งานได้จริง เราสามารถรันแอป React, Vue และ Angular บนหน้าเดียวกันได้ โดยแต่ละแอปจะโหลดแยกจากกันอย่างอิสระ ตัวเฟรมเวิร์กทำหน้าที่ของมันได้อย่างยอดเยี่ยม
ปัญหาไม่ได้อยู่ที่ตัวเฟรมเวิร์ก แต่อยู่ที่ระบบนิเวศ (ecosystem) รอบๆ มันต่างหาก
ในสถาปัตยกรรมแบบกระจายศูนย์ (distributed architecture) คุณจำเป็นต้องมีการระบุเจ้าของ (ownership) การตรวจสอบ (auditing) และการกำกับดูแล (governance) SingleSPA ทำให้ความต้องการเหล่านี้เห็นได้ชัดเจนขึ้น เพราะ import map คือจุดศูนย์กลางในการประสานงาน
import map จะอยู่ใน root config ของคุณ มันคือไฟล์ JSON ที่คอยบอก micro frontend (MFE) แต่ละตัวว่าต้องโหลด React เวอร์ชันไหน ในทางทฤษฎี มันคือแหล่งข้อมูลที่ถูกต้องที่สุด (source of truth) แต่ในทางปฏิบัติ กลับไม่มีใครเป็นเจ้าของมันเลย
แต่ละทีมเป็นเจ้าของ MFE ของตัวเอง แต่ไม่มีใครเป็นเจ้าของ map เลย
สิ่งนี้ทำให้เกิดปัญหา:
- ทีมยกเลิกการใช้งาน MFE ไปแล้ว แต่ข้อมูลใน map ยังคงอยู่
- มี dependency ใหม่ๆ เพิ่มเข้ามา แต่ไม่มีใครเพิ่มลงใน map
- map เสื่อมสภาพ (rots) ไปเรื่อยๆ ในขณะที่คุณละเลยมัน
เราพบ MFE ตัวหนึ่งใน map ของเราที่ไม่ได้ถูก deploy มานานถึงแปดเดือนแล้ว มันตายไปแล้ว แต่ก็ยังคงถูกโหลดขึ้นมาใน production อยู่ดี ไม่มีใครสังเกตเห็นเพราะไม่มีใครคอยตรวจสอบ
คุณอาจจะคิดถึงการสร้าง map แบบอัตโนมัติ (auto-generating) ระหว่างการ build เราเคยลองทำแบบนั้นแล้ว แต่มันสร้างปัญหาใหม่ขึ้นมา นั่นคือ merge conflicts หากทั้ง 14 ทีมพยายามเขียนไฟล์ JSON ไฟล์เดียวกันในทุกๆ การ deploy ระบบ CI pipeline ของคุณจะกลายเป็นความวุ่นวายทันที
อีกปัญหาหนึ่งคือความคลาดเคลื่อน (drift) รูปแบบนั้นง่ายมาก: กำหนดให้ React เป็น external ใน config ของคุณ แล้วให้ import map เป็นตัวจัดการเรื่องนี้ วิธีนี้จะช่วยป้องกันไม่ให้เกิด bundle ที่ซ้ำซ้อนกัน
แต่แล้ววันหนึ่งมีคนมา refactor code ของเขา แล้วเผลอ bundle React กลับเข้าไปใน MFE ของตัวเองโดยไม่ตั้งใจ ผลคือ build ผ่าน, test ผ่าน และ deploy ก็เป็นสีเขียว (ผ่านฉลุย)
คุณจะสังเกตเห็นก็ต่อเมื่อ:
- ขนาดของ bundle พุ่งสูงขึ้นอย่างผิดปกติ
- เกิด version mismatch จนทำให้ component พัง
- คุณเห็น React โหลดขึ้นมาสองครั้งใน Chrome DevTools
เราตรวจสอบระบบของเราและพบว่ามี MFE สองตัวที่ส่ง React ของตัวเองมาด้วย ทั้งที่ build ของพวกมันเป็นสีเขียว และพวกมันก็ไม่รู้ตัวเลยว่ากำลังทำผิดมาตรฐาน (out of compliance)
import map และไฟล์ package.json ของคุณคือ input สองส่วนที่แยกจากกัน และพวกมันจะค่อยๆ คลาดเคลื่อนออกจากกันอย่างเงียบๆ
การตรวจสอบด้วย CI สามารถตรวจพบ bundle ที่ซ้ำซ้อนได้ แต่มันไม่สามารถตรวจพบ version mismatch ได้ หาก MFE A ใช้ React 18.2 และ MFE B ใช้ 18.3 การ build จะไม่ล้มเหลว แต่ shared components ของคุณจะพังตอน runtime
เมื่อเราต้องการอัปเดต React เราต้องเสียเวลาหลายชั่วโมงในการ grep ผ่าน repository ที่แตกต่างกันถึง 14 แห่ง ซึ่งนี่เป็นการทำงานที่ไม่มีประสิทธิภาพเลย
We built a tool to fix this. It does two things:
- It builds a version matrix from every MFE's package.json.
- It compares that matrix against your import map.
The tool shows you the gap. It shows you which teams are compliant and which teams have drifted. It also finds stale entries and broken URLs. We run it every Monday morning. It takes 12 seconds.
Our lesson was not technical. Every distributed architecture needs an owner for shared infrastructure. In SingleSPA, the import map is infrastructure. Do not treat it like a shared file. Treat it like a managed asset.
How do you handle this? Do you have an import map owner? Or do you spend your Monday mornings grepping files?
Source: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe