การรวมโมดูล: การนำเข้าแบบไดนามิกขณะทำงาน
ทำความเข้าใจว่า Webpack Module Federation โหลดโมดูลระยะไกลขณะทำงานอย่างไร โดยไม่รวมโมดูลเหล่านั้นไว้ในชุดโปรแกรมโฮสต์
การรวมโมดูล: การนำเข้าแบบไดนามิกขณะทำงาน เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
ปัญหาที่ Module Federation แก้ไข
ในองค์กรพัฒนาส่วนติดต่อผู้ใช้ที่มีหลายทีม แอปพลิเคชันหลายตัวที่นำไปใช้งานแยกกันมักต้องใช้คอมโพเนนต์ส่วนติดต่อผู้ใช้และชุดเครื่องมือร่วมกัน การเผยแพร่ผ่าน npm ต้องเพิ่มหมายเลขรุ่น ออกรุ่นใหม่ และนำแอปพลิเคชันทุกตัวที่ใช้งานโค้ดนั้นไปใช้งานใหม่ทั้งหมด ส่งผลให้ทีมต่าง ๆ เชื่อมโยงกันอย่างแน่นหนาและทำงานปรับปรุงได้ช้า
แนวทาง npm และข้อจำกัด
แนวทางแบบดั้งเดิม (เผยแพร่โค้ดที่ใช้ร่วมกันเป็นแพ็กเกจ npm) หมายความว่าเมื่ออัปเดตคอมโพเนนต์ปุ่มที่ใช้ร่วมกัน จะต้องทำสิ่งต่อไปนี้: อัปเดตแพ็กเกจ npm, เผยแพร่รุ่นใหม่, อัปเดต package.json ของแอปที่ใช้งานทุกตัว, สร้างใหม่และนำแอปที่ใช้งานทุกตัวไปใช้งานใหม่ Module Federation ช่วยตัดขั้นตอนทั้งหมดนี้ออกไป
สิ่งที่ Module Federation ทำได้
Module Federation ช่วยให้แอปพลิเคชันหนึ่ง (เรียกว่า "รีโมต") เปิดให้แอปพลิเคชันอีกตัวหนึ่ง (เรียกว่า "โฮสต์") โหลดและเรียกใช้มอดูล JavaScript ได้ขณะทำงาน โดยไม่ต้องสร้างใหม่หรือนำโฮสต์ไปใช้งานใหม่ เมื่อผู้ใช้โหลดแอปโฮสต์ แอปจะดึงมอดูลของรีโมตมาแบบไดนามิกเมื่อจำเป็น
การรองรับในตัวของ Webpack 5
Webpack 5 เปิดตัว Module Federation ในฐานะความสามารถในตัวระดับหลักผ่าน ModuleFederationPlugin ก่อนหน้า Webpack 5 รูปแบบการทำงานที่คล้ายกันต้องอาศัยการกำหนดค่าด้วยตนเองที่ซับซ้อนหรือปลั๊กอินจากภายนอก ปลั๊กอินนี้จัดการการโหลดแบบไดนามิกและการจัดการขอบเขตที่ใช้ร่วมกันทั้งหมดโดยอัตโนมัติ
แนวคิดสำคัญ: รีโมต
รีโมตคือแอปพลิเคชันที่นำไปใช้งานแยกกันและเปิดให้แอปพลิเคชันอื่นนำมอดูลอย่างน้อยหนึ่งรายการไปใช้ได้ ไม่ว่าจะเป็นคอมโพเนนต์ React ชุดเครื่องมือ หรือหน้าฟีเจอร์ทั้งหมด รีโมตจะสร้างไฟล์รายการ remoteEntry.js ที่อธิบายสิ่งที่เปิดให้ใช้และวิธีโหลดสิ่งเหล่านั้น
แนวคิดสำคัญ: โฮสต์
โฮสต์คือแอปพลิเคชันที่ใช้มอดูลจากรีโมตอย่างน้อยหนึ่งตัว โฮสต์จะอ้างอิงรีโมตด้วยชื่อและ URL ในการกำหนดค่า Webpack เมื่อโค้ดของโฮสต์นำเข้ามอดูลจากรีโมต รันไทม์ของ Module Federation จะดึงและเรียกใช้มอดูลนั้นแบบไดนามิกจาก URL ของรีโมต
แนวคิดสำคัญ: มอดูลที่ใช้ร่วมกัน
มอดูลที่ใช้ร่วมกันคือไลบรารี (เช่น React และ React DOM) ที่ควรโหลดเพียงครั้งเดียว แม้ว่าทั้งโฮสต์และรีโมตจะมีไลบรารีเหล่านี้อยู่ก็ตาม การกำหนดให้ React เป็นซิงเกิลตันที่ใช้ร่วมกันทำให้ Module Federation รับประกันว่าจะมี React ทำงานเพียงรุ่นเดียว ซึ่งสำคัญมากเพราะฮุกของ React จะทำงานผิดพลาดเมื่อมีหลายอินสแตนซ์
ไฟล์รายการ remoteEntry.js
เมื่อสร้างรีโมต Webpack จะสร้างไฟล์ remoteEntry.js ตามชื่อไฟล์ที่กำหนด ไฟล์นี้เป็นทั้งรายการขนาดเล็กและสคริปต์เริ่มต้น โดยประกาศว่ามีมอดูลใดเปิดให้ใช้ ระบุ URL ของส่วนย่อยที่เกี่ยวข้อง และเริ่มต้นขอบเขตที่ใช้ร่วมกัน โฮสต์จะดาวน์โหลดไฟล์นี้ก่อนเพื่อค้นหาว่ารีโมตมีอะไรให้ใช้งาน
กลไกการโหลดขณะทำงาน
เมื่อโฮสต์พบการนำเข้าจากมอดูลรีโมต โฮสต์จะตรวจสอบก่อนว่าโค้ดของรีโมตถูกโหลดไว้แล้วหรือไม่ หากยังไม่ได้โหลด โฮสต์จะดึง remoteEntry.js จาก URL ของรีโมต เริ่มต้นขอบเขตที่ใช้ร่วมกัน (เจรจารุ่นของไลบรารีที่ใช้ร่วมกัน) จากนั้นดาวน์โหลดและเรียกใช้ส่วนย่อยที่มีมอดูลที่ร้องขอ
การนำไปใช้งานแยกกันในทางปฏิบัติ
ทีมหนึ่งนำรีโมตรุ่นใหม่ (ที่อัปเดตคอมโพเนนต์ Button) ไปใช้งานโดยไม่แก้ไขแอปพลิเคชันโฮสต์ ผู้ใช้คนถัดไปที่โหลดโฮสต์จะได้รับ Button รุ่นใหม่โดยอัตโนมัติ เพราะโฮสต์จะดึงข้อมูลจาก URL ของ remoteEntry.js รุ่นปัจจุบันเสมอ ไม่ต้องสร้างโฮสต์ใหม่ ไม่ต้องนำโฮสต์ไปใช้งานใหม่ และไม่ต้องประสานงานกัน
Module Federation เทียบกับ iframe
รูปแบบไมโครฟรอนต์เอนด์รุ่นเก่าใช้ iframe เพื่อแยกส่วนที่แต่ละทีมรับผิดชอบออกจากกัน iframe ให้การแยกอย่างเข้มงวด แต่ทำให้การใช้สถานะร่วมกัน การกำหนดเส้นทาง URL และการจัดรูปแบบทำได้ยากมาก Module Federation ทำให้ทุกส่วนอยู่ในบริบท JavaScript เดียวกัน จึงรองรับการใช้เส้นทางร่วมกัน สถานะการยืนยันตัวตนร่วมกัน และการจัดรูปแบบที่สอดคล้องกัน
รายการรีโมตของ Module Federation
remoteEntry.js มีบทบาทอย่างไรใน Module Federation?
สรุปบทเรียน
Module Federation แก้ปัญหาการนำโค้ดส่วนติดต่อผู้ใช้ที่ใช้ร่วมกันไปใช้งานแยกกัน โดยเปิดให้โหลดมอดูลขณะทำงาน รีโมตเปิดให้ใช้มอดูลผ่าน remoteEntry.js ส่วนโฮสต์จะนำมอดูลเหล่านั้นไปใช้แบบไดนามิกโดยไม่ต้องสร้างใหม่ ซิงเกิลตันที่ใช้ร่วมกัน (React และ React DOM) ป้องกันการโหลดไลบรารีซ้ำ สถาปัตยกรรมนี้ทำให้การนำไปใช้งานแยกกันเกิดขึ้นได้จริง: เมื่ออัปเดตรีโมต แอปพลิเคชันโฮสต์ทั้งหมดจะเห็นการเปลี่ยนแปลงทันที
คำถามที่พบบ่อย
บทเรียน “การรวมโมดูล: การนำเข้าแบบไดนามิกขณะทำงาน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การรวมโมดูล: การนำเข้าแบบไดนามิกขณะทำงาน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การรวมโมดูล: การนำเข้าแบบไดนามิกขณะทำงาน”
ทำความเข้าใจว่า Webpack Module Federation โหลดโมดูลระยะไกลขณะทำงานอย่างไร โดยไม่รวมโมดูลเหล่านั้นไว้ในชุดโปรแกรมโฮสต์ คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “การรวมโมดูล: การนำเข้าแบบไดนามิกขณะทำงาน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การรวมโมดูล: การนำเข้าแบบไดนามิกขณะทำงาน
- การกำหนดค่าแอปรีแอ็กต์โฮสต์และรีโมต
- การแชร์สถานะและการกำหนดเส้นทางระหว่างรีโมต
- การกำหนดรุ่น การนำไปใช้งาน และการประสานงาน