การกำหนดรุ่น การนำไปใช้งาน และการประสานงาน

คุณค่าหลักของ Module Federation คือการนำไปใช้งานแยกกัน: ทีมหนึ่งสามารถอัปเดต ทดสอบ และนำรีโมตไปใช้งานได้โดยไม่ต้องประสานงานกับทีมโฮสต์หรือทำให้ต้องนำโฮสต์ไปใช้งานใหม่ โฮสต์จะรับการเปลี่ยนแปลงโดยอัตโนมัติในครั้งถัดไปที่โหลด remoteEntry.js จาก URL ของรีโมต

แทนที่จะให้บริการ remoteEntry.js ที่ URL ตายตัว (ซึ่งเปลี่ยนทุกครั้งที่นำไปใช้งานใหม่) ให้ใส่แฮชของเนื้อหาไว้ใน URL: remoteEntry.[hash].js วิธีนี้ทำให้การนำไปใช้งานแต่ละครั้งไม่เปลี่ยนแปลงและระบุได้แน่นอน URL เก่ายังคงใช้งานได้ และโฮสต์จะอ้างอิงแฮชใหม่เมื่ออัปเดตไปยังการนำไปใช้งานครั้งใหม่แล้ว URL ที่ไม่เปลี่ยนแปลงช่วยให้ CDN แคชข้อมูลได้อย่างเข้มข้น

เนื่องจากโฮสต์ค้นหารีโมตผ่าน URL คุณจึงทำการทดสอบ A/B ในระดับโครงสร้างพื้นฐานได้ โดยให้ผู้ใช้แต่ละกลุ่มได้รับ URL ของ remoteEntry.js ที่แตกต่างกัน (ซึ่งชี้ไปยังรีโมตคนละรุ่น) วิธีนี้ทำให้สามารถนำไมโครฟรอนต์เอนด์ไปใช้งานแบบคานารีได้อย่างแท้จริง โดยไม่ต้องมีตรรกะของแฟล็กฟีเจอร์ในโค้ดแอปพลิเคชัน

แทนที่จะเขียน URL ของรีโมตลงในการกำหนดค่า Webpack แบบตายตัว โฮสต์จะดึงรายการ JSON เมื่อเริ่มต้นการทำงาน: GET /federation-manifest.json returns { buttonApp: 'https://cdn.example.com/button/remoteEntry.abc123.js' } หากต้องการเปลี่ยนรุ่นที่โฮสต์ใช้ ให้อัปเดตรายการ โดยไม่ต้องสร้างโฮสต์ใหม่

เมื่อการนำรีโมตรุ่นใหม่ไปใช้งานทำให้เกิดข้อผิดพลาด การย้อนกลับทำได้ทันที โดยอัปเดต federation-manifest.json ให้ชี้ไปยัง URL ของ remoteEntry.js รุ่นก่อนหน้า โฮสต์จะเริ่มใช้รุ่นเก่าในรอบคำขอถัดไปทันที ไม่ต้องสร้างโฮสต์ใหม่ ไม่ต้องย้อนกลับโฮสต์ และไม่ต้องประสานงานกัน

Module Federation 2.0 (แพ็กเกจ @module-federation/enhanced) เพิ่มการปรับปรุงสำคัญหลายด้าน ได้แก่ การรองรับ TypeScript ที่ดีขึ้นพร้อมการสร้างชนิดข้อมูลอัตโนมัติจากแมนนิเฟสต์ของรีโมต ส่วนติดต่อโปรแกรมแบบปลั๊กอินขณะรันไทม์สำหรับตรรกะการโหลดแบบกำหนดเอง และการจัดการขอบเขตที่ใช้ร่วมกันที่มีประสิทธิภาพยิ่งขึ้นสำหรับสถานการณ์การต่อรองเวอร์ชันที่ซับซ้อน

แพ็กเกจ vite-plugin-federation นำ Module Federation มาสู่โปรเจกต์ที่ใช้ Vite โดยใช้ส่วนติดต่อโปรแกรมการกำหนดค่าที่คล้ายกับ ModuleFederationPlugin ของ Webpack แพ็กเกจนี้ใช้ร่วมกันได้ทั้งกับรีโมตของ Vite และโฮสต์ของ Webpack รวมถึงในทางกลับกัน ทำให้ทีมต่าง ๆ ย้ายไปใช้ Vite ได้ทีละขั้นโดยไม่ต้องละทิ้ง Module Federation

สำหรับสถาปัตยกรรมที่เปลี่ยนแปลงอยู่เสมอ คุณสามารถกำหนด URL ของรีโมตทั้งหมดขณะรันไทม์ได้: import(remoteRegistry[featureName]) โดย remoteRegistry จะถูกเติมข้อมูลจากการเรียกส่วนติดต่อโปรแกรม วิธีนี้ทำให้เกิดสถาปัตยกรรมลักษณะปลั๊กอิน ซึ่งสามารถเพิ่มไมโครฟรอนต์เอนด์ใหม่ได้โดยไม่ต้องสร้างแอปเชลล์ใหม่

หน้าที่หลักของแอปเชลล์คือการประสานงาน: อ่านแมนนิเฟสต์ของรีโมต เริ่มต้นรันไทม์ของ Module Federation ลงทะเบียนโมดูลรีโมตภายใต้เส้นทางที่มีชื่อ และแสดงผลรีโมตที่เหมาะสมตาม URL ปัจจุบัน แอปเชลล์ถูกออกแบบให้มีตรรกะบางโดยตั้งใจ—รู้ว่าจะโหลดอะไร ไม่ใช่รู้ว่าจะแสดงผลอย่างไร

เพิ่มการตรวจสอบประสิทธิภาพในการโหลดรีโมต: ห่อการนำเข้ารีโมตด้วย try/catch เพื่อจัดการความล้มเหลวในการโหลดอย่างเหมาะสม (แสดงส่วนติดต่อผู้ใช้สำรองหากรีโมตไม่พร้อมใช้งาน) วัดเวลาที่ใช้ดาวน์โหลด remoteEntry.js และชังก์ของคอมโพเนนต์ และแจ้งเตือนหากเวลาโหลดรีโมตเกินค่าขีดจำกัด (ซึ่งบ่งชี้ถึงปัญหาของ CDN)

กระบวนการ CI/CD ของ Module Federation ที่พัฒนาเต็มที่มีลักษณะดังนี้: ทีมรีโมตส่งคอมมิต → CI สร้างรีโมต → อัปโหลด remoteEntry.[hash].js ที่ไม่เปลี่ยนแปลงไปยัง CDN → อัปเดต federation-manifest.json → โฮสต์รับรีโมตใหม่ในการร้องขอครั้งถัดไปของผู้ใช้ แต่ละขั้นตอนทำงานโดยอัตโนมัติ และทีมโฮสต์ไม่ต้องเข้ามาเกี่ยวข้องกับการนำรีโมตไปใช้งาน

Module Federation ช่วยให้การนำไปใช้งานเป็นอิสระอย่างแท้จริง: รีโมตสามารถนำไปใช้งานได้โดยไม่ต้องสร้างโฮสต์ใหม่ และโฮสต์จะค้นพบเวอร์ชันใหม่โดยอัตโนมัติ ใช้ URL ของรีโมตที่มีแฮชของเนื้อหาเพื่อการแคชบน CDN ที่ไม่เปลี่ยนแปลง และใช้แมนนิเฟสต์แบบไดนามิกเพื่อกำหนดเส้นทางเวอร์ชันอย่างยืดหยุ่นและย้อนกลับได้ทันที vite-plugin-federation นำความสามารถเหล่านี้มาสู่ Vite และการนำเข้ารีโมตแบบไดนามิกช่วยให้เกิดสถาปัตยกรรมลักษณะปลั๊กอิน แอปเชลล์ทำหน้าที่ประสานงานการโหลดรีโมต โดยคงโครงสร้างของตัวเองให้บางอย่างตั้งใจ