HTML Academy · บทเรียน

พื้นฐาน Module Federation

ทำความเข้าใจว่า Module Federation ช่วยให้แชร์ไมโครฟรอนต์เอนด์ได้อย่างไร

พื้นฐาน Module Federation เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

Module Federation คืออะไร

Module Federation ช่วยให้แอปพลิเคชัน JavaScript โหลดและเรียกใช้โค้ดจากแอปพลิเคชันอีกตัวที่นำไปใช้งานแยกกันได้ในขณะทำงาน รูปแบบนี้เริ่มจาก Webpack 5 และปัจจุบันยังทำได้ด้วยแผนที่การนำเข้าในตัวและการนำเข้าแบบไดนามิก

กรณีการใช้งาน

องค์กรขนาดใหญ่แบ่งแอปขนาดใหญ่แบบก้อนเดียวออกเป็น "ส่วนหน้าเว็บย่อย" หลายตัวที่นำไปใช้งานแยกกัน ได้แก่ แอปหลักหนึ่งตัวกับแอปฟีเจอร์หลายตัว Module Federation ช่วยให้แอปหลักโหลดแต่ละฟีเจอร์ตามต้องการ โดยไม่ต้องรวมทุกอย่างเข้าด้วยกันขณะสร้าง

Webpack Federation

ใน Webpack 5 แอปหลักจะประกาศ remotes (แอปอื่นที่ต้องการใช้) ส่วนแอปปลายทางจะประกาศ exposes (สิ่งที่นำเสนอ) ขณะทำงานจะดึงไฟล์กำกับรายการขนาดเล็กจากแอปปลายทางแต่ละตัวเมื่อเริ่มต้น และดาวน์โหลดชังก์เมื่อแอปหลักนำเข้า

สิ่งที่เทียบเท่าในตัว

หากไม่ใช้ Webpack แนวคิดเดียวกันนี้ทำงานได้ด้วยแผนที่การนำเข้าที่ชี้ไปยังชุด ESM ระยะไกล และการนำเข้าแบบไดนามิกสำหรับการโหลด แผนที่การนำเข้าของแอปหลักระบุว่า "feature-cart": "https://cart-team.example.com/entry.js" ส่วน import("feature-cart") จะโหลดเวอร์ชันล่าสุดที่นำไปใช้งานแล้ว

<script type="importmap">
{
  "imports": {
    "feature-cart": "https://cart.example.com/v1/entry.js",
    "feature-checkout": "https://checkout.example.com/v2/entry.js"
  }
}
</script>

การพึ่งพาที่ใช้ร่วมกัน

หากไม่มีการประสานงาน แอปปลายทางแต่ละตัวจะส่งสำเนาของรีแอ็กต์ไปด้วยตัวเอง เครื่องมือ Federation ช่วยให้ประกาศการพึ่งพาที่ใช้ร่วมกันได้ โดยแอปปลายทางตัวแรกที่โหลดรีแอ็กต์จะทำให้แอปอื่น ๆ ใช้งานได้ด้วย แนวทางในตัวจะใช้แผนที่การนำเข้าชี้แอปปลายทางทุกตัวไปยัง URL ของรีแอ็กต์เดียวกัน

การนำไปใช้งานอย่างอิสระ

แต่ละทีมรับผิดชอบแอปปลายทางของตนเองและนำไปใช้งานเมื่อใดก็ได้ แอปหลักไม่ต้องสร้างใหม่ แต่จะรับเวอร์ชันใหม่เมื่อโหลดหน้าครั้งถัดไป (หรือผ่านการทำให้แคชหมดอายุ) วิธีนี้แยกรอบการเผยแพร่ออกจากกันโดยสิ้นเชิง

กลยุทธ์การจัดการเวอร์ชัน

กำหนดแอปปลายทางให้ใช้ URL ที่มีเวอร์ชัน (/v1/entry.js, /v2/entry.js) เพื่อให้การอัปเกรดแอปหลักเกิดขึ้นโดยตั้งใจ ไม่ใช่เกิดขึ้นโดยปริยาย บางทีมใช้การจับคู่เวอร์ชันตามการกำหนดเวอร์ชันเชิงความหมายในระดับแผนที่การนำเข้าผ่านเครื่องมืออย่าง JSPM

ข้อแลกเปลี่ยน

Federation เพิ่มความซับซ้อนขณะทำงาน ได้แก่ คำขอเครือข่ายที่มากขึ้น การดีบักข้ามต้นทางที่ยากขึ้น และความเสี่ยงที่การพึ่งพาที่ใช้ร่วมกันจะเข้ากันไม่ได้ ให้ใช้เมื่อจำเป็นต้องนำไปใช้งานอย่างอิสระจริง ๆ สำหรับโครงการขนาดเล็ก การสร้างเพียงชุดเดียวจะเรียบง่ายและเร็วกว่า

การแยกข้อผิดพลาด

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

ความปลอดภัยด้านชนิดข้อมูล

การส่งออกจากรีโมตไม่มีข้อมูลชนิดระหว่างคอมไพล์ในโฮสต์ โปรดสร้างชนิดข้อมูล TypeScript ที่ใช้ร่วมกันในแพ็กเกจแยกต่างหาก ซึ่งทั้งสองฝั่งนำไปใช้ หรือใช้การตรวจสอบขณะทำงาน (ซ็อด, ไอโอ-ทีเอส) ที่ขอบเขตการรวมโมดูล

ระบบเนทีฟเทียบกับเครื่องมือ

การรวมโมดูลแบบเนทีฟ (แผนผังการนำเข้า + ESM) เรียบง่ายกว่าและอิงตามมาตรฐาน แต่ไม่มีการประสานการพึ่งพาที่ใช้ร่วมกันของเว็บแพ็ก โปรดเลือกเว็บแพ็ก/การรวมโมดูลสำหรับแอปที่ซับซ้อนและมีการพึ่งพาที่ใช้ร่วมกันจำนวนมาก และเลือกแบบเนทีฟสำหรับการตั้งค่ามินิแอปส่วนหน้าแบบง่าย

แนวทางในอนาคต

W3C กำลังสำรวจพื้นฐานการโหลดโมดูลที่มีความสามารถมากขึ้น ซึ่งจะทำให้การรวมโมดูลแบบเนทีฟมีความสามารถสูงขึ้น รวมถึงการเจรจาการพึ่งพาที่ใช้ร่วมกันที่ดียิ่งขึ้น ในปัจจุบัน ให้ถือว่าแผนผังการนำเข้าเป็นรากฐาน แล้ววางเครื่องมือการรวมโมดูลของคุณไว้ด้านบน

ตรวจสอบความรู้

แรงจูงใจหลักในการใช้การรวมโมดูลในแอปขนาดใหญ่คืออะไร

สรุป

การรวมโมดูลช่วยให้โฮสต์โหลดโค้ดจากรีโมตที่นำไปใช้งานแยกกันได้ขณะทำงาน เครื่องมือของเว็บแพ็ก 5 เพิ่มการเจรจาการพึ่งพาที่ใช้ร่วมกัน ส่วนการรวมโมดูลแบบเนทีฟใช้แผนผังการนำเข้าและการนำเข้าแบบไดนามิก โปรดใช้กับสถาปัตยกรรมมินิแอปส่วนหน้าที่มีหลายทีม และยอมรับความซับซ้อนที่เพิ่มขึ้นเพื่อแลกกับอิสระในการนำไปใช้งานแยกกัน

คำถามที่พบบ่อย

บทเรียน “พื้นฐาน Module Federation” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “พื้นฐาน Module Federation” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “พื้นฐาน Module Federation”

ทำความเข้าใจว่า Module Federation ช่วยให้แชร์ไมโครฟรอนต์เอนด์ได้อย่างไร คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “พื้นฐาน Module Federation” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy